Header
Partagez | 

[FA] CSS en fonction de l'heure de la journée

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: [FA] CSS en fonction de l'heure de la journée   Dim 17 Nov - 9:35

Pour ceux qui étaient déjà dans l'école durant l'été 2012, vous devez vous souvenir que SoP avait trois designs différents. Pour ceux qui ne l'étaient pas, voici une explication ^^ Le design de SoP changeait en fonction de l'heure de la journée ^^

  • de 8h à 17h, nous étions à la [plage] ;
  • de 17h à 21h, nous faisions une balade en [forêt] ;
  • enfin, de 21h à 8h, nous faisions du [camping].


Nous allons donc voir dans ce tutoriel comment utiliser du javascript pour pour avoir une css de base pour nos forums ou sites et d'autres css prises en compte suivant l'heure de la journée.

Pré-requis



Avant d'attaquer la partie qui va nous permettre de gérer ce changements, vous devez avoir :


Allons-y !

Un design unique ? Ça nous lasse !


Ici, nous allons mettre en place deux cas de figure !

  • le changement de la CSS pendant le chargement de la page,
  • le changement de la CSS une fois la page chargée.


Voyons chacun de ces points séparement, même si, vous allez le voir, ils se ressemblent énormément ^^

Au chargement de la page



Ici, on va créer une fonction qui s'occupera de :
-> récupérer l'heure
-> d'ajouter dans le head la bonne CSS

Et on déclanchera cette fonction pendant le chargement de la page.

On y va Smile

~~~~ La base

Tout d'abord, on crée une fonction d'initialisation
Code:
function init1(){
 /* Mon code sera ici */
}
Dans cette fonction, on commence par lui dire "tu vas insérer des éléments dans le head"
Code:
function init1(){
 $("head").append(
 /* Mon code sera ici */
 }
 
}
Idea .append() est une fonction qui permet d'insérer un élement. Ici, on insère un élement dans le "head" de la page.

On continue ensuite en lui disant, "On va créer un élement de type 'link' qui aura pour attribut un 'rel', un 'type' et un 'href'"
Code:
function init1(){
 $("head").append(
 $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"http://site.school-of-progress.fr/old-design/design_ete_2012/base.css"})
 );
 /* Mon code sera ici */
 }
 
}
Idea C'est ce code qui appelle le css de base, quelque soit l'heure de la journée.

Ensuite, on va récupérer la date du jour, indispensable pour récupérer l'heure.
Code:
var date = new Date();
On va ensuite isoler l'heure de "date" et la mettre dans une variable "heure" qui nous servira pour nos tests.
Code:
var heure = date.getHours();
Nous avons donc ce js pour le moment :
Code:
function init1(){
 $("head").append(
 $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"http://site.school-of-progress.fr/old-design/design_ete_2012/base.css"})
 );
 var date = new Date();
 var heure = date.getHours();
 /* Mon code sera ici */
 }
 
}
~~~~ Les tests

Maintenant que nous avons récupéré l'heure, nous allons devoir la tester afin de savoir quelle CSS appeler dans le head. Pour cela, nous allons utiliser les test "conditionnels" "Si.... alors .... Sinon ....." qui se traduise de cette façon en javascript
Code:
if(condition){
 ce qu'on fait si la condition est respectée;
}else{
 ce qu'on fait si la condition n'est pas respectée;
 }
Dans mon exemple, nous avons donc 3 tests à faire :

  • l'heure est comprise entre 8h et 16h59,
  • l'heure est comprise entre 17h et 20h59,
  • l'heure est comprise entre 21h et 7h59.


Essayons de traduire tout ça en mathématique avant d'attaquer le js Smile
Citation :
l'heure est comprise entre 8h et 16h59
ça veut donc dire que notre heure est supérieure ou égale à 8 et strictement inférieure à 17h. Notre test ressemble donc à :
Code:
if(heure >= 8 && heure < 17){
 /* mon code est ici */
}
Idea && = et. Autrement dit, l'heure doit respecter les 2 conditions pour qu'on rentre dans la boucle.

Citation :
l'heure est comprise entre 17h et 20h59
ça veut donc dire que notre heure est supérieure ou égale à 17 et strictement inférieure à 21h. Notre test ressemble donc à :
Code:
if(heure >= 17 && heure < 21){
 /* mon code sera ici */
}
Citation :
l'heure est comprise entre 21h et 7h59.
Ahh un peu plus complexe ici :)ce bout de code veut dire que, l'heure est supérieure ou égale à 21h OU strictement inférieure à 8. Ce qui nous donne :
Code:
 if(heure >= 21 || heure < 8){
 /* Mon code sera ici */
}
Idea || = ou. Autrement dit, l'heure doit respectée soit l'une soit l'autre des conditions pour qu'on rentre dans la boucle.

Si on assemble le tout et qu'on ajoute ça à notre js de base, ça nous donne :
Code:
function init1(){
 $("head").append(
 /* On appelle la CSS de base */
 $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"http://site.school-of-progress.fr/old-design/design_ete_2012/base.css"})
 );
 
/* On récupère l'heure */
 var date = new Date();
 var heure = date.getHours();
 
/* On fait nos tests */
 if(heure >= 8 && heure < 17){
 /* On appellera la CSS de ce créneau horaire ici */
 }else if(heure >= 17 && heure < 21){
 /* On appellera la CSS de ce créneau horaire ici */
 }else if(heure >= 21 || heure < 8){
 /* On appellera la CSS de ce créneau horaire ici */
 }

 }
}
Fiou ! Le plus gros est fait :)Maintenant, on va reprendre le même principe que nous avons utiliser pour appeler la CSS de base : on va ajouter dans le "head" un nouvel élément d'appel de css. Donc :
-> pour le créneau [8/17[
Code:
$("head").append(
 $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"http://site.school-of-progress.fr/old-design/design_ete_2012/style_8_17.css"})
 );
