Klaus: Merken in welchem Tab der User war

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?

  1. @@Klaus

    ich nutzte diese Tabs: http://codepen.io/oknoblich/full/tfjFl/.

    Bitte verlinken. Ich hab das mal berichtigt.

    LLAP 🖖

    --
    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
    „Hat auf dem Forum herumgelungert …“
    (Wachen in Asterix 36: Der Papyrus des Cäsar)
    1. Bitte verlinken. Ich hab das mal berichtigt.

      Danke, ich dachte die werden automatisch umgewandelt wie man es aus Foren gewohnt ist.

      1. @@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 🖖

        --
        „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
        „Hat auf dem Forum herumgelungert …“
        (Wachen in Asterix 36: Der Papyrus des Cäsar)
  2. @@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 🖖

    --
    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
    „Hat auf dem Forum herumgelungert …“
    (Wachen in Asterix 36: Der Papyrus des Cäsar)
  3. 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.

    1. @@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 🖖

      --
      „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
      „Hat auf dem Forum herumgelungert …“
      (Wachen in Asterix 36: Der Papyrus des Cäsar)
      1. 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.

        1. @@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 🖖

          --
          „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
          „Hat auf dem Forum herumgelungert …“
          (Wachen in Asterix 36: Der Papyrus des Cäsar)
          1. 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.

      2. @@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 🖖

        --
        „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
        „Hat auf dem Forum herumgelungert …“
        (Wachen in Asterix 36: Der Papyrus des Cäsar)
        1. 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

          --
          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
          # Facebook # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[