Dynamisch Navigationsleisten auch im IE einblenden
Christian Sto
- javascript
Hallo,
ich habe eine Frage zu dem SelfHTML-Script auf der Seite:
http://de.selfhtml.org/css/layouts/navigationsleisten.htm
Unter dem Thema: "Dynamisch Navigationsleisten auch im IE einblenden"
Das Anzeigebeispiel ist folgendes:
http://de.selfhtml.org/css/layouts/anzeige/nav_javascript.htm
Und zwar funktioniert das Script ja mit den Listen, also <ul>.
Ich würde jedoch gerne Tabellen statt der Listen einsetzen und habe das auch erfolgreich umgeschrieben. Allerdings spielt da der IE nicht mit. Also wollte ich die JavaScript-Funktion von SelfHTML auf Tabellen umschreiben, damitauch der IE meine Navigation richtig anzeigt.
Aber leider will das nicht so recht funktionieren. Ich muss dazu sagen, dass ich noch nicht so viel Erfahrungen mit JavaScript gemacht habe.
Aber ich wollte Euch das Script (so wie ich es umgeschrieben habe) trotzdem zeigen, damit ihr eventuell den bzw. die Fehler finden könnt.
Das Script sieht folgender Maßen aus:
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var TH = document.getElementById("Navigation").firstChild;
do {
if (sucheTable(TH.firstChild)) {
TH.onmouseover=einblenden;
TH.onmouseout=ausblenden;
}
TH = TH.nextSibling;
}
while(TH);
}
function sucheTable(TABLE) {
do {
if(TABLE) TABLE = TABLE.nextSibling;
if(TABLE && TABLE.nodeName == "TABLE") return TABLE;
}
while(TABLE);
return false;
}
function einblenden() {
var table = sucheTable(this.firstChild);
table.style.display = "block"; table.style.backgroundColor = "silver";
}
function ausblenden() {
suchetable(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
</script>
Der HTML-Body Bereich sieht so aus:
<body>
<table id="Navigation">
<th><a href="#Beispiel">Seite 1</a></th>
<th><a href="#Beispiel">Seite 2</a>
<table>
<th><a href="#Beispiel">Seite 2a</a></th>
<th><a href="#Beispiel">Seite 2b</a></th>
</table>
</th>
<th><a href="#Beispiel">Seite 3</a></th>
<th><a id="aktuell" href="#Beispiel">Seite 4</a>
<table>
<th><a href="#Beispiel">Seite 4a</a></th>
<th><span>aktuelle Seite</span></th>
<th><a href="#Beispiel">Seite 4c</a></th>
</table>
</th>
<th><a href="#Beispiel">Seite 5</a></th>
</table>
<body>
Für Hilfe wäre ich sehr dankbar ;-)
Hello out there!
Ich würde jedoch gerne Tabellen statt der Listen einsetzen
Den Wunsch solltest du unbedingt nochmal überdenken.
var TH = document.getElementById("Navigation").firstChild;
See ya up the road,
Gunnar
Den Wunsch solltest du unbedingt nochmal überdenken.
Warum denn? Ich komme mit Tabellen irgendwie besser klar... abgesehen jetzt von diesem Problem mit dem IE. Aber bei Firefox funktioniert alles wunderbar und es sieht auch schön aus.
Oder was meinst Du?
»» var TH = document.getElementById("Navigation").firstChild;
Ähm... so ganz versteh ich das jetzt nicht. Ich gebrauche doch nicht createElement(), sondern firstChild...
Was es mit tbody aufsich hat weiß ich jetzt auch noch nicht, aber ich werd mich mal unter selfHTML schlau machen
Hello out there!
Den Wunsch solltest du unbedingt nochmal überdenken.
Warum denn?
Weil Tabellen nicht zur Layoutgestalung missbraucht werden sollten. Nicht zuletzt auch wegen der Barrierefreiheit.
»» var TH = document.getElementById("Navigation").firstChild;
Oh Nostradamus ...
Ähm... so ganz versteh ich das jetzt nicht. Ich gebrauche doch nicht createElement(), sondern firstChild...
Das Problem ist aber dasselbe. Das dem 'th'-Element entsprechende Objekt ist eben nicht erstes Kind des dem 'table'-Element entsprechenden Objekts.
Was es mit tbody aufsich hat weiß ich jetzt auch noch nicht, aber ich werd mich mal unter selfHTML schlau machen
Besser vielleicht in MudGuards Ausführungen in dem Thread, die in seiner Prophezeiung mündeten.
See ya up the road,
Gunnar