-> pour le créneau [17/21[
Code:
$("head").append(
 $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"http://site.school-of-progress.fr/old-design/design_ete_2012/style_17_21.css"})
 );
-> pour le créneau [21/8[
Code:
$("head").append(
 $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"http://site.school-of-progress.fr/old-design/design_ete_2012/style_21_8.css"})
 );
Et hop ! On ajoute le tout dans le js
Code:
function init1(){
 $("head").append(
 /* On appelle la CSS de base */
 $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"http://site.school-of-progress.fr/old-design/design_ete_2012/base.css"})
 );
 
/* On récupère l'heure */
 var date = new Date();
 var heure = date.getHours();
 
/* On fait nos tests */
 if(heure >= 8 && heure < 17){
 /* On appellera la CSS à afficher de 8h à 16h59 */
 $("head").append(
 $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"http://site.school-of-progress.fr/old-design/design_ete_2012/style_8_17.css"})
 );
 }else if(heure >= 17 && heure < 21){
 /* On appellera la CSS à afficher de 17h à 20h59 */
 $("head").append(
 $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"http://site.school-of-progress.fr/old-design/design_ete_2012/style_17_21.css"})
 );
 }else if(heure >= 21 || heure < 8){
 /* On appellera la CSS à afficher de 21h à 7h59 */
 $("head").append(
 $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"http://site.school-of-progress.fr/old-design/design_ete_2012/style_21_8.css"})
 );
 }

 }
}
Nos tests sont à présent terminé ^^

~~~~ L'appel du JS

Maintenant que tout est fait, il ne nous reste plus qu'à appeler cette fonction pendant le chargement de la page.
On va utiliser cette simple ligne de code
Code:
window.onload = init1();
~~~~ Le js final & son installation
Au final, nous avons donc ce js
Code:
function init1(){
 $("head").append(
 /* On appelle la CSS de base */
 $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"http://site.school-of-progress.fr/old-design/design_ete_2012/base.css"})
 );
 
/* On récupère l'heure */
 var date = new Date();
 var heure = date.getHours();
 
/* On fait nos tests */
 if(heure >= 8 && heure < 17){
 /* On appellera la CSS à afficher de 8h à 16h59 */
 $("head").append(
 $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"http://site.school-of-progress.fr/old-design/design_ete_2012/style_8_17.css"})
 );
 }else if(heure >= 17 && heure < 21){
 /* On appellera la CSS à afficher de 17h à 20h59 */
 $("head").append(
 $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"http://site.school-of-progress.fr/old-design/design_ete_2012/style_17_21.css"})
 );
 }else if(heure >= 21 || heure < 8){
 /* On appellera la CSS à afficher de 21h à 7h59 */
 $("head").append(
 $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"http://site.school-of-progress.fr/old-design/design_ete_2012/style_21_8.css"})
 );
 }

 }
}

/* On déclenche la fonction pendant le chargement de la page */
window.onload = init1();
Idea n'oubliez pas de changer les heures pour les adapter à vos envies et n'oubliez pas aussi de changer les liens des CSS Wink

Arrow Pour l'installer, il vous suffit d'aller dans : PA >> Modules >> HTML & Javascript >> Gestion des codes javascript. Créez à cette endroit un nouveau js "changement css - chargement" et affichez-le sur toutes les pages.

Une fois la page chargée


Eh bien figurez-vous que, pour cette partie, on a quasi tout fait :)Sauf que cette fois, on ne va pas créer de fonction, mais tout lire et faire une fois la page chargée, c'est à dire une fois qu'elle est prête. Et pour cela, on va utiliser cette fonction pré-définie :
Code:
jQuery(document).ready(function(){
 /* Mon code sera ici */
});
Il nous suffit juste de copier-coller le code que nous avions fait pour :
-> déclarer la CSS de base
-> récupérer l'heure
-> faire nos tests.

Ce qui nous donne ce js au final :
Code:
jQuery(document).ready(function(){
 $("head").append(
 /* On appelle la CSS de base */
 $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"http://site.school-of-progress.fr/old-design/design_ete_2012/base.css"})
 );
 
/* On récupère l'heure */
 var date = new Date();
 var heure = date.getHours();
 
/* On fait nos tests */
 if(heure >= 8 && heure < 17){
 /* On appellera la CSS à afficher de 8h à 16h59 */
 $("head").append(
 $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"http://site.school-of-progress.fr/old-design/design_ete_2012/style_8_17.css"})
 );
 }else if(heure >= 17 && heure < 21){
 /* On appellera la CSS à afficher de 17h à 20h59 */
 $("head").append(
 $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"http://site.school-of-progress.fr/old-design/design_ete_2012/style_17_21.css"})
 );
 }else if(heure >= 21 || heure < 8){
 /* On appellera la CSS à afficher de 21h à 7h59 */
 $("head").append(
 $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"http://site.school-of-progress.fr/old-design/design_ete_2012/style_21_8.css"})
 );
 }

 }
});
Idea n'oubliez pas de changer les heures pour les adapter à vos envies et n'oubliez pas aussi de changer les liens des CSS Wink

Arrow Pour l'installer, il vous suffit d'aller dans : PA >> Modules >> HTML & Javascript >> Gestion des codes javascript. Créez à cette endroit un nouveau js "changement css" et affichez-le sur toutes les pages.




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "[FA] CSS en fonction de l'heure de la journée" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[FA] CSS en fonction de l'heure de la journée
Page 1 sur 1
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+