Merken in welchem Tab der User war
Klaus
- html
- php
Hallo,
ich nutzte diese Tabs: http://codepen.io/oknoblich/full/tfjFl/. Im Tab Dupal kann der User eine Funktion „User merken“ ausführen dadurch wird die Seite neu geladen und er landet im ersten Tab. Wie kann ich mir merken wo der User zuletzt war? Geht das überhaupt mit diesen Tabs?
@@Klaus
ich nutzte diese Tabs: http://codepen.io/oknoblich/full/tfjFl/.
Bitte verlinken. Ich hab das mal berichtigt.
LLAP 🖖
Bitte verlinken. Ich hab das mal berichtigt.
Danke, ich dachte die werden automatisch umgewandelt wie man es aus Foren gewohnt ist.
@@Klaus
Bitte verlinken. Ich hab das mal berichtigt.
Danke, ich dachte die werden automatisch umgewandelt wie man es aus Foren gewohnt ist.
Nö, da hier desöfteren URIs in Beispielquelltext wie <a href="http://example.net">
oder (früher) auch <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
vorkommen, wird das absichtlich nicht gemacht.
LLAP 🖖
@@Klaus
ich nutzte diese Tabs: http://codepen.io/oknoblich/full/tfjFl/.
Diese Tabs sind gar nicht benutzbar! Mit Tastatur geht gar nichts, nicht bedienbar. Schlecht.
Die input
-Felder dürfen nicht auf display: none
gesetzt werden, auch nicht auf visibility: hidden
. Sie müssten visually hidden versteckt werden, bspw. mit opacity: 0
.
Beispiel: http://codepen.io/gunnarbittersmann/pen/adKezJ
LLAP 🖖
Tach!
ich nutzte diese Tabs: http://codepen.io/oknoblich/full/tfjFl/. Im Tab Dupal kann der User eine Funktion „User merken“ ausführen dadurch wird die Seite neu geladen und er landet im ersten Tab. Wie kann ich mir merken wo der User zuletzt war?
Beispielsweise im Local Storage.
Geht das überhaupt mit diesen Tabs?
Muss ja. Es gibt Code, der beim Klicken die Tabs umschaltet, also kann man diesen Code auch verwenden, um aufgrund eines anderen Ereignisses den Tab umzuschalten. Die Frage ist nur, ob das die API hergibt. Aber das sollte doch in der Dokumentation stehen ...
dedlfix.
@@dedlfix
Muss ja.
Muss es?
Es gibt Code, der beim Klicken die Tabs umschaltet,
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: block;
}
also kann man diesen Code auch verwenden, um aufgrund eines anderen Ereignisses den Tab umzuschalten. Die Frage ist nur, ob das die API hergibt.
Nix mit API.
LLAP 🖖
Tach!
Muss ja.
Muss es?
Na klar muss es, sonst würde es ja gar nicht gehen.
Es gibt Code, der beim Klicken die Tabs umschaltet,
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 { display: block; }
also kann man diesen Code auch verwenden, um aufgrund eines anderen Ereignisses den Tab umzuschalten. Die Frage ist nur, ob das die API hergibt.
Nix mit API.
Auch nicht schlecht, setzt man halt das checked-Attribut zu Fuß um. In dem Fall ist das "Muss ja" im Browser implementiert.
Warum hast du eigentlich eine solche Antwort nicht geben können und stattdessen nur Formfehler angekreidet?
dedlfix.
@@dedlfix
setzt man halt das checked-Attribut zu Fuß um.
Mit JavaScript‽
Dann kan man auch gleich die Sichtbarkeit der Tabs mit JavaScript umschalten und auf das CSS-Gefrickel verzichten.
LLAP 🖖
Tach!
setzt man halt das checked-Attribut zu Fuß um.
Mit JavaScript‽
Hast du einen anderen Vorschlag, wie man sich merken kann, wo der User gerade war?
dedlfix.
@@Gunnar Bittersmann
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 { display: block; }
Das funktioniert nicht in Android-Browsern, die immer noch vom WebKit Adjacent/General Sibling & Pseudo Class Bug betroffen sind.
Für Tabs wäre vielleicht doch eher eine Lösung mit unobtrusive JavaScript zu verwenden. Heydon Pickering hat ein Simple ARIA tab interface parat, das mit entsprechenden ARIA-Attributen auch wirklich barrierefrei sein sollte.
Und dann sollte man auch an das gewählte Tab rankommen.
LLAP 🖖
Aloha ;)
Das funktioniert nicht in Android-Browsern, die immer noch vom WebKit Adjacent/General Sibling & Pseudo Class Bug betroffen sind.
Wie du sehr genau weißt hatte ich dafür einen JavaScript-basierten Bugfix geschrieben, den man nur nehmen und anpassen muss (und bitte keine Diskussion darüber, dass das ja wieder JavaScript ist, also könnte man doch gleich JavaScript... Nein, es geht beim Bugfix ja einzig und allein um Android-Systembrowser, bei denen JavaScript nicht abschaltbar ist).
@Edit: Um den mal allgemein zu formulieren: Bei jeder Zustandsänderung sollte für den Bugfix folgender JS-Code ausgeführt werden:
document.body.style.WebkitAnimation = "bugfix infinite 1s";
window.setTimeout(function(){ document.body.style.WebkitAnimation = ""; },1500);
Folgende CSS-Regel muss dafür definiert sein:
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
Grüße,
RIDER