✔ Komisches verhalten zwischen style.left und style.width

one6666

one6666

Mitglied Titanium
Hallo,

wie in den anderen Beitrag schon erwähnt, habe ich das Problem mit den gleichzeitigen verschieben gelöst :)
funktioniert auch fast perfekt, jetzt ist aber das Problem das der erst in Richtung links fährt und dann erst nach Richtung rechts,
aber auch das stimmt nicht ganz :D der fühlt die width Fläche genau so wieer nach links fährt,
aber das ist nicht Sinn und Zweck, der soll sich schon in beide Richtungen bewegen, und nicht erst in die eine und dann wieder in die ander :confused:

Demo: http://media-volex.de/editor.html

Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor Fenster</title>
<style type="text/css">
body{
	margin:0px;
	padding:0px;
}
</style>

<script type="text/javascript">
function move(count){
	if(count == undefined){
		count = 0;
	}
	if(count < 2000){
		if(count < left_div){ /*left*/
		    div.style.left = "-" + count + "px";	
		}
		if(count < right_div){/*right*/
			right_count = width_div + count;
			div.style.width = right_count + "px";
		}
		count++;
		window.setTimeout("move(" + count + ")", 1);
	}
}
function fullscreen(){
	div = document.getElementById("div");
	/********* left right***********/
	width_window = window.innerWidth;
	left_div = div.offsetLeft;
	width_div = parseInt(div.style.width);
	right_div = width_window - width_div;
	/*******************************/
	move();
}
</script>
</head>

<body>
<div style="margin-left:300px; margin-top:300px;">
    <div onclick="fullscreen()" id="div" style="background:#9F0; width:100px; height:100px; position:relative; z-index:1px;"></div>
</div>
</body>
</html>
Verstehe es einfach nicht habe schon versucht nach rechts den speed schneller zumachen aber es bringt auch nix :(
 
Dir ist schon klar das Du um eins verschiebst und die width nur um eins erhoehst? Du musst die Breite um count+1 erhoehen damit in beide Richtungen was passiert.
 
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor Fenster</title>
<style type="text/css">
body{
	margin:0px;
	padding:0px;
}
</style>

<script type="text/javascript">
function move(count){
	if(count == undefined){
		count = 0;
	}
	if(count < 2000){
		if(width_div < width_window-1){/*right*/
			right_count = width_div + 1;
			if(count < left_div){ /*left*/
		   		div.style.left = "-" + count + "px";
				right_count++;	
			}
			div.style.width = right_count + "px";
			width_div = parseInt(div.style.width);
		}
		
		if (width_div < parseInt(window.innerWidth)){
		    count++;
		   	window.setTimeout("move(" + count + ")", 1);
		}
	}
}
function fullscreen(){
	div = document.getElementById("div");
	/********* left right***********/
	width_window = window.innerWidth;
	left_div = div.offsetLeft;
	width_div = parseInt(div.style.width);
	right_div = width_window-left_div;
	/*******************************/
	move();
}
</script>
</head>

<body>
<div style="margin-left:300px; margin-top:300px;">
    <div onclick="fullscreen()" id="div" style="background:#9F0; width:100px; height:100px; position:relative; z-index:1px;"></div>
</div>
</body>
</html>

Das ist jetzt wie gewuenscht. Wenn links verschoben wird muss die Breite um zwei erhoeht werden. Wenn links still steht dann nur noch um eins. Daher steht die if-Abfrage fuer links innerhalb der if-Abfrage fuer rechts. Das ist dann natuerlich abhaengig von der Position des Elementes zur Anzeigeflaeche. Sprich die Bedingungen zueinander musst Du noch ein wenig verallgemeinern damit es immer funktioniert.

Ach und ganz wichtig: Schalt die Funktion ab wenn sie nicht mehr gebraucht wird! Daher das letzte If.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück