JS | DIV´s bewegen

MasterT · 19.08.2013

Hallo,
ich möchte 2 divs gleichzeitig bewegen, das eine nach links, das andere nach rechts. Mein Code

PHP:

function show(id1,id2) {
var TIMERSHOW;

var target1 = document.getElementById(id1); //das entsprechende DIV mit der angegeben Id ranholen
var tposl1 = parseInt(target1.style.left); // die position der linken oberen ecke des divs vom linken rand

var target2 = document.getElementById(id2); //das entsprechende DIV mit der angegeben Id ranholen
var tposl2 = parseInt(target2.style.left); // die position der linken oberen ecke des divs vom linken rand

    if(tposl1 <= 0){ // die if-abfrage die prüft ob das div schon an pixel 600 angekommen ist
        target1.style.left = tposl1 + 5 + "px"; // aufsummieren auf die alte position um eine neue position zu erreichen
    }
    if(tposl2 <= -200){ // die if-abfrage die prüft ob das div schon an pixel 600 angekommen ist
        target2.style.left = tposl2 -5 + "px"; // aufsummieren auf die alte position um eine neue position zu erreichen
    }
    
    TIMERSHOW = setTimeout(function(){show(id1,id2)}, 5);
}
</script>
<body>
<div style="background-color: #999; width: 20%; height: 800px;">
<div id="start">
    <a href="javascript:show('start','popupalternative');">Neuigkeiten</a><br />
    <a href="javascript:show()">Bands</a><br />
    <a href="javascript:show()">Announcen</a><br />
    <a href="javascript:show()">Veranstaltungen</a>
</div>
<div style="position: absolute; left: -200px;" id="popupalternative">
    <a href="">Neuigkeiten</a><br />
    <a href="javascript:show()">Bands</a><br />
    <a href="javascript:show()">Announcen</a><br />
    <a href="javascript:show()">Veranstaltungen</a>
</div>

Was hab ich falsch gemacht? :schmoll:

Freundliche Grüße

Duddle · 19.08.2013

AW: JS | DIV´s bewegen

Deine Kommentare korrelieren nicht mit deinem Code, insbesondere in den if-Abfragen.

Du fängst auch keine offensichtlichen Fehler ab. Zum Beispiel hat das #start kein style-Attribut, also bringt

Code:

var tposl1 = parseInt(target1.style.left); // die position der linken oberen ecke des divs vom linken rand

nur ein NaN.

Duddle

MasterT · 19.08.2013

AW: JS | DIV´s bewegen

PHP:

<script type="application/javascript">
function show(id1,id2) {
var TIMERSHOW;

var target1 = document.getElementById(id1);
var tposl1 = parseInt(target1.style.left); 

var target2 = document.getElementById(id2);
var tposl2 = parseInt(target2.style.left); 

    if(tposl1 <= 0){ 
        target1.style.left = tposl1 + 5 + "px";
    }
    if(tposl2 <= -200){ 
        target2.style.left = tposl2 -5 + "px"; 
    }
    
    TIMERSHOW = setTimeout(function(){show(id1,id2)}, 5);
}
</script>
<style>
body {
    margin:0px;
    padding:0px;
    height: 100%;
    width:100%;
}
*{padding: 0px; margin: 0px;}

a {
    color: #CCC;
    text-decoration: none;
    font-size: 30px;
    display: block;
    width: 100%;
}

a:hover {
    background-color: #960;
}
</style>

<body>
<div style="background-color: #999; width: 20%; height: 800px;">
    <div  style="position: absolute; left: 0px;" id="start">
        <a href="javascript:show('popupalternative','start');">Neuigkeiten</a><br />
        <a href="javascript:show()">Bands</a><br />
        <a href="javascript:show()">Announcen</a><br />
        <a href="javascript:show()">Veranstaltungen</a>
    </div>
    <div style="position: absolute; left: -200px;" id="popupalternative">
        <a href="javascript:hide('start')">Neuigkeiten</a><br />
        <a href="javascript:show()">Bands</a><br />
        <a href="javascript:show()">Announcen</a><br />
        <a href="javascript:show()">Veranstaltungen</a>
    </div>
</div>

Trotz der Korrektur des offensichtlichen Fehlers, wird nur der DIV mit der ID "popupalternative" verschoben. Der Div "Start" bleibt wo er war

Duddle · 19.08.2013

AW: JS | DIV´s bewegen

Bau dir ein

Code:

console.log(tposl1 + " " + tposl2);

in deine Funktion und lass dir damit im Firebug anzeigen, was mit den Variablen passiert. Dann solltest du deinen Fehler sehen.

Duddle

MasterT · 19.08.2013

AW: JS | DIV´s bewegen

@Duddle

