Antworten auf deine Fragen:
Neues Thema erstellen

jQuery - Animiertes DIV Breitenproblem

G

gordiaaan

Guest

Hallo zusammen,

ich habe ein Problem mit der animate() Funktion von jQuery.

Bei einem Projekt habe ich zwei DIVs die nebeneinander liegen. Die erste hat eine Breite von 200px, die zweite hat keine (also nicht sichtbar). Durch klicken auf einen Link, soll die Zweite animiert breiter werden und zwar bis auf die andere Seite vom Browser. Das Animieren ist kein Problem, allerdings klappt es mit der genauen Breite nicht. Wenn ich bei width: "100%" festlege, wächst das DIV über den Rand hinaus, weil 100% + 200px.

Gibt es bei jQuery Rechenoperation? Etwas sowas wie width: "100% - 200px"?
Oder wie würded ihr das Problem lösen, so dass es bei jeder Auflösung funktioniert?

Hier der Code-Schipsel:
Code:
$("#go").click(function(){
  $("#cont").animate({
    width: "100%",
  }, 200 );
});
Thanks!
 
Zuletzt bearbeitet von einem Moderator:

G

gordiaaan

Guest

AW: jQuery - Animiertes DIV Breitenproblem

Danke für den Hinweis.

Das Ganze habe ich mal mit "(document).width()" und "(windows).width()" getestet. Damit also die Breite ausgelesen und die 200px vom ersten DIV subtrahiert.

Das funktioniert auch ganz gut, nur taucht ein Problem auf, sobald rechts ein Scollbalken ist. Dann "wächst" das zweite DIV nämlich nicht bis zum Scrollbalken, sondern weiterhin bis zum Browsserand. Das ergebnis ist ein Scollbalken unten, mit dem man 5mm hin und her scrollen kann.

Wie kann ich das lösen?

Code:
$("#go").click(function(){
    var res = ($(document).width()-200); 
    $("#cont").animate({
        width: res,
    }, 200 );
});
 
G

gordiaaan

Guest

AW: jQuery - Animiertes DIV Breitenproblem

Sorry. Das war nur ein Tippfehler im Text. Beim Testen hatte ich "window" geschrieben und das Problem tauchte trotzdem auf.
 
G

gordiaaan

Guest

AW: jQuery - Animiertes DIV Breitenproblem

Ok, du hast recht. Eigentlich funktioniert es wirklich.
Es liegt bei mir daran, dass ich ein "Hintergrund" habe, der sich der Auflösung anpasst. Durch die CSS-Tags overflow:hidden/auto kommt dann es so zustande. Aus irgendeinem Grund kommt der Script damit nicht klar. Aber ich checks absolut nicht!

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
    <title>Width anim</title>
    
    <style type="text/css">
html,#bg, table{
    width:100%;
    height:100%;
    overflow:hidden;
}

#cont {
    position: absolute;
    top:0;
    left:0;
    z-index:70;
    overflow:auto;
    width:100%;
    height:100%;
}

#bg div {
    position:absolute;
    width:200%;
    height:200%;
    top:-50%;
    left:-50%;
}

#bg img {
    min-height:50%;
    min-width:50%;
    margin:0 ;
    display:block;
}
        
#left {
    width:200px;
    height:5000px;
    background:red;
    float:left;
}
        
#right {
    background:green;
    float:left;
    height:20px;
}

</style>
</head>

<body>
<div id="bg">
    <div>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <img id="bg" alt="background" src="http://media-cdn.tripadvisor.com/media/photo-s/00/1c/45/b8/foto-artistica.jpg" />
                </td>
            </tr>
        </table>
    </div>
</div>

<div id="cont">
    <div id="left"></div>
    
    <div id="right">
        Klick mich zum animieren!
    </div>
</div>
    

    <script type="text/javascript">
    /* <![CDATA[ */
    $(function() {
        var $right = $('#right').click(function() {
            
            var width = $(window).width() - 200;
            
            $right.animate({
                width: width
            });
        });
    });
    /* ]]> */
    </script>
</body>

</html>

In dem Fall rutsch das grüne DIV nach unten, weil es wegen den 5mm mehr neben dem roten keinen platz hat.

Eine Idee?
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.616
Beiträge
1.538.354
Mitglieder
67.534
Neuestes Mitglied
Mario Rossi-Munter
Oben