Suivez les fils RSS
 
Rechercher dans le sujet :
Forum
» JavaScript, DOM et API Web HTML5
» Changement de css selon l'heure client
Auteur
Gryzzly
# 27 May 2007 - 15:24:31
Citer
27 Posts
 Bonjour,

Je cherche en vain à réaliser en js un script qui me permette de faire appel à une css différente selon l'heure de la journée (heure client). J'avais tenté en php, ca fonctionnait, mais sur l'heure serveur, ce qui était très mauvais pour les personnes à l'étranger car le design de mon site ne correspondait pas à leur heure locale.

Pourriez vous m'orienter vers un script ?
Le principe étant :
- de tester l'heure client
- selon l'heure, faire appel à une css adaptée (j'en ai 4 au total: 6-10h, 10-18h, 18-22h, 22-6h)
Important : il faut que la déclaration ET l'appel du script puisse se faire dans le header (car l'appel d'une css se fait dans le header et non pas dans le body)

Merci d'avance !
http://www.ailurus.fr 
^
virtualgadjo
# 27 May 2007 - 15:31:49
Citer
219 Posts
 Salut,
un petit coup d'oeil du côté de getTime devrait te mettre sur la bonne voie smile ensuite rien de plus simple de mettre la feuille de style de ton choix dans le head.
Pour ce qui est de l'appel du script, window.onload (ou équivalent) ou mieux ondomready dans le head, ne pose pas vraiment de souci smile .
Ceci dit, au passage, même si on ne fait en général ça que pour les mailing-lists pour des raisons de compatibilités avec les divers clients mails, lier une feuille de style dans le body (voir entre le head et le body) marche aussi, c'est simplement moins sa place.

have swing
http://www.virtual-gadjo.com 
^
Gryzzly
# 27 May 2007 - 15:51:26
Citer
27 Posts
 Bon, je vais regarder du cotéde getTime et window.onload... un lien peut être vers un bon tuto sur la syntaxe des fonctions js et des tests de validité (if, else), je suis totalement débutant avec ce language.

Pour revenir sur la position de la css dans la page, si je la sors du header, ma page ne sera plus valide xhtml strict je pense, non ? donc c'est pas à envisager
http://www.ailurus.fr 
^
virtualgadjo
# 27 May 2007 - 16:04:28
Citer
219 Posts
 re smile
pour les liens sur js, je ne peux mieux faire que te conseiller celui-ci smile si tu parles un poil la langue de Sherlock Holmes (je préfère à Shakespeare...), sinon, un petit détour par google te donnera une tripoté de sites en français sur le sujet à commencer par cette liste

Possible pour le côté strict de l'affaire, je ne me suis pas posé la question mais je suis sûr que nous devrions avoir la réponse sous peu cligne

De toute façon, tu as raison sur le fond, à part pour cette histoire de mailing list, c'est plus logique de mettre ça dans le head, une juste séparation des éléments du code rend le truc plus propre (je me pose plus ce genre de question que la validité je t'avoue, je n'ai même jamais passé la moindre page au validateur, arghhhh pas bien smile mais bon, d'autres dans le taf, ouuuh, les vilains petits jaloux à l'affût de l'erreur du "concurrent", s'en sont chargé pour moi et jusqu'ici, ils en ont été pour leur frais smile logique et propre, en général, c'est valide smile )

Have swing
http://www.virtual-gadjo.com 
^
Gryzzly
# 27 May 2007 - 16:40:42
Citer
27 Posts
 Bon je m'en suis sorti, j'ai juste un petit soucis (voir point 4)

Voila ce que j'ai fais :

1) Dans le head :

<head>

<!-- Commentaire: Le JS ci dessous appelle la feuille de style variable selon l'heure -->

<script src="./index_include/css.js" type="text/javascript"></script>

</head>


2) le contenu de css.js :

HeureLocale = new Date();

if (HeureLocale.getHours() == 0) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style4.css\" />")} else {

if (HeureLocale.getHours() == 1) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style4.css\" />")} else {

if (HeureLocale.getHours() == 2) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style4.css\" />")} else {

if (HeureLocale.getHours() == 3) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style4.css\" />")} else {

if (HeureLocale.getHours() == 4) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style4.css\" />")} else {

if (HeureLocale.getHours() == 5) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style4.css\" />")} else {

if (HeureLocale.getHours() == 6) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style1.css\" />")} else {

if (HeureLocale.getHours() == 7) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style1.css\" />")} else {

if (HeureLocale.getHours() == 8) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style1.css\" />")} else {

if (HeureLocale.getHours() == 9) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style1.css\" />")} else {

if (HeureLocale.getHours() == 10) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style2.css\" />")} else {

if (HeureLocale.getHours() == 11) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style2.css\" />")} else {

if (HeureLocale.getHours() == 12) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style2.css\" />")} else {

if (HeureLocale.getHours() == 13) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style2.css\" />")} else {

if (HeureLocale.getHours() == 14) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style2.css\" />")} else {

if (HeureLocale.getHours() == 15) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style2.css\" />")} else {

if (HeureLocale.getHours() == 16) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style2.css\" />")} else {

if (HeureLocale.getHours() == 17) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style2.css\" />")} else {

if (HeureLocale.getHours() == 18) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style3.css\" />")} else {

if (HeureLocale.getHours() == 19) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style3.css\" />")} else {

if (HeureLocale.getHours() == 20) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style3.css\" />")} else {

if (HeureLocale.getHours() == 21) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style3.css\" />")} else {

if (HeureLocale.getHours() == 22) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style4.css\" />")} else {

if (HeureLocale.getHours() == 23) {document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style4.css\" />")}}}}}}}}}}}}}}}}}}}}}}}}


