setInterval, setTimeout / XHTML probleme

Ann Drew

Ann Drew

Mitglied
hallo, ich hatte das schon mal woanders gefragt, aber es ist bestimmt irgendwie untergegangen.

bei mir faengts damit an, dass mein scroller bei
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
gar nicht funktioniert.
mein scroller startet wird aber nach einer sekunde oder so angehalten.
es scheint dass setInterval und setTimeout nicht mit XHTML kompatibel sind.

wenn ich den DOCTYPE auf HTML 4.01 setze laeuft alles ohne probleme.

Die meisten foren kommen heutzutage mit XHTML doctype, und scroller scheinen da nicht einfach so zu funktionieren.

das script ist sehr kurz:
<script language=javascript>
function test()
{
aa = document.body.scrollTop + 15;
bb -= aa;
bb *= 0.9;
bb += aa;

name1.style.top = bb;
}
setInterval("test()",20);
</script>
Zum Vergrößern anklicken....
name1 ist hier der name eines <DIV> tags der ein bild enthaelt.

wie gesagt, funktioniert grundsaetzlich, haelt ein bild beim scrollen immer 15px vom oberen rand weg, aber sobald der DOCTYPE auf XHTML steht geht nichts mehr.

Was kann man tun damit der scroller mit XHTML auch laeuft?
 
XHTML braucht bei style-Angaben immer die Einheit. Mit
name1.style.top = bb + 'px';
​
sollte es gehen.
 
interessante antwort, vielen dank fuer den tip.
Ich werde es sofort ausprobieren.

Interessant ist auch, dass das javascript programm anlaeuft. Fuer ne sekunde oder so scrollt das <DIV> ja, dan stoppt es und laeuft nicht weiter.
 
Ach ja, XHTML kennt auch das language-Attribut nicht. Es ist besser immer <script type="text/javascript"> undabhängig von der DTD zu benutzten, das geht nämlich bei allen in so gut wie allen Browsern.

Auch das name-Attribut ist unerwünscht. Du solltest also ein div mit id und dann document.getElementById('id') verwenden.

Ganz nebenbei funktioniert dein Script so wie es ist bei mir wieder im IE noch in Opera noch in Mozilla...
 
Zuletzt bearbeitet:
hallo, hier ist das script wie ich es genau im forum eingebaut habe:
<script language='JavaScript' type='text/javascript'>
ff = 'test()'
bb = 0;
function test()
{
aa = document.body.scrollTop + 26;
bb -= aa;
bb *= 0.8;
bb += aa;
name1.style.top = bb + "px";
}
setInterval(ff,20);
</script>
Zum Vergrößern anklicken....
mit XHTML funktioniert immer noch nicht. :(

das script funktioniert bei mir auf IE und Firefox, ich habs nicht auf NN ausprobiert.

Klick unten auf My Forum, dann siehst du die Login und register buttons in der oberen rechten ecke beim scrollen runterlaufen.

hab das ganz vergessen: hier wie ich das DIV aufgebaut habe:
<DIV style="position: absolute; right: 15px; top: 0px; width: 548px; height: 66px; z-index: 20" id="name1" name="name1">
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
Übrigens hört es gar nicht auf zu scrollen du hast nur einen Fehler in deiner Funktion. Die Variable bb nähert sich nämlich asymptotisch dem Wert 26 an. Auch würde ich dir empfehlen bb mit math.round() vorher zu runden, bevor du style.top den Wert von bb zuweist.
 
vielen dank fuer den tip mit math.round() das werd ich noch einbauen.

ich weiss dass es nicht aufhoert zu scrollen. Es soll sich asymptotisch dem wert 26 annaehern. Man nennt das 'easing'. Das bild lauft schnell richtung endziel und bremst dann ab.
Ich hab frueher mal was gescripted was feststellt of der benutzer rauf und runter scrollt, im Moment wo gescrollt wurde ist jas javascript dann auch angelaufen. Das hat aber dann nur im IE funktioniert.
Der scroller funktioniert im IE und im Firefox, NN konnte ich nicht testen, hab ich nicht.
 
so, das mit dem math.round hab ich eingebaut.
ich hab allerdings
bb = Math.round(bb*10)/10;
genommen statt
bb = Math.round(bb);
weil sonst die grafik wenn man von unten kommt ein pixel zu niedrig positioniert wird.
 
hier mein neues script was jetzt endlich mit XHTML funktioniert .
<script type='text/javascript'>
var menu = document.getElementById('name1'); var bb = 0;
function movemenu() {
if (window.innerHeight) {
pos = window.pageYOffset
}
else if (document.documentElement && document.documentElement.scrollTop) {
pos = document.documentElement.scrollTop
}
else if (document.body) {
pos = document.body.scrollTop
}
bb -= pos;
bb *= 0.7;
bb += pos;
bb = Math.round(bb*10)/10;
menu.style.top = bb+25+"px";
setTimeout('movemenu()',40);
}
movemenu();
</script>
Zum Vergrößern anklicken....
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück