JS Navigation -> Steuerung über URL

[Damian]

Hallo,

ich möchte für eine Intranet-Lösung eine JS-Navigation realisieren (im Intranet läuft auf allen Rechnern JS, ist also kein Problem).
Diese Navigation enthält eine Art Baumstruktur, die anfangs komplett geschlossen ist. Nun würde ich gerne beim Click auf einen Link bei der neuen Seite bereits den entsprechenden Teil der Navigation erweitert anzeigen.
Ist dies über eine entsprechende Angabe im Link möglich (wie z.B. bei "Projekt A -> Aktuelles")?!?

Wenn ja, wie kann ich das dann umsetzen?
Wenn nein: was gibt es sonst für Möglichkeiten?

Hier mal das entsprechende Script:

document.write('<div id="navi"><br><a href="index.htm"><b>Start</b></a><br>');
document.write('<a href=# onclick=outline('projectA') return false><b>Projekt A</b></a>');
document.write('<br><div class="navi" id=projectA style=display:none>');
document.write('<a href="A_aktuelles.htm?section=ProjectA">Aktuelles</a>');
document.write('<a href="A_Informationen.htm">Informationen</a>');
document.write('<a href="A_Software.htm">Software/Downloads</a>');
document.write('<a href="A_AddOn.htm">AddOn</a>');
document.write('<a href="A_Kontakt.htm">Kontakt</a><br>');
document.write('</div>');

Vielen Dank im Voraus!
Damian

[Felix Riesterer]

Lieber Damian,

document.write('<div id="navi"><br><a href="index.htm"><b>Start</b></a><br>');
document.write('<a href=# onclick=outline('projectA') return false><b>Projekt A</b></a>');
document.write('<br><div class="navi" id=projectA style=display:none>');
document.write('<a href="A_aktuelles.htm?section=ProjectA">Aktuelles</a>');
document.write('<a href="A_Informationen.htm">Informationen</a>');
document.write('<a href="A_Software.htm">Software/Downloads</a>');
document.write('<a href="A_AddOn.htm">AddOn</a>');
document.write('<a href="A_Kontakt.htm">Kontakt</a><br>');
document.write('</div>');

warum so umständlich?

Mein Vorschlag: Gestalte Deine Navigation als verschachtelte Liste und schließe beim Aufruf diese Liste. Einen Eindruck, wie ich das meine, kannst Du an diesem Beispiel beobachten.

Um dann den gewählten Pfad zu öffnen, kannst Du anhand der URL (window.location) die Liste durchsuchen (var alleLinks = getElementsByTagName("a") in Verbindung mit if (alleLinks[i].href && alleLinks[i].href == aktuelleURL)) um die jeweiligen <ul>s den DOM-Baum nach oben verfolgend wieder "aufzuklappen". Ansätze zu dieser Lösung findest Du im Javascript der verlinkten Seite.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

Einen "Eindruck" kann man nicht "beobachten"... aber man kann ihn bekommen/erhalten/gewinnen/machen/erzielen/schinden usw.

Mein Satz hätte z.B. lauten müssen: Einen Eindruck, wie ich das meine, kannst Du an diesem Beispiel _gewinnen_.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Damian]

Danke Felix!

warum so umständlich?

Weil die Navigation zentral abgelegt und möglichst einfach zu pflegen sein soll.

Mein Vorschlag: Gestalte Deine Navigation als verschachtelte Liste und schließe beim Aufruf diese Liste. Einen Eindruck, wie ich das meine, kannst Du an diesem Beispiel beobachten.

Dein Script ist ja schon um einiges länger; da ich darin auch noch die Navigation mit unterbringen müsste (zwecks zentraler Ablage), hätte sich das mit der einfachen Pflege dann ja erledigt.

Meine Idee war eigentlich, ähnlich wie in php mit "$_GET[section]" den Inhalt des Section-Teils der URL auszulesen und dann mit einer if-Abfrage entweder "style=display:none" stehen zu lassen oder eben nicht.
Ist so etwas mit JS möglich? Wenn ja, bitte mit möglichst genauer Erklärung, steige da gerade erst ein... ;-)

Viele Grüße
Damian

[wahsaga]

hi,

Meine Idee war eigentlich, ähnlich wie in php mit "$_GET[section]" den Inhalt des Section-Teils der URL auszulesen

Ein URL hat keinen "Section-Teil".

Du meinst den Query String. Diesen findest du in location.search, inklusive führendem Fragezeichen.
Wenn du ihn in seine Bestandteile zerlegen willst, musst du das selber Programieren - sowas "wie $_GET" gibt es in Javascript nicht.

Ist so etwas mit JS möglich? Wenn ja, bitte mit möglichst genauer Erklärung, steige da gerade erst ein... ;-)

Stichwort hast du bekommen, zum Zerlegen schaust du bei den String-Funktionen o.ä. - viel Spaß beim "einsteigen".

gruß,
wahsaga

[Damian]

Ein URL hat keinen "Section-Teil".

Wie auch immer das in der Fachsprache heißt... ;-)

Stichwort hast du bekommen, zum Zerlegen schaust du bei den String-Funktionen o.ä. - viel Spaß beim "einsteigen".

Alles klar, werde ich versuchen! Und mich bei Bedarf wieder an euch wenden... *g*

Danke und Grüße
Damian

[Damian]

So, habe mir jetzt mal folgendes zusammengebastelt:

<!--
if (window.location.search != "") {
var link = window.location.search;
var position = link.indexOf("=");
var section = link.substr(position++);
}

//edit the links as you would with regular html but remeber the '/" changes and follow the examples as a guide
document.write('<div id="navi"><br><a href="index.htm"><b>Start</b></a><br>');
document.write('<a href=# onclick=outline('messtechnik') return false><b>Mess- &amp; Applikationstechnik</b></a>');

if (section != "" && section = "messtechnik") {
document.write('<br><div class="navi" id=messtechnik');
} else {
document.write('<br><div class="navi" id=messtechnik style=display:none>');
}
document.write('<a href="messtechnik_aktuelles.htm?section=messtechnik">Aktuelles</a>');
document.write('<a href="messtechnik_Informationen.htm?section=messtechnik">Informationen</a>');
document.write('<a href="messtechnik_Software.htm?section=messtechnik">Software/Downloads</a>');
document.write('<a href="messtechnik_AddOn.htm?section=messtechnik">AddOn</a>');
document.write('<a href="messtechnik_Kontakt.htm?section=messtechnik">Kontakt</a><br>');
document.write('</div>');
document.write('<a href=# onclick=outline('projectB') return false><b>Projekt B</b></a>');
if (section != "" && section = "projectB") {
document.write('<br><div class="navi" id=projectB');
} else {
document.write('<br><div class="navi" id=projectB style=display:none>');
}
document.write('<a href="B_aktuelles.htm">Aktuelles</a>');
document.write('<a href="B_Informationen.htm">Informationen</a>');
document.write('<a href="B_Software.htm">Software/Downloads</a>');
document.write('<a href="B_AddOn.htm">AddOn</a>');
document.write('<a href="B_Kontakt.htm">Kontakt</a><br>');
document.write('</div>');
document.write('<a href=# onclick=outline('projectC') return false><b>Projekt C</b></a>');
if (section != "" && section = "projectC") {
document.write('<br><div class="navi" id=projectC');
} else {
document.write('<br><div class="navi" id=projectC style=display:none>');
}
document.write('<a href="C_aktuelles.htm">Aktuelles</a>');
document.write('<a href="C_Informationen.htm">Informationen</a>');
document.write('<a href="C_Software.htm">Software/Downloads</a>');
document.write('<a href="C_AddOn.htm">AddOn</a>');
document.write('<a href="C_Kontakt.htm">Kontakt</a><br>');
document.write('</div></div>');
//-->

Irgendwo scheint da noch ein Fehler drin zu stecken, aber wo?!?
Vertraue auf eure Hilfe... ;-)

Danke und Grüße
Damian

[wahsaga]

hi,

Irgendwo scheint da noch ein Fehler drin zu stecken, aber wo?!?
Vertraue auf eure Hilfe... ;-)

Und wir darauf, dass du eine aussagekräftige Problembeschreibung lieferst.
"Irgendwo scheint ein Fehler drin zu stecken" ist keine solche.

gruß,
wahsaga

[Damian]

Hallo,

Und wir darauf, dass du eine aussagekräftige Problembeschreibung lieferst.

Nun, die Navigation wird nun nicht mehr angezeigt!
Ich habe ganz am Anfang folgenden Teil hinzugefügt:

if (window.location.search != "") {
var link = window.location.search;
var position = link.indexOf("=");
var section = link.substr(position++);
}

Und jeden "Navigations-Block" (also bei jedem Hauptmenüpunkt) habe ich um diesen if-Teil erweitert:

document.write('<a href=# onclick=outline('messtechnik') return false><b>Mess- &amp; Applikationstechnik</b></a>');

if (section != "" && section = "messtechnik") {
document.write('<br><div class="navi" id=messtechnik');
} else {
document.write('<br><div class="navi" id=messtechnik style=display:none>');
}

Mehr Details kenne ich (noch) nicht...

Damian

[wahsaga]

hi,

Nun, die Navigation wird nun nicht mehr angezeigt!

Dann ermittle zunächst, ob das an einem Fehler im Code, oder in der Logik liegt ("Debugging").

Ich habe ganz am Anfang folgenden Teil hinzugefügt:

if (window.location.search != "") {
var link = window.location.search;
var position = link.indexOf("=");
var section = link.substr(position++);

Kontrollausgabe? Enthalten die Variablen jetzt das, was du erwartet hast?

Und jeden "Navigations-Block" (also bei jedem Hauptmenüpunkt) habe ich um diesen if-Teil erweitert:

document.write('<a href=# onclick=outline('messtechnik') return false><b>Mess- &amp; Applikationstechnik</b></a>');

if (section != "" && section = "messtechnik") {
document.write('<br><div class="navi" id=messtechnik');
} else {
document.write('<br><div class="navi" id=messtechnik style=display:none>');

Erscheint dir das nicht selber verflixt aufwendig und redundant?

Da wäre vielleicht doch der Vorschlag von Jürgen überdenkenswert, erst mal den Navigationscode komplett zu erzeugen, und dann anschließend nur einen bestimmten Knoten zu manipulieren.
Erfordert aber natürlich etwas mehr Einarbeitung ins DOM Level 2 und seine Methoden.

gruß,
wahsaga

[JürgenB]

Hallo Damian,

auf meinen Seiten (z.B. http://www.j-berkemeier.de/Impressum.html durchsuche ich per Javascript (http://www.j-berkemeier.de/sl2t.js) alle Links im Menü und vergleiche sie mit der aktuellen Adresse. Der Link auf die aktuelle Seite wird dann in einen Textknoten umgewandelt. Vieleicht löst dieses Beispiel ja einen Teil deiner Probleme.

Gruß, Jürgen