3) Tout passe au validateur xhtml 1.0 strict

4) maintenant j'ai un soucis :
Si javascript est activé, parfait, ca fonctionne.
Si javascript est désactivé chez le client : ben il n'a pas de feuille de style ! comment me débrouiller pour forcer une feuille de style (par exemple style2.css) ???

si vous avez envie/besoin de tester:
c'est par ici

Merci d'avance
Modifié par Gryzzly (27 May 2007 - 16:52)
http://www.ailurus.fr 
^
koala64
# 27 May 2007 - 16:46:01
Citer
Modérateur
4162 Posts
 Bonjour Gryzzly,

Peux-tu éditer ton dernier message (bouton en haut à droite du post) pour intégrer ton code entre les balises [ code]...[/code] (sans espaces) ? Merci d'avance. smile

^
Gryzzly
# 27 May 2007 - 16:49:44
Citer
27 Posts
 oui, bien sur, mais les boutons de balises ne fonctionnant pas, je ne pouvais connaitre leur syntaxe manuelle cligne

--edit--
je viens de comprendre que ce ne sont pas des boutons, mais qu'en restant sur le lien, on a le nom des balises...
désolé!
Modifié par Gryzzly (27 May 2007 - 16:53)
http://www.ailurus.fr 
^
koala64
# 27 May 2007 - 16:56:31
Citer
Modérateur
4162 Posts
 Sans doute as-tu Javascript désactivé parce que c'est bien des boutons et ils fonctionnent... mais seulement avec ce langage... rolleyes
Merci en tout cas. smile

^
virtualgadjo
# 27 May 2007 - 16:57:32
Citer
219 Posts
 re,
c'est tout simple, mets une feuille de style avant ton script et selon la règle du dernier arrivé, si ton client vient avec js, la feuille de ton choix prendra le pas sur celle qui est avant et sinon, celle-là (la première) sera seule en lice et fonctionnera par défaut

Have swing
http://www.virtual-gadjo.com 
^
virtualgadjo
# 27 May 2007 - 17:03:36
Citer
219 Posts
 au fait, juste histoire de simplifier ton script, tu sais que tu peux utiliser <, >, <=, >= avec js donc tu aurais moins de code en faisnt si heure compris entre 0 et 4 par ex plutôt que heure égale 0, puis, égale 1 puis égale 2, etc, ton code n'en sera que plus lisible et, comme tu risque d'y prendre goût (si, si, tu verras smile ) moins lourd quand les fonctions vont s'accumuler smile

Have swing
http://www.virtual-gadjo.com 
^
Gryzzly
# 27 May 2007 - 17:07:29
Citer
27 Posts
 je m'en doutais, mais je ne connais pas la syntaxe de la fonction "ET" :

si heure>=6 ET heure <10 alors...

merci pour l'autre solution!

-- edit --

ca y'est j'ai trouvé : fonction et : && ; fonction ou : ||
Modifié par Gryzzly (27 May 2007 - 17:29)
http://www.ailurus.fr 
^
virtualgadjo
# 27 May 2007 - 17:30:34
Citer
219 Posts
 plus simple encore

edit - tu as raison, c'est plus solide avec && smile - edit
une ligne par feuille de style, le pied non ? smile

have swing
Modifié par virtualgadjo (27 May 2007 - 17:32)
http://www.virtual-gadjo.com 
^
Gatsu35
# 27 May 2007 - 17:58:46
Citer
225 Posts
virtualgadjo a écrit :
plus simple encore

edit - tu as raison, c'est plus solide avec && smile - edit
une ligne par feuille de style, le pied non ? smile

have swing

Et encore plus ismple, on utilise un tableau contenant les heures de début de chaque nouvelle CSS, et en partant du principe que l'index de départ est l'index maximal (et aussi index par défaut).



function writeCSS() {

	var arrHours  = [6, 10, 18, 22, 24];

	var hour = new Date().getHours();



	var CSSIndex = 4;

	for (var i=0; i<arrHours.length-1; i++) {

		if(hour>=arrHours) {

			CSSIndex=i+1;

		}

	}

	document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style"+CSSIndex+".css\" />");

}


^
Le sujet est clos.
Aller à