kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Title-Tag des inaktiven Browser-Tabs animieren

Eine Bewegung in einer ansonsten statischen Umgebung zieht den Blick auf sich. Der <title>-Tag einer Website, der im Browser-Tab angezeigt wird, ist in der Regel statisch und somit eher unauffällig. Wir archivieren in diesem Beitrag ein jQuery-Snippet, mit dessen Hilfe ihr den Inhalt des im Hintergrund geöffneten Browser-Tabs austauscht und auf Wunsch animiert.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

Text im Browsertab mit jQuery austauschen

Mit dem nachfolgenden Snippet könnt ihr, wie angekündigt, den Text des <title>-Tags, austauschen, sobald der Browser-Tab bzw. das Browserfenster nicht mehr im Vordergrund geöffnet ist.

focusTitle = $('head title').text(); // Originalen Title speichern
$(window).on('blur focus', function(e) {
 var prevType = $(this).data('prevType'); 
 if (prevType != e.type) {
   switch (e.type) {
     case 'blur':
     var i=0;
     tab = setInterval(function() {
       switch(i++%2) {
         case 0: document.title = 'Wir sind'; // Erste Anzeige im Tab
         break;
         case 1: document.title = 'kulturbanause'; // Zweite Anzeige im Tab
       }
     }, 1000); // Zeit zwischen dem Wechsel der Anzeigen
     break;
     case 'focus': 
       clearInterval(tab);
       document.title = focusTitle; // Originalen Title einsetzen
     break;
   }
 }
 $(this).data('prevType', e.type);
});

Beispiel anschauen

Voraussetzung für die Funktionsweise des Codes ist, dass ihr eine Version von jQuery vor dem Snippet in eurer Website eingebunden habt. jQuery kann beispielsweise über den Hochverfügbarkeitsserver von Google eingebunden werden. Eine Anleitung dazu findet ihr auf Google Hostet Libraries.

Für den Fall, dass ihr mit WordPress arbeitet, zeigen wir euch in den Beiträgen WordPress: interne jQuery-Version über Google CDN im Footer laden und jQuery über WordPress laden wie ihr jQuery in WordPress einbindet.

Kurzerläuterung des Snippets

Das Snippet enthält einen »Switch« mit zwei Zuständen. Die Anzahl der Zustände kann auf eine beliebige Anzahl erweitert werden. Mit setInterval() gehen wir die angelegten Zustände im Sekundentakt nacheinander durch und tauschen über document.title = ''; den Text im <title>-Tag. Damit erscheint der Text im Browser-Tab animiert.

Die Funktion wird ausgeführt, sobald sich der Fokus-Zustand des Browserfensters ändert. Beim Wechsel zurück vom Hintergrund in den Vordergrund des Tabs bzw. Fensters wird wieder der ursprüngliche Text in den <title>-Tag eingesetzt. Dieser wurde nämlich beim ersten Seitenaufruf zwischengespeichert.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

4 Kommentare

  1. Bernd

    Verfasst am 16. Januar 2018 um 13:49 Uhr.

    danke, aber wo genau kommt der Snippet jetzt hin?
    Ich verwende das WP-Plugin Code-Snippets (https://de.wordpress.org/plugins/code-snippets/), in das ich alle Snippets einbaue, die normalerweise in die functions.php des jeweiligen Themes kommen.
    Allerdings funktioniert es SO mit dem o.g. Snippet nicht; ich bin jetzt kein Coder, aber eine Function ist das oben nicht?

    • Jonas Hellwig

      Verfasst am 16. Januar 2018 um 14:33 Uhr.

      Der Code ist ja JavaScript – ich denke das funktioniert nicht mit deinem Plugin, da dieses nur PHP erwartet.

      • Bernd

        Verfasst am 16. Januar 2018 um 14:36 Uhr.

        okay, danke, aber wie baut man dann deinen Code bitte in eine WP-Installation ein?

  2. Peter

    Verfasst am 12. Februar 2018 um 1:36 Uhr.

    Danke für diese Idee!
    Nun ist es eigentlich mehr „Spielkram“ wie ich finde, aber so ein Eye-Catcher hat dann dennoch Potential. So kann man den ein odere anderen Tab doch noch vor dem Schließen bewaren, und die Verweildauer erhöhen.
    Ich denke, dass werde ich mal bei einem Projekt ausprobieren.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.