JS-Script funktioniert nicht, wenn Doctpye deklariert ist
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aufrufen
browser
code
dank
entdecken
fehler
frage
funktion
http
idee
logik
lokalen bereich
notation
problem
setzen
stelle
tag
text
url
zeile
-
ho ;)
Ich habe eine tag/frage">Frage zu Doctypes.
Um Ehrlich zu sein, verstehe ich nicht sehr viel davon, weiß aber, dass man diese benötigt, um eine Valide Seite zu erstellen.
Für eine Seite verwende ich den Doctype Strict 1.0 .
Nun wollte ich dieser Seite ein JS-Script (einen Lauftext), dass ich vor einiger Zeit geschrieben habe, einsetzen. Dieses sollte dann natürlich auch valide sein.
Der Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Der JavaScript Lauftext:
<html> <head> <title>Lauftext></title> <script type="text/javascript"> text = "<font color=#FFFFFF>Das ist mein Lauftext, den ich gemeinsam mit Ele, dem ich sehr dankbar für seine Hilfe bin, geschrieben habe! +++ Der Link zu meinem Webspace-anbieter: <a href='http://www.lima-city.de'>Lima-City<\/a><\/font>"; function startLauf() { initLauftext('Lauftext'); } function wandern() { var lauftext = document.getElementById("Lauftext"); var newPos = lauftext.offsetLeft - 1; lauftext.style.left = newPos + 'px'; if (newPos + lauftext.offsetWidth < 0) { lauftext.style.left = lauftext.parentNode.offsetWidth + 1; } } function initLauftext(id) { var lauftext = document.getElementById("Lauftext"); lauftext.innerHTML = text; lauftext.style.left = lauftext.parentNode.offsetWidth + 1; interval1 = setInterval("wandern()", 10); // umso höher die ms (in dem Fall 10) der Wiederholung werden, umso langsamer läuft die Schrift! } function LauftextWeiter(id) { var lauftext = document.getElementById("Lauftext"); lauftext.innerHTML = text; interval1 = setInterval("wandern()", 10); } </script> </head> <body onload="startLauf()"> <div style="width:420px; height:25px; position: absolute; overflow: hidden; left: 100px; top: 100px; background-color: #1100FF"> <div id="Lauftext" style="white-space: nowrap; position: absolute; left: 10px; top: 3px;" onMouseOver="clearInterval(interval1)" onMouseOut="LauftextWeiter('Lauftext')"></div> </div> </body> </html>
Also dieser JS Code kann 1:1 kopiert werden, und als HTML Datei gespeichert werden.
Wenn man es ohne Doctype macht, dann funktioniert alles prima: Der Text läuft über die Fläche, und es wiederholt sich immer und immer wieder.
Wenn ich den Doctype aber oben in die erste Zeile schreibe, funktioniert es nicht mehr 100%ig: Der Lauftext läuft zwar noch, allerdings nur einmal, ohne Wiederholung.
Was muss ich beachten?
Warum funktioniert es ohne Doctype, mit aber nicht?
Was muss ich ändern, damit es funktioniert?
thx im voraus
Sincer -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das <font>-Element ist in strict nicht erlaubt.
-
Javascript Variablen im globalen Scope sollten mit "var" vorangestellt werden.
Der Javascript Code sollte innerhalb des Script Tags mit CDATA gekennzeichnet sein.
<script type="text/javascript"> // <![CDATA[ // Hier das Javascript reinschreiben // ]]> </script> -
afaik müssen in XHTML alle Attribute komplett klein geschrieben sein.
Im Body hast du das gemacht ("onload" ), aber in dem Lauftextfeld nicht mehr ("onMouseOver", "onMouseOut ").
Also, es kann sein, dass der Browser deshalb die Attribute ignoriert (obwohl er eigentlich die Seite gar nicht erst anzeigen sollte).
Am besten bei solchen Problemen immer zuerst den Validator zurate fragen, der sollte eigentlich alle solchen Fehler finden und noch viele mehr ;)
http://www.validome.org/
http://validator.w3.org/
Beitrag geändert: 8.1.2009 13:06:37 von merovius -
ho ;)
Danke für eure Antworten :)
Leider konnte ich das Problem aber noch nicht lösen :(
Hier der aktuelle Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Lauftext</title> <script type="text/javascript"> /* <![CDATA[ */ var text = "Das ist mein Lauftext, den ich gemeinsam mit Ele, dem ich sehr dankbar für seine Hilfe bin, geschrieben habe! +++ Der Link zu meinem Webspace-anbieter: <a href='http://www.lima-city.de'>Lima-City<\/a>"; function startLauf() { initLauftext('Lauftext'); } function wandern() { var lauftext = document.getElementById("Lauftext"); var newPos = lauftext.offsetLeft - 1; lauftext.style.left = newPos + 'px'; if (newPos + lauftext.offsetWidth < 0) { lauftext.style.left = lauftext.parentNode.offsetWidth + 1; } } function initLauftext(id) { var lauftext = document.getElementById("Lauftext"); lauftext.innerHTML = text; lauftext.style.left = lauftext.parentNode.offsetWidth + 1; interval1 = setInterval("wandern()", 10); // umso höher die ms (in dem Fall 10) der Wiederholung werden, umso langsamer läuft die Schrift! } function LauftextWeiter(id) { var lauftext = document.getElementById("Lauftext"); lauftext.innerHTML = text; interval1 = setInterval("wandern()", 10); } /* ]]> */ </script> </head> <body onload="startLauf()"> <div style="width:420px; height:25px; position: absolute; overflow: hidden; left: 100px; top: 100px; background-color: #1100FF"> <div id="Lauftext" style="white-space: nowrap; position: absolute; left: 10px; top: 3px;" onmouseover="clearInterval(interval1)" onmouseout="LauftextWeiter('Lauftext')"></div> </div> </body> </html>
@merovius:
Wenn ich einen Online Validator benützen will, dann bekomme ich bloß die Fehlmeldung, dass die Zeichenkodierung nicht gesetzt wurde.
Nun habe ich natürlich versucht, diesen Einzubauen.
a) Über einen Meta Tag, wie ihn Lima-City verwendet...
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
und b) über .htaccess, wie es in einem Lima-Thread erklärt wurde...
AddDefaultCharset UTF-8
Beides brachte eig. nur mehr Schwierigkeiten, als es welche nahm :D
Den einzigen Umlaut, ein ü in "für" habe ich deshalb einfach mit dem passenden HTML Code ü ersetzt.
In diesem Sinne lasse ich beide Varianten der Zeichenkodierungsmöglichkeit weg. Der Validator wollte es so und so nicht :/
Zu dem onMouseOver (Ich habe es damals so gelernt - der Übersicht halber)... wusste nicht, dass man das eig. nicht soll :D
@evil-devil:
Ich habe gelernt, dass es nicht nötig ist, im globalen Bereich ein "var" vorzusetzen.
Im globalen ändert sich dadurch meines Wissens nichts.
Den unterschied merkt man allerdings im lokalen Bereich! (Mit einem vorgesetztem "var" werden Variablen global definiert. Ohne einem "var" werden sie bloß lokal definiert, und können somit nur in der dieser Funktion genützt werden - es sei denn, man übergibt sie :P )
Soweit mein Wissensstand.
... Aber da es meiner Meinung nach sowieso nichts ändert, will ich nichts unversucht lassen, und habe es mal eingebaut :D
Das CDATA Element habe ich hinzugefügt.
@bladehunter:
Danke, das wusste ich nicht :)
Hat aber leider auch nichts geändert.
Habt ihr noch Ideen?
Bzw. stelle ich mir die Frage, ob es nicht intelligenter und einfacher wäre, einfach den Marquee-Tag zu benützen. (Funktioniert der eig. in allen "gängigen" Browsern wie FF2, FF3, IE6, IE7, Opera, (eventuell Navigator)?)
lg && thx
Sincer
PS: Habe das ganze zum Ansehen (bzw. validieren XD) hochgeladen:
//EDIT: Den URL Tag vergessen :P
Link: http://sincer.lima-city.de/lauftext/
Beitrag geändert: 8.1.2009 17:04:38 von sincer -
@evil-devil:
Ich habe gelernt, dass es nicht nötig ist, im globalen Bereich ein "var" vorzusetzen.
Im globalen ändert sich dadurch meines Wissens nichts.
Den unterschied merkt man allerdings im lokalen Bereich! (Mit einem vorgesetztem "var" werden Variablen global definiert. Ohne einem "var" werden sie bloß lokal definiert, und können somit nur in der dieser Funktion genützt werden - es sei denn, man übergibt sie )
Soweit mein Wissensstand.
Richtig
Habt ihr noch Ideen?
Bzw. stelle ich mir die Frage, ob es nicht intelligenter und einfacher wäre, einfach den Marquee-Tag zu benützen. (Funktioniert der eig. in allen "gängigen" Browsern wie FF2, FF3, IE6, IE7, Opera, (eventuell Navigator)?)
Für solche Fragen solltest du immer SELFHTML fragen.
de.selfhtml.org/html/text/proprietaer.htm#marquee
<marquee> ist auch nicht in XHTML Strict erlaubt (wie man auch auf SELFHTML sehen kann). -
bladehunter schrieb:
Für solche Fragen solltest du immer SELFHTML fragen.
de.selfhtml.org/html/text/proprietaer.htm#marquee
<marquee> ist auch nicht in XHTML Strict erlaubt (wie man auch auf SELFHTML sehen kann).
Danke, das hatte ich mir bereits teilweise durchgelesen, dann aber wieder verworfen, und eben heute durch dich aufgefrischt :D
Habe das auch ausprobiert, und um ehrlich zu sein, würde mir das als alternative nicht gefallen.
Abgesehen davon, dass es nicht in XHTML Strict erlaubt ist, gefällt mir das ruckeln nicht.
(Ich meine, mein Lauftext scheint hin und wieder zu laggen *g*, aber der text fließt wenigstens, im Gegensatz zu dem Gezappel, dass von marquee erzeugt wird... somit erübrigt sich diese Idee für mich, und ich bin auf weitere Ratschläge von euch hingewiesen.
Das kann doch nicht sein, dass mein Code nur mehr Teilweise funktioniert, wenn ich ihn valide haben will.
Gibt es eine (kostenfreie) Möglichkeit mit Hilfe eines Scripts / Programmes herauszufinden, woran der Fehler liegt? Ich weiß zwar, dass es Debugger gibt, aber ich habe selbst überhaupt keine Erfahrung damit, und weiß nicht, wie das geht.
Aber der Fehler liegt rein von der Logik her beim aufrufen des Wiederholvorganges...
Aber an dem kann ich keinen Fehler entdecken:
if (newPos + lauftext.offsetWidth < 0) { lauftext.style.left = lauftext.parentNode.offsetWidth + 1; }
Wenn der Text ganz links ist, wird er wieder nach rechts gesetzt.
interval1 = setInterval("wandern()", 10);
Das Intervall sorgt dafür, dass der Text immer in Bewegung bleibt.
Also von der Logik her ist meiner Meinung nach kein Fehler drinnen.
Kann es sein, dass der Doctype manche Befehle von JS beeinflusst?
Oder dass dadurch if's nicht mehr gehen? XD
KA :/
Hat noch jemand einen Vorschlag?
lg
Sincer -
sincer schrieb:
Aber der Fehler liegt rein von der Logik her beim aufrufen des Wiederholvorganges...
Aber an dem kann ich keinen Fehler entdecken:
if (newPos + lauftext.offsetWidth < 0) { lauftext.style.left = lauftext.parentNode.offsetWidth + 1; }
Wenn der Text ganz links ist, wird er wieder nach rechts gesetzt.
interval1 = setInterval("wandern()", 10);
Ich kann aber einen Fehler entdecken... Ein paar Zeilen höher hast du noch + 'px' geschrieben, in der Zeile tust du das aber nun nicht mehr...
if (newPos + lauftext.offsetWidth < 0) { lauftext.style.left = lauftext.parentNode.offsetWidth + 1 + 'px'; }
Gruß
Karlja
Edit:
Mit der Änderung läuft der Text bei mir nun in IE6.0.2900.5512, Safari für Win 3.1.2 und FF 3.0.5 ohne Probleme.
Beitrag geändert: 8.1.2009 20:53:56 von karlja -
Boa, super geil, danke :D
Ich habe mir diese Zeilen jetzt hundert mal durchgelesen, und verglichen, und bin theoretisch durchgegangen, was in jeder Zeile passiert... nur darauf, dass der Wert, um den es sich verschieben soll, also die Pixel, fehlt, darauf bin ich nicht gekommen.
Vielen Dank
Sincer -
@var und global space: Ja, so ist es eigentlich gedacht. Aber wenn man für möglichst viele Browser kompatibel sein will empfehle ich es trotzdem zu setzen.
Ich hab in den letzten Jahren die Erfahrung gemacht das es durchaus vorkommen kann, das eine Variable die ohne Var definiert ist plötzlich nicht gefunden wird oder sich von einer Variable mit selben Namen im lokalen Space überschreiben ließ.
Naja, im Idealfall direkt mit der JSO Notation arbeiten :)
Beitrag geändert: 9.1.2009 8:47:08 von evil-devil -
ho ;)
Aber wenn man für möglichst viele Browser kompatibel sein will empfehle ich es trotzdem zu setzen.
Danke für den Tipp. (Ich habe es sowieso nun mit var übernommen. Ich finde das vom Stil her einfach schöner, aber das ist sicher auch Ansichtssache :D )
Naja, im Idealfall direkt mit der JSO Notation arbeiten :)
Sry, kA, was das ist. Google hilft mir jetzt aufs erste auch nicht weiter.
Erklärst du mir kurz, was eine JSO Notation ist?
lg
Sincer
PS: Ich verweise mal gleich auf mein aktuelles Problem mit dem Lauftext XD
Link: http://www.lima-city.de/thread/problem-mit-lauftext -
JSON:
var meinObjekt = { eigenschaft1: 'irgend ein Text', eigenschaft2: 42, sagWas: function() { alert(this.eigenschaft1); }, sagUnsDieAntwort: function() { alert(this.eigenschaft2); } } meinObjekt.sagUnsDieAntwort(); meinObject.sagWas();
Das unter anderem ;) Begegnet dir in Prototype, Scriptacolous und vielen anderen Javascript Web2.0 Libs. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
