Emulation von :target im IE über Javascript
Werner
- javascript
Hallo,
hat jemand Erfahrung mit der Emulation von :target für den IE?
Bei mir funktioniert es (im IE-Tester) in den Versionen 5,6,7 aber nicht mehr in den Versionen 8 und 9.
Hier das
Original-Beispiel
Schönen Gruß
Werner
Hi,
hat jemand Erfahrung mit der Emulation von :target für den IE?
Bei mir funktioniert es (im IE-Tester) in den Versionen 5,6,7 aber nicht mehr in den Versionen 8 und 9.
Laut Developer Tools im IE 8 bekommt das DIV-Element zwar die (zusätzliche) Klasse sftarget verpasst - aber die damit verbundenen CSS-Styles werden nicht angewendet.
Das CSS-Tab der Developer Tools zeigt die Regel mit dem Selektor
.comment:target, .sftarget
auch gar nicht an - deshalb vermute ich, dass sich der IE hier beim Parsen des Stylesheets an der ihm unbekannten Pseudoklasse :target „verschluckt“, und die komplette Regel ignoriert.
Ich würde versuchen, dass mal in zwei einzelne Regeln aufzuteilen - also aus
.comment:target, .sftarget { ... }
folgendes zu machen,
.comment:target { ... }
.sftarget { ... }
MfG ChrisB
Om nah hoo pez nyeetz, ChrisB!
Das CSS-Tab der Developer Tools zeigt die Regel mit dem Selektor
.comment:target, .sftarget
auch gar nicht an - deshalb vermute ich, dass sich der IE hier beim Parsen des Stylesheets an der ihm unbekannten Pseudoklasse :target „verschluckt“, und die komplette Regel ignoriert.
dies kann ich bestätigen für
foo::before, foo:before {...}
also aufteilen.
Matthias
@ChrisB and Matthias!
Super, es funktioniert!
Das ist dann wohl ein Fehler im IE8?
Schönen Gruß
Werner
Hi,
Das ist dann wohl ein Fehler im IE8?
OK, verstanden.
Was mich allerdings verwundert ist die Tatsache, dass die IE < IE8 es richtig interpretieren. Man könnte also sagen, IE8 ist strenger, allerdings damit nicht aufwärtskompatibel.
Gruß
Werner
Om nah hoo pez nyeetz, Werner!
Was mich allerdings verwundert ist die Tatsache, dass die IE < IE8 es richtig interpretieren. Man könnte also sagen, IE8 ist strenger,
IE < 8 machen es halt falsch und IE > 7 richtig.
allerdings damit nicht aufwärtskompatibel.
Wie meinen?
IE Matthias
Aber jetzt noch eine Frage an die - wie ich feststellen durfte - Spezialisten.
Nachfolgendes Script läuft erst einmal einwandfrei.
sfTarget = function() {
var sfEls=document.getElementsByTagName("H2");
var aEls = document.getElementsByTagName("A");
document.lastTarget = null;
for (var i=0; i<sfEls.length; i++) {
if (sfEls[i].id) {
if (location.hash==("#" + sfEls[i].id)) {
sfEls[i].className+=" " + cls;
document.lastTarget=sfEls[i];
}
for (var j=0; j<aEls.length; j++) {
if (aEls[j].hash==("#" + sfEls[i].id)) aEls[j].targetEl = sfEls[i]; aEls[j].onclick = function() {
if (document.lastTarget) document.lastTarget.className = document.lastTarget.className.replace(new RegExp(" sftarget\\b"), "");
if (this.targetEl) this.targetEl.className+=" sftarget"; document.lastTarget=this.targetEl;
return true;
}
}
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfTarget);
Wenn ich aber die REFRESH-Taste klicke, kommt die Fehlermeldung
"cls ist undefiniert".
Ich selbst habe keine Ahnung von Javascript und möchte das Script daher möglichst unverändert verwenden (black box)
Natürlich erwarte ich nicht, dass Ihr das Script testet, aber vielleicht erkennt Ihr auf Anhieb die Ursache.
Gruß
Werner
Om nah hoo pez nyeetz, Werner!
sfEls[i].className+=" " + cls;
In dieser Zeile soll an alle class-Attribute der h2-Elemente der Wert der Variable "cls" angehängt werden. In dem Scriptausschnitt, den du lieferst, kommt die Zeichenfolge "cls" genau einmal vor, und zwar an dieser Stelle. Wenn es nicht vorher irgendeine Festlegung á la "cls = ..." gibt, ist "cls" tatsächlich undefiniert.
Ich vermute, dass die Klassenbezeichnung "cls" heißen soll, also würde ich einfach
sfEls[i].className+=" cls"; schreiben.
Dies ist natürlich hinfällig, falls es sich bei "cls" um eine Variable handelt, was aus dem Script allerdings nicht hervorgeht.
Matthias
Hallo Matthias,
sfEls[i].className+=" cls"; schreiben.
Dies ist natürlich hinfällig, falls es sich bei "cls" um eine Variable handelt, was aus dem Script allerdings nicht hervorgeht.
Das gezeigte Script und dessen Aufruf sind komplett.
Habe es wie oben vorgeschlagen versucht und der Effekt ist weg.
Ob es andere Auswirkungen hat, konnte ich noch nicht feststellen.
Leider ist der Autor nicht mehr zu erreichen.
Dank für Deine Hilfe
Werner
Hi,
Was mich allerdings verwundert ist die Tatsache, dass die IE < IE8 es richtig interpretieren.
eigentlich nicht: Richtig wäre es, die Regel zu ignorieren, weil ein Teil des Selektors unbekannt ist. IE6 und 7 "übersetzen" unbekannte Pseudoklassen in ":unknown", welches diesen Browsern - hört, hört! - bekannt ist :-)
Man könnte also sagen, IE8 ist strenger, allerdings damit nicht aufwärtskompatibel.
Könnte man. Man _sollte_ jedoch sagen, der IE8 ist (in dieser Hinsicht) standardkonform und _deshalb_ aufwärtskompatibel.
Cheatah
Hi,
Das CSS-Tab der Developer Tools zeigt die Regel mit dem Selektor
.comment:target, .sftarget
auch gar nicht an - deshalb vermute ich, dass sich der IE hier beim Parsen des Stylesheets an der ihm unbekannten Pseudoklasse :target „verschluckt“, und die komplette Regel ignoriert.
Dieses Verhalten ist auch absolut korrekt.
"Malformed Statements", wozu im IE8 mangels Unterstützung :target zählt, sollen komplett ignoriert werden.
FYI.
~dave
Hi,
Das CSS-Tab der Developer Tools zeigt die Regel mit dem Selektor
.comment:target, .sftarget
auch gar nicht an - deshalb vermute ich, dass sich der IE hier beim Parsen des Stylesheets an der ihm unbekannten Pseudoklasse :target „verschluckt“, und die komplette Regel ignoriert.Dieses Verhalten ist auch absolut korrekt.
"Malformed Statements", wozu im IE8 mangels Unterstützung :target zählt, sollen komplett ignoriert werden.
Als “malformed statement” würde ich das aber nicht unbedingt sehen, denn die Beispiele dort enthalten teils grobe Syntaxfehler.
Besser passt m.E. 4.1.7 Rule sets, declaration blocks, and selectors:
CSS 2.1 gives a special meaning to the comma (,) in selectors. However, since it is not known if the comma may acquire other meanings in future updates of CSS, the whole statement should be ignored if there is an error anywhere in the selector, even though the rest of the selector may look reasonable in CSS 2.1.
For example, since the "&" is not a valid token in a CSS 2.1 selector, a CSS 2.1 user agent must ignore the whole second line, and not set the color of H3 to red:
h1, h2 {color: green }
h3, h4 & h5 {color: red }
h6 {color: black }
MfG ChrisB
Hallo,
da habe ich mich auf etwas eingelassen!
Da werben die Provider damit, wie einfach es ist, eine eigene Homepage zu erstellen.
Aber wehe, man möchte etwas kreativ sein.
Ich möchte jetzt folgendes realisieren:
Wenn die Seite im IE aufgerufen wird, dann einen Javascript-Code einfügen - aber nur, wenn Javascript aktiviert ist, sonst einen Text einfügen.
Den ersten Teil kriege ich noch hin (<!--[if IE> ......) aber dann hakt es.
Ich hoffe dieser Beitrag wird noch gelesen und man kann mir einen Tipp geben.
Schönen Gruß
Werner
Om nah hoo pez nyeetz, Werner!
nur wenn javascript an ist, tu etwas ...
Verwende im CSS die Selektoren
.js-aus #meineId {display: block;} oder passend bzw. #meineId {display: block;} .js-an #meineId {display: none;}
Matthias
@@Werner:
nuqneH
Den ersten Teil kriege ich noch hin (<!--[if IE> ......) aber dann hakt es.
Der Haken an der Sache ist, dass du das http://de.selfhtml.org/html/transit/scripts.htm#noscript@title='noscript'-Element nicht kennst?
Qapla'