nicht angemeldet
Linkliste mit Javascript-Scrollbar und Tab-Key beim IE
Hallo,
ich ersetze mit Javascript normale <select>-Elemente durch <div>-Layer, die die <option>-Einträge als Linkliste enthalten. Der <div>-Layer hat eine Maximalhöhe. Ist die Höhe der Linkliste größer, so wird ein Slider eingeblendet, der als Scrollbar dient.
Mit verschiedenen Events sorge ich dafür, dass die Benutzung von Mausscrollrad und Pfeiltasten möglichst nah am <select>-Element ist.
Da einige User erkennen werden, dass es sich ja in Wirklichkeit um eine Linkliste handelt, werden sie vielleicht auf die Idee kommen, mit der Tab-Taste zu navigieren.
Springt der User vom letzten noch sichtbaren Link mit der Tab-Taste zum nächsten Link, weiß der Slider davon erst einmal nichts und der Browser scrollt nicht die Linkliste, sondern den <div>-Container inklusive Slider nach oben. Hässlich …
Das Problem konnte ich in Firefox und Safari durch ein onfocus-Event beheben, welches vor dem Springen den Slider anweist, die Linkliste so zu scrollen, dass der zu fokussierende Link sichtbar ist. Geht …
Das Problem ist – wer hat’s schon erraten – der IE, der onfocus (und scheinbar auch onbeforefocus) _nach_ der Darstellung feuert, wo der Browser schon sein Unheil angerichtet hat. Problem …
Folgende Dinge könnte ich tun:
· Tab und Shift-Tab direkt per onkeypress abfangen, händisch per js das nächste zu fokussierende Element herausfinden, dieses Fokussieren und den Event stoppen. Diesen Aufwand würde ich gerne vermeiden.
· mittels tabindex="-1" die Funktion verhindern. Auch wenn der Benutzer noch über die Pfeiltasten navigieren kann, finde ich das trotzdem nicht die feine Art.
Gibt es andere, einfachere Möglichkeiten, das Problem zu lösen, sprich, den IE vor der Fokussierung eines Elementes Javascriptcode ausführen zu lassen?
(Anmerkung: Die Diskussion, ob man Formularelemente überhaupt nachbauen sollte, möchte ich hier gerne vermeiden.)
Gruß
Olaf
-
Hallo,
erster Nachtrag:
es gibt beim IE einen Eventhandler namens „onactivate“. Vielleicht tut der’s.
Grüße,
Olaf -
Hi,
Das Problem ist – wer hat’s schon erraten – der IE, der onfocus (und scheinbar auch onbeforefocus) _nach_ der Darstellung feuert, wo der Browser schon sein Unheil angerichtet hat. Problem …
Ganz klar ist mir die Sache nicht.
Wieso scrollt der Browser das DIV nach oben, wenn man per Tab einen nicht sichtbaren Link darin annavigieren will?
Oder versteh ich da was falsch?
Mir fällt zu dem Thema nur noch die Methode scrollIntoView ein. Vielleicht hilfts, wenn man diese an das focus Event eines jeden Links macht (onfocus="this.scrollIntoView(false)")
Wobei es dann schon wieder schwierig zu entscheiden, ob man nach oben (Shift) oder nach unten (nur Tab) navigiert, und entsprechend true oder false übergeben müsste.
Außerdem scrollt diese Methode auch parent Elemente, was nicht wirklich beeinflussbar ist, wie er da scrollt.
· Tab und Shift-Tab direkt per onkeypress abfangen, händisch per js das nächste zu fokussierende Element herausfinden, dieses Fokussieren und den Event stoppen. Diesen Aufwand würde ich gerne vermeiden.
wenn, dann schon bitte onkeydown. Ginge aber.
Hab sonst auch keine Ideen, u.A. weil ich das Problem nicht ganz erfasst habe.
Gruß!
-
Hallo Christian,
leider ist der Code recht komplex, so dass ich nicht auf die Schnelle ein Szenario des Problems online stellen kann.
Ich vermute aber, dass ich das Problem gelöst habe, welches allerdings vermutlich an ganz anderer Stelle auftrat: Ich habe nur dem unschließenden Container-div ein overflow:hidden gegeben und nicht der Linkliste selber. Dadurch wurde, wenn der Browser versucht hat, einen nicht sichtbaren Link anzuzeigen, das Container-div und nicht die Linkliste gescrollt.
onactivate scheint dennoch ganz nützlich zu sein.
Gruß
Olaf
-