NightAngel.fr : Un thème en fonction de l’heure

Les personnes qui suivent mes articles par l’intermédiaire du flux RSS ne l’on probablement pas vu, mais le blog a récemment reçu plusieurs modifications. Le blog revêt désormais deux thèmes en fonction de l’heure. L’aspect « technique » de la chose sera détaillé dans la suite de l’article (la vérification se faisant à partir de l’heure de votre ordinateur). Pour l’instant il y a donc une version « de jour » (lumineuse/blanche) de 7H à 20H, et une version « nocturne » (sombre/noire) de 20H01 à 6H59. Bien que mon approche technique soit différente, et que je n’ai pas ses talents artistiques, je reconnais m’être grandement inspiré du site kulturbanause.de de Jonas Hellwig. Mais bon, ce n’est pas la seule modification : je n’allais pas écrire un billet juste pour ça !

Le champ de recherche (en haut à gauche) a reçu sa dose d’Ajax, puisque cette dernière s’effectue désormais au fil de la frappe. L’intégration du bouton flux RSS (en haut à droite) a également été revue et les 3 onglets (sur la droite) ont, eux aussi, reçu leur petite dose d’Ajax. Un pied de page (footer pour les intimes) a fait son apparition, le système de pagination a lui aussi été « ajaxisé » et l’affichage des huit vignettes (sur la page d’accueil) a bien sûr été peaufiné. Toutes les pages listées en haut du blog ont reçu des modifications (plus particulièrement BLOGROLL et CONTACT). Voilà, j’ai certainement du en oublier, mais le principal est quand même là

Charger un thème en fonction de l’heure (ou de la date)…

Ici il n’y a rien de très compliqué, juste un peu de javascript et des CSS. Le javascript ne va faire que contrôler l’heure (ou la date) de l’ordinateur du visiteur et ainsi appeler telle ou telle CSS. Personnellement je conserve une CSS « globale » pour tous les éléments qui ne changeront pas en fonction de l’heure (ou de la date). Ensuite j’appelle mon petit fichier javascript…

View Code HTML4STRICT

1

<script src="template-switcher.js" type="text/javascript"></script>

Fichier qui va vérifier l’heure (dans le cas présent) et charger en conséquence le feuille de style CSS appropriée. Voici donc template-switcher.js…

View Code JAVASCRIPT

1
2
3
4
5
6
7

HeureLocale = new Date();
if (HeureLocale.getHours() < 7 || HeureLocale.getHours() > 20)
	{
	document.write ("<link rel="stylesheet" type="text/css" media="screen" href="night.css" />")
	}
	else {	document.write ("<link rel="stylesheet" type="text/css" media="screen" href="day.css" />")
	}

Inutile d’en dire davantage, si l’heure est inférieure à 7 ou supérieure à 20H alors c’est la CSS night.css qui sera chargée, sinon ce sera la CSS day.css. Ici c’est la méthode (javascript) getHours() qui est utilisée mais rien ne vous empêche d’utiliser getDate() pour détecter la date à la place de l’heure. Avec un peu d’entrainement vous pourrez même combiner getDate() et getHours(). Pour des cas plus spécifiques, consultez toutes les méthodes de l’objet Date.