nicht angemeldet
<div> bewegt sich nicht so, wie ich will...
Hallo Leute,
schon mehr als eine Woche sitze ich bei meinem Problem und komme auf keine Loesung. Vielleicht sehe ich den Wald vor lauter Baeumen nicht.
Ich habe fünf <div>-Bereiche auf meiner Hauptseite, die ich mit z.B. "onMouseover="init('BSInfoblatt','0')" unabhaengig voneinander um 145 Pixel in 5er Schritten nach oben bewege ('BSInfoblatt' ist die ID eines der <div>-Bereiche und mit der Zahl [0-4] übergebe ich die Kennziffer für das aktuelle Array). Funktioniert beim IE (4-6) auch, aber wenn ich genau hinsehe, dann bewegt er sich fast unmerklich zuerst 5 Pixel nach unten und dann erst 150 Pixel hinauf. Entgegengesetzt synchron bei "mouseOut" - da geht der Layer erst 5 Pixel hinauf und dann den ganzen Weg hinunter.
Beim NN6 sieht man den Effekt noch deutlicher, weil da alles viel, viel langsamer geht und der NN4 springt nur in unregelmaessigen Abständen in die gewuenschte Richtung - wenn überhaupt.
Mache ich da einen grundsätzlichen Fehler, habe ich da ein Logikproblem oder versuche ich das Unmoegliche viel zu kompliziert zu erzwingen?
Bitte moegliche Formfehler zu verzeihen - es ist meine erste Seite...
Hier der Code:
<Script Language="JavaScript" type="text/javascript">
<!--
var ns4 = document.layers?1:0;
var dom = document.getElementById?1:0;
var timer = new Array(null,null,null,null,null);
var width = 145;
var speed = 1;
var begin = 250;
// Array-Variable für die verschiedenen top-Werte der Layer
var x = new Array(250,250,250,250,250);
ns4?ref="document.":ref="document.getElementById";
// Funktion schiebt den übergebenen Layer so lange hoch, bis 105 Pixel zurückgelegt sind und übernimmt die dazugehörige ID der <div>-Bereiche und die Nummerierung für das x- bzw. das time-Array.
function init(layer,xarr) {
clearInterval(timer[xarr]);
timer[xarr] = setInterval("scroll('" + layer + "','" + xarr + "')",speed);
}
function scroll(layer,xarr) {
if(x[xarr] > (begin - width)) {
if (ns4) {
eval(ref + layer + '.top="' + x[xarr] + '"');
}
else if (dom) {
eval(ref + '("' + layer + '")' + '.style.top="' + x[xarr] + '"');
}
x[xarr] = x[xarr] - 5;
}
}
// Funktion schiebt den übergebenen Layer runter und übernimmt die dazugehörigen Arrays
function initdown(layer,xarr) {
clearInterval(timer[xarr]);
timer[xarr] = setInterval("scrolldown('" + layer + "','" + xarr + "')",speed);
}
function scrolldown(layer,xarr) {
if(x[xarr] <= begin) {
if (ns4) {
eval(ref + layer + '.top="' + x[xarr] + '"');
}
else if (dom) {
eval(ref + '("' + layer + '")' + '.style.top="' + x[xarr] + '"');
}
x[xarr] = x[xarr] + 5;
}
}
-->
</script>
---------------------------------------------------------------------
Dies hier ist der <div>-Layer im HTML-Code, in dem ich mit mouseOver und mouseOut die Bewegung iniziere, und die IDs der fünf Layer + der Kennziffern für die timer- und die x-Arrays weitergebe...
<div ID="HSInfoblatt" style="position: absolute; left:10px; top:250px; z-index:1;" onMouseover="init('HSInfoblatt','0')" onMouseout="initdown('HSInfoblatt','0')">
<img src="GIFs/NEWS1.gif" width=110 height=10 border="0"><table bgcolor=#0055ff width="110" style="filter:Alpha(opacity=80,finishopacity=80,style=0);">
<tr>
<td>
<div class="Textkleinweiss" align=center>HOCHSEE - INFOS</div>
</td>
</tr>
<tr>
<td>
<h1 align=center><br>Am 1. Juni 02<br>beginnt der<br>nächste Törn !<br>Melden Sie sich hier an!<br><br><br>
<a href="Anmeldung/AnmeldungFrameset.html">ANMELDUNG</a>
<br><br>
</h1>
</td>
</tr>
</table>
</div>
Wäre einmalig, wenn sich jemand die Muehe antut, sich den Code anzuschauen. Ich verstehe wahrscheinlich die setInterval-Funktion falsch, oder entgleisen mir hier irgendwo die Variablen?
Danke!
-
hi
Beim NN6 sieht man den Effekt noch deutlicher, weil da alles viel, viel langsamer geht.
es soll helfen, wenn der Timeout in der setTimeout()-Funktion ein vielfaches von 30 ist, um etwas schneller zu sein.
Grüße aus Lüneburg
Kai
-
hi,
leider ist es mir etwas zu anstrengend, mich durch den Code zu wuehlen. Schau Dir mal das an:
http://www.wendenburg.de/test/move.html
da werden mehrere divs per Zufall durch die Gegend bewegt. Die zentrale Funktion "move" stammt in etwa aus dem Mintert/Kuehnel Workshop, Du uebergibst id, Ziel-x/y und Geschwindigkeit. Wie weit jeweils auf der x oder y Achse bewegt wird, wird mittels Phytagoras ermittelt, dass ist das Clevere an dieser Geschichte.Auf manchen Browsern laeuft die Sache aber erst, nachdem - wie in der Funktion Start - die Divs zuvor per JS an einen Startpunkt positioniert worden sind. Andernfalls gelingt es dann nicht, per "var aktX = parseInt(dRefS(id).left);" die aktuelle Position zu ermitteln. Weiss jetzt nicht mehr, welche Browser das waren, ich glaube IE5.
Vielleicht nutzt es Dir. Ach ja, vergiss eval - das ist hier mit Kanonen auf Spatzen geballert. Schau Dir "dRef" und "dRefS" an, die liefern Dir die Div-Referenzen fuer nc4x, ie4 und dom-faehige Browser.
Gruesse Joachim
-
Danke Joachim,
Dein Link war super! Es war genau das Richtige für mich - hat mich einfach auf andere Ideen gebracht und ich konnte den Code total vereinfachen!
Besonders die "dRef" und "dRefS"-Funktion ist genial - schlicht und einfach. Ich konnte meinen Code-Schwulst auf wenige Zeilen minimieren. Meinen Fehler habe ich auch gefunden - jetzt geht alles so wie ich es haben wollte. Zwar springt der Mozilla udn NN4 noch ein bisschen herum, aber das hängt vielleicht mit der Verarbeitungsgeschwindigkeit des Browsers zusammen.
Danke, Sebastian
-