Page 1 sur 1
Feuille de style et javascript
Posté : 01 oct. 2005, 13:05
par Manio 54
Bonjour !
J'aimerais adapter mon site à la résolution de l'écran du visiteur !
Mais je bute sur un truc : comment faire le lien vers la feuille de style après le detectage de la résolution ?
Code : Tout sélectionner
<SCRIPT language="JavaScript">
<!-- //
if(screen.width==1152&&screen.height==864){
Le code qui va la et qui charge la bonne feuille de style
}
//--> //
</SCRIPT>
Posté : 01 oct. 2005, 14:34
par Invité
si tu as:
alors:
document.getElementById('style').href="autre_style.css";
mais je crois qu'il y a un truc spécial en css pour s'occuper de ça.
Posté : 01 oct. 2005, 14:42
par Cyrano
si tu as:
alors:
document.getElementById('style').href="autre_style.css";
mais je crois qu'il y a un truc spécial en css pour s'occuper de ça.
Il y aurait de l'idée, tu pourrais aussi avoir des link vers toutes les version de feuilles de style du genre:
Code : Tout sélectionner
<link id="style" rel="alternate-stylesheet" href="style.css">
Et dans ton JavaScript:
document.getElementById('style').rel='stylesheet';
Posté : 01 oct. 2005, 15:50
par Manio 54
Pas tout compris !
Je pense tester toutes les resolutions et y attribuer la feuille de style correspondante !
Dans le javascript il faut que je mette
si tu as:
Code:
<link id="style" rel="stylesheet" href="style.css">
alors:
PHP:
document.getElementById('style').href="autre_style.css";
mais je crois qu'il y a un truc spécial en css pour s'occuper de ça.
Je ne peux pas mettre directement le lien de la feuille de style ???
Posté : 01 oct. 2005, 16:23
par Invité
Pas tout compris !
...
Je ne peux pas mettre directement le lien de la feuille de style ???
moi non plus j'ai trop compris ta question.
mais la balise link doit se trouver dans les balises head(code html) avant ton code js(sinon elle n'existe pas encore, à moins que tu appel cette fonction une fois que la page est chargé à l'aide du onload de la balise body par exemple).
ensuite à l'aide du code js que je t'ai filé tu spécifis la feuille à incorporer.
sinon regarde aussi ce que t'as dit cyrano.
je ne connait pas la directive "alternate-stylesheet" mais vue le nom elle semblerait plus approprié pour ce que tu veux faire.
Posté : 01 oct. 2005, 16:29
par Manio 54
Pour moi cela sera entre les balises head !
J'essayerai sa tout a l'heure xar je ne suis pas chez moi je vous tiens au courant ! Et du coup il faudra que je fasse sa a toute les pages ? si oui je pense que je vais l'inclure !
Les alternate stylesheet sont des feuilles de styles alternatives que tu choisi a partir de ton navigateur (firefox peut mais pas IE) j'ai jamais essayé !
Posté : 02 oct. 2005, 10:47
par Manio 54
je n'ai pas compris ou je mets le
car si je le mets dans les balises head, il les prends automatiquement et mon javascript sert a rien car je veux que cela soit lui qui choisisse la feuille de style !
Posté : 02 oct. 2005, 12:04
par Cyrano
L'Idée, c'est que tu mets dans l'en-tête toutes les feuilles de style avec comme attribut rel la valeur "alternate-stylesheet".
Toujours dans l'en-tête, tu ajoutes une fonction JavaScript qui va faire dans un premier temps la détection de la définition du moniteur de l'internaute et dans un second temps, en fonction de cette définition, modifier la valeur pour la feuille de style appropriée de l'attribut rel de "alternate-stylesheet" en "stylesheet".
Dans la balise body, tu rajoutes un gestionnaire d'évènement onload="change_style();", change_style étant le nom de la fonction JavaScript définie juste avant.
Je ne suis pas certain de mon coup, mais ça devrait fonctionner.
Posté : 02 oct. 2005, 12:07
par Manio 54
Je vois ce que tu veux faire (detection de la definition, et javascript qui change l'attribut alternate en fonction de la résolution) mais le problème c'est que je suis vraiment débutant en javascript je vais essayer de pondre quelque chose mais je garanti rien !
Posté : 02 oct. 2005, 12:14
par Cyrano
Ceci dit, il me semble qu'une feuille de style pour chaque type de résolutiond'écran dénote d'un problème de mise en page. Une page devrait pouvoir s'adapter à n'importe quelle résolution avec une seule et même feuille de style. Enfin bon, pour ce que j'en dis...
Mais voici
une maquette que tu peux tester sous toutes les résolutions même en 640/480 si ça t'amuse, je n'ai qu'une seule feuille de style CSS et aucun problème d'affichage et aucune barre de défilement horizontale non plus.
Posté : 02 oct. 2005, 12:24
par Manio 54
oui c'est vrai !
Je devrais travailler en pourcent, j'avais essayé il y a un bout de temps mais je ne sais plus sur quel problème j'avais buté !
Je crois que je vais m'y remettre !!!