5202

ein Blog über technische Fragen zu Blogger

Einen Pointer über localStorage ein.- und ausblenden

von

Ich habe gestern ja einen localStorage Counter beschrieben. Das war alles a bisserl theoretisch - heute möchte ich anhand eines Beispiels zeigen, wie ihr damit ganz konkret eine Aktion ausführen könnt.

In dieser Skizze gibt es einen rote Punkt in der Mitte. Das ist ein 'reset' für den localStorage. Klickt ihr diesen Punkt, wird der localStorage zurückgesetzt.

Nachdem ein simpler roter-Punkt-ohne-jede-weitere-Beschreibung möglicherweise a bisserl wenig intuitiv ist :), blende ich beim _ersten_ Seitenaufruf einen Hinweispfeil mit Waschzettel ein. Ihr seht diesen Pfeil nur 6s lang, dann wird er ausgeblendet. Ruft ihr die Skizze ein weiteres mal auf, seht ihr nur einen roten Punkt - keinen Pfeil, keinen Waschzettel!

Der Sinn davon ist, das eure Besucher es vielleicht mögen, das erste oder zweite mal auf etwas hingewiesen zu werden ... aber bestimmt nicht dauernd mit dem immer gleichen Sermon zugetextet werden wollen :D.

Die Skizze ...

... ist komplex, weil sie auf eine 'echte' Frage einer Leserin zurückgeht - ich habe nur ein paar Dinge abstrahiert.Fangen wir mit der HTML an - der rote Punkt ist ein simpler div Container:

<div class="pointer"></div>

Zum 'Punkt' wird der Container mit CSS:

.pointer {
 display: block;
 position: absolute;
 height: 40px;
 width: 40px;
 background: #97234e;
 border-radius: 50%;
 }
Pseudoelemente ::before und ::after

Der Pfeil und der Text liegen in einem Pseudoelement - hier die CSS für den Pfeil:

.pointer::before {
 content: url('https://lh4.googleusercontent.com/-NAq9Jp3Nk0g/UPh1pXs-_DI/AAAAAAAADRs/NNRNPDtzGAg/s800/zudenposts.png');
 position: absolute;
 top: -140px;
 left: -340px;
}

und für den Waschzettel:

.pointer::after {
 content: 'click the red point to reset localStorage';
 font-size: 20px;
 position: absolute;
 top:-180px;
 left: -450px;
 border: 4px solid #97234e;
 padding: 8px
 }

Das Script

Bis jetzt war das alles noch klassische CSS - für den Rest brauchen wir Javascript. Das erste Problem dabei ist, dass Pseudoelemente kein Teil des DOM's sind und damit auch nicht direkt manipuliert werden können - wir müssen das indirekt über den div Container machen.

Fangen wir mit mit 'Zähler' an - das ist der Teil, den ich gestern schon kommentiert habe:

<script type="text/javascript">
      $(document).ready(function(){
    str_count = localStorage.getItem("count");
           if (str_count == null || str_count == "null"){
           count = 0;
        } else {
           count = parseInt(str_count);
        } 
          count ++ ;
          localStorage.setItem("count", count);
                 //

       });
</script>

Mit dem Zähler bekommen wir eine numerische Variable count, über die wir eine if ... else ... Abfrage schreiben können. Wenn der Wert der Variablen kleiner 2 ist [=der erste Seitenaufruf], wird foo ausgeführt, ansonsten bar

<script type="text/javascript">
      $(document).ready(function(){
               //
               if(count < 2) {
               //foo
               }
               else {
               //bar
               }        
    });
</script>

Für Werte kleiner 2 wollen wir nun Pfeil + Waschzettel nach 6s ausblenden [foo] ... ansonsten soll es immer ausgeblendet werden ... dazu schreiben wir eine kleine Funktion:

<script type="text/javascript">
      $(document).ready(function(){
               //
               if(count < 2) {
               setTimeout(function(){
                $('.pointer').addClass("hidden");
                  }, 6000);
               }
               else {
               $('.pointer').addClass("hidden");
               }        
    });
</script>

Das heißt im Klartext, wir geben dem div> Container eine neue Klasse hidden. Mit CSS blenden wir diese Klasse kurz und schmerzlos aus:

.pointer.hidden::before, .pointer.hidden::after {
 display: none
}

That's all! So einfach und simpel wie nur möglich gemacht ... Letzter Aufgabe - mit Klick auf den Punkt leere wir den localStorage:

<script type="text/javascript">
      $(document).ready(function(){
               //
               if(count < 2) {
               setTimeout(function(){
                $('.pointer').addClass("hidden");
                  }, 6000);
               }
               else {
               $('.pointer').addClass("hidden");
               }
               $(".pointer").click(function(){
          localStorage.removeItem("count");
          alert('localStorage erfolgreich entleert!')
               });
        });
</script>

Das ganze Script zusammen mit dem Zähler:

<script type="text/javascript">
      $(document).ready(function(){
  str_count = localStorage.getItem("count");
         if (str_count == null || str_count == "null"){
          count = 0;
       } else {
          count = parseInt(str_count);
       } 
          count ++ ;
          localStorage.setItem("count", count);
                 if(count < 2) {
                  setTimeout(function(){
                  $('.pointer').addClass("hidden");
                  }, 6000);
               } else {
                  $('.pointer').addClass("hidden");
                  }
                 $(".pointer").click(function(){
          localStorage.removeItem("count");
          alert('localStorage erfolgreich entleert!')
               });
        });
</script>

Yeah ... so simpel so far!

Weitere Posts

Für wen ist das?

Es ist natürlich nicht gaaaanz so einfach - ich sag mal, das hat schon 'ne mittelschwere Schwierigkeit :D. Als absolut blutige Anfänger in HTML & CSS solltet ihr euch an so was vielleicht noch nicht ranwagen ... aber ich denke es lohnt sich mit localStorage zu beschäftigen, weil ihr damit verblüffende [und sehr nutzerfreundliche] Gadgets in Blogger schreiben könntet.

Ich werde mit Sicherheit noch mal weitere Beispiele damit bringen. Die Skizze hier hat mich beschäftigt, weil dahinter ein reales Problem stand ... wenn ihr Ideen habt, was man damit anfangen könnte, immer her damit.