HTML Title-Tag / Browser-Tab Notifications (the Facebook way)

Euch sind bestimmt schon einmal auf Facebook die Notifications aufgefallen, die Facebook euch über euren Browser Tab im Title mitteilt (in Form der Zahl an Notifications, die ihr momentan habt). Das sieht dann ungefähr so aus:

Bild Notification Title Tag Facebook

Die Manipulation des Titles im Browser-Tab könnt ihr ganz leicht mit jQuery nachbilden und euer eigenes Mini-Notification-Center bauen.

In meinem Beispiel habe ich die Notification rechts neben den Titel der Website gepackt. Ich persönlich finde, dass das schöner aussieht. Ist aber Geschmackssache, wie so ziemlich alles 😉

Nun gut, dann fangen wir einmal an. Zuerst erstellen wir eine simple HTML-Grundstruktur:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>upsession</title>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery-method.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>some text <br />
<a href="#" class="increase">increase notification</a>
<br />
<a href="#" class="decrease">decrease notification</a>
</body></html>

Was wir gleich machen, ist die jQuery-Library und unsere .js-Datei für unsere jQuery-Methode einbinden. Bitte beachtet, dass ich hier eine veraltete jQuery-Library eingebunden habe, alles aus Bequemlichkeit weil ich das so in meiner Vorlage hatte und diese Funktion keine neuere Library benötigt 😉 Just laziness 😉 jQuery liegt stand heute, 28.01.2012 in Version 1.7.1 vor, also nutzt am besten gleich die neue Version.
So, was haben wir nun. Wir haben eine HTML-Seite, die es uns ermöglichen soll die Notifications im Title der Seite per Click zu inkrementieren (erhöhen) oder zu dekrementieren (herabsetzen).

Nun brauchen wir das passende jQuery-Script dazu. Das könnte zum Beispiel so aussehen:

$(document).ready(function(){
	var n = 0;
	
	$(".increase").click(function(){
		n++;
		$("title").text("upsession ("+n+")");
	});
	
	$(".decrease").click(function(){
		n--;
		$("title").text("upsession ("+n+")");
		if (n < 1) {
			n = 0;
			$("title").text("upsession");
		}
	});
});

Damit wir keine negativen Notifications erhalten können, schließen wir das in Zeile 12 – 15 durch eine einfache if-Abfrage aus.
Ansonsten ist das Script relativ selbsterklärend. Sobald auf einen Link geklickt wird (achtet auf die Klassennamen) wird die Notification entweder inkrementiert oder dekrementiert und damit das Title-Tag abgeändert.

Das komplette Projekt könnt ihr euch hier downloaden: HTML Notifications Project Zip

1 Comments

Leave a Comment.


*