11548 sujets

JavaScript, DOM et API Web HTML5

[résolu] Javascript : 2 scripts en conflits appelés dans le header

Bonjour,

Comme indiqué dans le titre, mon problème est lié au Javascript.

SITUATION
J'utilise sur mon site deux feuilles de styles permettant de changer l'habillage. La sélection se fait à l'aide d'un code javascript ; l'entête des pages comporte donc : 
<script type="text/javascript" src="http://univers-fusco.com/jvs/skin.js"></script>

J'ai des pages galeries sur lesquelles je présente des photographies en utilisant le script d'Olivier, disponible en tutoriel sur Alsa. Ces pages ont donc dans le header :
<script type="text/javascript" src="http://univers-fusco.com/jvs/script.js"></script>


PROBLÈME
Si on utilise la feuille de style alternative (nommée sable) et qu'on se rend sur une des deux pages "galerie", l'apparence du site revient sur la feuille de style par défaut (nommée gris).
C'est certainement dû à la double déclaration de scripts dans l'entête de ces pages (vous pourrez-vous en rendre compte en consultant la source : http://univers-fusco.com/galerie/paras.php). En gros, on trouve :

<head>
<script type="text/javascript" src="http://univers-fusco.com/jvs/skin.js"></script>	
<link href="http://univers-fusco.com/c/univers.css" rel="stylesheet" type="text/css" media="screen" />
<link href="http://univers-fusco.com/c/sable.css" rel="alternate stylesheet" type="text/css" media="screen" title="sable" />

<script type="text/javascript" src="http://univers-fusco.com/jvs/script.js"></script>
</head>

J'ai conscience que cette "double déclaration" n'est probablement pas juste.
Donc, le script de la galerie, déclaré en second, prévaut sur celui associé à la feuille de style et le choix de l'habillage alternatif n'est pas conservé quand on visite ces pages.


CE QUE J'AI TENTÉ
J'ai essayé d'inclure le script associé au changement d'habillage dans le script de la galerie. Mais sans succès (je m'y connais peu en Javascript, DOM, etc.). (J'ai également testé l'inverse, mais sans plus de succès.)

Étant pour la séparation entre comportement et structure (voir cet excellent article sur pompage.net : http://pompage.net/pompe/separation), je n'envisage pas d'intégrer le script de galerie directement dans le balisage.


LES LIENS
Le site : http://univers-fusco.com
Les pages galerie :
http://univers-fusco.com/galerie/paras.php
http://univers-fusco.com/galerie/anciens.php
Les scripts Javascripts:
feuille de style : http://www.univers-fusco.com/jvs/skin.js
galerie : http://www.univers-fusco.com/jvs/script.js



QUESTION : Le problème étant dans le header et cette "double-déclaration", avez-vous svp une solution, une piste, un conseil... ? Smiley biggrin

Edit -- Pour ceux qui me répondront d'utiliser un "styleswitcher" en PHP, vous avez raison. Cependant, j'ai déjà essayé plusieurs scripts (celui d'Alsa, de A list Apart, ou d'autres sites), mais sans réussir à les faire fonctionner. Pour le moment, je reste donc sur mon "styleswitcher" en javascript qui veut bien fonctionner lui. Smiley ravi
Modifié par Smiley neko (13 Apr 2006 - 18:03)
Bonjour,
Il faut que tu regardes à l'intérieur du script s'il n'y aurait pas un conflit de variable ou quelque chose comme ça.

Je te conseille également le style switcher en php.
Bonjour,
Dans tes 2 scripts est utilisé :

window.onload = displayPics;
et
window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

Il faut regrouper les 2 dans script.js comme ceci :

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
displayPics();
}
Je me suis fait servir la solution sur un plateau d'argent. Ça fonctionne parfaitement maintenant.

Merci chmel ! Smiley smile (Il falloir que je m'y mette, car une fois qu'on tient la solution, ça paraît si simple...)
Sujet clos
Aller à