11521 sujets

JavaScript, DOM et API Web HTML5

Changement de css selon l'heure client

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 !
Salut,
un petit coup d'oeil du côté de getTime devrait te mettre sur la bonne voie Smiley 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 Smiley 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
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
re Smiley smile
pour les liens sur js, je ne peux mieux faire que te conseiller celui-ci Smiley 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 Smiley 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 Smiley 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 Smiley smile logique et propre, en général, c'est valide Smiley smile )

Have swing
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)
Modérateur
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. Smiley smile
oui, bien sur, mais les boutons de balises ne fonctionnant pas, je ne pouvais connaitre leur syntaxe manuelle Smiley 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)
Modérateur
Sans doute as-tu Javascript désactivé parce que c'est bien des boutons et ils fonctionnent... mais seulement avec ce langage... Smiley rolleyes
Merci en tout cas. Smiley smile
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
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 Smiley smile ) moins lourd quand les fonctions vont s'accumuler Smiley smile

Have swing
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)
plus simple encore

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

have swing
Modifié par virtualgadjo (27 May 2007 - 17:32)
virtualgadjo a écrit :
plus simple encore

edit - tu as raison, c'est plus solide avec && Smiley smile - edit
une ligne par feuille de style, le pied non ? Smiley 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[i]) {
			CSSIndex=i+1;
		}
	}
	document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style"+CSSIndex+".css\" />");
}
[/i]
Sujet clos
Aller à