jQuery - Animiertes DIV Breitenproblem

G

gordian

Grünschnabel
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:
Danke für den Hinweis.

Das Ganze habe ich mal mit "(document).width()" und "(window).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 );
});
 
Zuletzt bearbeitet:
Das kann ich nicht reproduzieren.

Javascript: 
$(document).width();

Liefert ohne Scrollbalken 1680 und mit 1667.

Vielleicht hast du einen Denkfehler gemacht. Hat "#cont" eventuell margin, padding oder border? Das kommt ja zu der Breite dazu!


Hier ein Beispiel. "#right" geht nach der Animation exakt bis zum rechten Rand. Egal ob ich einen Scrollbalken habe oder nicht.
HTML: 
<!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" />
	
	<title>Width anim</title>
	
	<style type="text/css">
		body {
			margin:0;
		}
		
		#left {
			width:200px;
			height:5000px;
			background:red;
			float:left;
		}
		
		#right {
			background:green;
			float:left;
		}
	</style>
</head>

<body>
	<div id="left"></div>
	
	<div id="right">
		Klick mich zum animieren!
	</div>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	$(function() {
		var $right = $('#right').click(function() {
			
			var width = $(document).width() - 200;
			
			$right.animate({
				width: width
			});
		});
	});
	/* ]]> */
	</script>
</body>

</html>
 
Danke für deine Mühe.

Mittlerweile konnte ich das Probem eingrenzen. Es liegt 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!

HTML: 
<!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?
 
Das liegt wohl daran, dass beim document die Breite der Scrollbalken nicht zur Breite zählen, bei anderen Elementen scheinbar doch (#cont ist in beiden Fällen bei mir 1680 breit).

Jetzt hast du mehrere Möglichkeiten.
1. Du baust es so um, dass du wieder die Breite des document benutzen kannst
2. Du benutzt z.B. http://plugins.jquery.com/project/getscrollbarwidth um die Breite abzuziehen (dafür musst du aber erst mal wissen, ob aktuell welche angezeigt werden)
3. Du steckst in #cont ein zweites div, welche nur den Sinn hat, die Breite zu bestimmen


Ich halte 3. für am Besten.

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

Javascript: 
$('#cont_inner').width();

Du musst #cont_inner nicht mal irgendwelche CSS Eigenschaften geben. Es muss nur existieren.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück