CSS + aktiver Link + Reload

[Stephan]

Hallo und Guten Abend,

ich hoffe, mich einigermaßen verständlich auszudrücken:

Ich habe mit CSS ein, auf Layern basierendes Navigationsmenü erstellt.
Es funktioniert auch alles wunderbar, bei Hover wechselt die Farbe, bei Active schaut auch alles aus, wie es soll.

Wenn ich jetzt allerdings einen Reload der Seite mit dem aktiven Menüpunkt mache, ist natürlich der aktive Menüpunkt weg.

Kennt jemand irgendeinen Trick, wie ich mittels CSS den aktiven Menüpunkt auch nach einem Reload aktiv halten kann?

Vielen Dank

Stephan

[Tim Tepaße]

Hallo Stephan,

Wenn ich jetzt allerdings einen Reload der Seite mit dem aktiven Menüpunkt
mache, ist natürlich der aktive Menüpunkt weg.

Meinst Du den Link, der über :active ein anderes Aussehen erhält,
nachdem man ihn innerhalb der Seite annavigiert hat?

Kennt jemand irgendeinen Trick, wie ich mittels CSS den aktiven Menüpunkt
auch nach einem Reload aktiv halten kann?

Meines Wissens nein. Es sei denn über komplizierte und relativ sinnfreie Konstruktionen mittels Javascript und serverseitiger Techniken. Mir ist
auch schleierhaft, was Du damit erreichen willst.

Wenn ich Dich allerdings missverstanden habe, dann versuch bitte eine
erneute Erklärung, am besten mittels Angabe von Quelltext. Die Pseudoklasse
:active ist alles, was mir einfällt, was Du meinen kannst. Ich gehe
währenddessen durch den Regen, mir einen Döner holen.

• Tim

[Stephan]

Hi,

genau die Pseudoklasse :active meine ich.

Nehmen wir also mal an, die Hintergrundfarbe meines Links ist im aktiven, also geklicktem Zustand grün. Alle anderen Links sind rot.

Wenn ich den Reload-Button meines Browsers klicke, sind alle Navigationspunkte rot, da ja der "Aktiv-Status" verloren geht.

Ich möchte aber, dass der zuvor ausgewählte Button (in diesem Fall ein div), den "grünen" Status behält.

Ich hoffe, der verregnete Döner hat gemundet. :-)

Stephan

[Tim Tepaße]

Hallo Stephan,

Ich möchte aber, dass der zuvor ausgewählte Button (in diesem Fall ein div),
den "grünen" Status behält.

Mir ist zwar Sinn und Zweck dieses Features immer noch unverständlich,
gerade bei der Kompliziertheit einer Lösung für dieses künstliche Problem,
aber wenn Du unbedingt willst...

Überlegen wir mal.

Der Browser merkt sich nicht (weil es ja auch nicht erforderlich ist),
welches Element den Fokus hat, wenn der das Dokument nochmal lädt. Das
heißt Du mußt den Umweg über Javascript gehen. Zu den Nachteilen von
Javascript sage ich jetzt mal nichts, es ist hier ja nichts, daß bei
Nichtvorhandensein die Benutzung der Seite beeinflußt. Du mußt also ein
Javascript haben, daß weiß welches Element gerade selektiert ist. Da es
anscheinend keinen schnellen Verweis auf sowas wie document.focus gibt, muß
man das überwachen. Zwei mögliche Wege:

1. Den Eventhandler onFocus in jeden zu überwachenden Link einfügen
      der dann an ein Javascript eine linkspezifische und dokumentweit
      einzigartige ID weitermeldet.
      (http://selfhtml.teamone.de/javascript/sprache/eventhandler.htm#onfocus)
2. Events überwachen. Das geht irgendwie mit window.captureEvents(Event.FOCUS);
      (http://selfhtml.teamone.de/javascript/objekte/window.htm#capture_events)
      in SELFHTML steht aber, daß das nur in Netscape 4.0 funktioniert.
      Also indiskutabel.

Jetzt hast Du die ID des Elementes mit dem Fokus. Das muß Du jetzt irgendwie
an an das neugeladene Dokument kriegen. Wieder zwei Wege:

1. Über Javascript. Es gibt extrem umständliche Wege, Werte, wie eben
      Deine ID an das nächste geladene Dokument weiterzugeben. Diese Links
      sollten Dir weiterhelfen:
      http://aktuell.de.selfhtml.org/artikel/javascript/wertuebergabe/index.htm
      http://aktuell.de.selfhtml.org/artikel/javascript/wertuebergabe-2/index.htm
      Du mußt also im neugeladenen Dokument auch ein Javascript haben, daß
      die ID durch die Wertübergabe wieder ausliest, das Element über diese ID
      anspricht und ihm entweder über CSS Zuweisungen die entsprechenden
      Eigenschaften zuweist, oder aber ihm mittels focus() den Fokus zuweist.
      (http://selfhtml.teamone.de/javascript/objekte/htmlelemente.htm#a)

2. Serverseitig. Dazu muß Du auf dem Server ein Skript haben, daß die
      Seite ausgibt und auch wieder irgendwie die ID bekommt (Als Parameter an
      die URL anhängen bietet sich an) und daß dann das zur ID passenden
      Element im Dokument hervorhebt. Entweder daß es dem Element eine
      CSS-Klasse definiert, welche dieselben Eigenschaften wie :active hat,
      oder, daß diese ID in ein Javascript im Dokument reingeschrieben wird,
      das dann beim Laden des Dokuments über einen Eventhandler aufgerufen
      wird, der dann dieses Javascript aufruft, das mittels focus() dem
      entsprechenden Element den Fokus verleiht.

Es ist also schrecklich umständlich und verläßt sich zudem auf Javascript.
Für mich wäre die Kosten-Nutz-Rechnung nicht hoch genug, um das zu
implementieren. Aber vielleicht hast Du den Idealismus? ;o)

Ich hoffe, der verregnete Döner hat gemundet. :-)

Lecker. So lecker, daß ich für mich künstlich herbeigezauberte Probleme
löse. ;o)

• Tim

[Stephan]

Hi Tim,

ich hatte schon so etwas befürchtet.
Ursprünglich hatte ich ein Applet geschrieben, aber mein Auftragggeber bestand auf eine alternative Lösung.

Also habe ich mit CSS experimentiert, um dieses Problem lösen zu können.

Nunja, trotzdem danke für deine Hilfe, ich habs mir ja fast gedacht. ;-)

Viele Grüße

Stephan

[wahsaga]

hi,

Überlegen wir mal.
Der Browser merkt sich nicht (weil es ja auch nicht erforderlich ist),
welches Element den Fokus hat, wenn der das Dokument nochmal lädt.

der browser _darf_ es sich gar nicht merken - schliesslich forderst du das dokument erneut in seinem ausgangszustand an. da hat der browser gar nichts reinzuinterpretieren, was nicht da ist.

gruss,
wahsaga

[MudGuard]

Hi,

Nehmen wir also mal an, die Hintergrundfarbe meines Links ist im aktiven, also geklicktem Zustand grün. Alle anderen Links sind rot.
Wenn ich den Reload-Button meines Browsers klicke, sind alle Navigationspunkte rot, da ja der "Aktiv-Status" verloren geht.

Der :active-Status geht in dem Moment verloren, indem beim Klicken auf den Link die Maustaste losgelassen wird.
Wenn Dein Browser das anders handhabt, ist er fehlerhaft - meines Wissens macht das nur einer falsch, der Internet Explorer.

Nach dem Loslassen der Maustaste ist allerdings üblicherweise noch :focus zuständig (welcher Zustand wiederum vom Internet Explorer ignoriert wird).

cu,
Andreas