jQuery - Animiertes DIV Breitenproblem

gordiaaan · 11.06.2011

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!

exo · 12.06.2011

AW: jQuery - Animiertes DIV Breitenproblem

Schau dir mal das hier an, sollte dir weiter helfen --> .width() – jQuery API

gordiaaan · 12.06.2011

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 );
});

cebito · 12.06.2011

AW: jQuery - Animiertes DIV Breitenproblem

gordiaaan schrieb:
und "(windows).width()"

lass mal das "s" weg, dann klappts auch mit der Breite...

PHP:

$(window).width()

gordiaaan · 12.06.2011

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.

cebito · 12.06.2011

AW: jQuery - Animiertes DIV Breitenproblem

gordiaaan schrieb:
und das Problem tauchte trotzdem auf.

Kann nicht sein, für mehr Hilfe wäre ein Link zum Problem angebracht.

gordiaaan · 12.06.2011

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?