habs gemacht wie du gesagt hast, keine Fehlermeldung

Nachtrag: nun wird mir angezeigt das tposl1 is not defined ist, nur verstehen tue ich das nicht

Duddle · 19.08.2013

AW: JS | DIV´s bewegen

Natürlich kommt keine Fehlermeldung, aber du siehst doch wie sich die Variablen verändern. Wenn bspw. eine davon 42 ist und du nur auf 99 reagierst, ist das ein Fehler.

Duddle

MasterT · 19.08.2013

AW: JS | DIV´s bewegen

Eine Frage hätte ich noch! Ich habe nun das Problem das Javascript bzw. mein Browser (firefox 23.01) die Position berechnet, aber dann wenn es stehen bleibt immer ruckelt. Da gibts wohl ein Konflikt, aber kenne mich zu wenig mit Javascript aus. Kann mir wer erklären woran das liegt und mir Tipps geben?

Freundliche Grüße

PHP:

<script type="application/javascript">
function vor(id1,id2) {
var TIMER;

var target1 = document.getElementById(id1);
var tposl1 = parseInt(target1.style.left); 

var target2 = document.getElementById(id2);
var tposl2 = parseInt(target2.style.left); 

    if(tposl1 != 0){ 
        target1.style.left = tposl1 -5+"px";
    }
    
    if(tposl2 != -200){ 
        target2.style.left = tposl2 -5+"px"; 
    }
    
    if((tposl1 == 0) && (tposl2 == -200)) {
            clearTimeout(TIMER);
    }

    TIMER = setTimeout(function(){vor(id1,id2)}, 1);
}    

function zurueck(id1,id2) {
var TIMERs;

var target1 = document.getElementById(id1);
var tposl1 = parseInt(target1.style.left); 

var target2 = document.getElementById(id2);
var tposl2 = parseInt(target2.style.left); 

    if(tposl1 != 200){ 
        target1.style.left = tposl1 +5+"px";
    }
    
    if(tposl2 != 0){ 
        target2.style.left = tposl2 +5+"px"; 
    }
    
    if((tposl1 == 200) && (tposl2 == 0)) {
            clearTimeout(TIMERs);
    }
    TIMERs = setTimeout(function(){zurueck(id1,id2)}, 1);
}
</script>
<style>
body {
    margin:0px;
    padding:0px;
    height: 100%;
    width:100%;
}
*{padding: 0px; margin: 0px;}

a {
    color: #CCC;
    text-decoration: none;
    font-size: 30px;
    display: block;
    width: 200px;
    padding: 0px;
    margin: 0px;
}

a:hover {
    background-color: #960;
}
ul, ol, li, dl, dt, dd {display: block; padding: 0px; margin:0px;}
li {display: list-item;list-style: none; float: left; display: inline-block;}
</style>

<body>
<div style="background-color: #999; width: 200px; height: 800px; overflow: hidden;">
    <ul>
        <li style="position: relative; left: 0px; top: 0px;" id="start">
            <a href="javascript:vor('neuigkeiten','start');">Neuigkeiten</a><br />
            <a href="javascript:show()">Bands</a><br />
            <a href="javascript:show()">Announcen</a><br />
            <a href="javascript:show()">Veranstaltungen</a>
        </li>
        <li style="position: relative; left: 200px; top: 0px;" id="neuigkeiten">
            <a href="javascript:show('start','neuigkeiten')">Neuigkeiten</a><br />
            <a href="javascript:show()">Bands</a><br />
            <a href="javascript:show()">Musiker</a><br />
            <a href="javascript:zurueck('neuigkeiten','start')">Zurück</a>
        </li>
    </ul>
</div>
</body>
</html>

Duddle · 19.08.2013

AW: JS | DIV´s bewegen

Du machst zwar ein clearTimeout, aber die Funktion läuft ja trotzdem weiter, also kommt es auch zur Zeile in der TIMER (bzw. TIMERs) wieder gesetzt wird. Ergo läuft das in Dauerschleife durch.
Du musst also explizit die Funktion verlassen, wenn die korrekten Bedingungen vorliegen.
http://www.mediaevent.de/javascript/Javascript-Funktionen-Return.html

Übrigens brauchst du für diese Funktionen garkeine Variable für die Timeouts. Die Variablen werden sowieso am Ende der Funktion vergessen, also ist das clearTimeout auch unnötig.

Solche Variablen sind für Intervalle sinnvoll, weil du dann einen bestimmten Intervall ansprechen und eben beenden kannst. Da sich aber bei dir die Funktion im Endeffekt selbst aufruft, kannst du diese "Schleife" direkt mit einem vorzeitigen Verlassen der Funktion (siehe oben) unterbrechen.

Duddle