[Résolu] Perte de feuille de style sur changement de page

Perte de feuille de style sur changement de page [Résolu] - HTML/CSS - Programmation

Marsh Posté le 27-03-2010 à 00:44:53    

Salut à vous.
 
 
Voilà 3h que je me casse la tête sur un truc à la c...,  que je me permets (généreusement :whistle: ) de vous soumettre :o  
 
 
J'ai un site avec juste 6 ou 7 pages (on va dire 7), avec un script qui me permet d'avoir 4 images différentes en en-tête via un clic sur un choix de 4 chiffres. Le truc classique en somme...
 
Ces 7 pages sont basée sur un template A, associé à 4 feuilles de styles (j'ai créé une feuille de style par affichage alternatif).
 
A partir de là j'ai créé un répertoire supplémentaire, pour ajouter 3 pages (que je voulais distinguer des 6 ou 7 précédentes).
Ces 3 pages ont un template très très voisin du template A, qu'on va appeler template B, qui utilise 4 nouvelles feuilles de styles également différentes mais voisines des précédentes (ça n'est pas réellement génial 8 feuilles de styles, mais à priori pour le moment je vais faire comme ça...).
 
 
Le problème :
Ce qui se passe de curieux, c'est que dès que je passe d'une des 7 pages "principales" à l'une des 3 pages "ajoutées" (ou l'inverse), je perds le lien vers ma feuille de style et me retrouve avec un affichage HTML !
Et curieusement si là je clique sur l'un des 4 chiffres en haut de mon affichage alternatif, je retrouve une feuille de style !
 
Comme s'il y avait un "espace libre" qq part, sans feuille de style associé, sur lequel on tombe parfois...
 
 
 
Bref si vous aviez un début de piste ?...


Message édité par toum_toum le 29-03-2010 à 21:18:16

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 27-03-2010 à 00:44:53   

Reply

Marsh Posté le 27-03-2010 à 01:05:16    

PS :  j'ai utilisé le script styleswitcher.js (pour l'affichage alternatif)
Via ce tuto : http://batraciens.net/css-astuces/skins-changement.htm
 
Dans mon HTML, j'ai écrit (pour mes 7 pages) :
 

Code :
  1. <link href="../css/style_01.css" rel="stylesheet" type="text/css" title="style_01" />
  2. <link href="../css/style_02.css" rel="alternate stylesheet" type="text/css" title="style_02" />
  3. <link href="../css/style_03.css" rel="alternate stylesheet" type="text/css"  title="style_03" />
  4. <link href="../css/style_04.css" rel="alternate stylesheet" type="text/css"  title="style_04" />
  5. <script type="text/javascript" src="../js/styleswitcher.js"></script>
  7. ...
  9. <div class="affichages_alternatifs">
  10. <a class="sansdecoration" href="#" onclick="setActiveStyleSheet('style_01'); return false;">1</a> |
  11. <a class="sansdecoration" href="#" onclick="setActiveStyleSheet('style_02'); return false;">2</a> |
  12. <a class="sansdecoration" href="#" onclick="setActiveStyleSheet('style_03'); return false;">3</a> |
  13. <a class="sansdecoration" href="#" onclick="setActiveStyleSheet('style_04'); return false;">4</a> |
  14. </div>


 
 
 
Pour les 3 autres pages, ca devient :
 

Code :
  1. <link href="../css/style_06.css" rel="stylesheet" type="text/css" title="style_06" />
  2. <link href="../css/style_07.css" rel="alternate stylesheet" type="text/css" title="style_07" />
  3. <link href="../css/style_08.css" rel="alternate stylesheet" type="text/css"  title="style_08" />
  4. <link href="../css/style_09.css" rel="alternate stylesheet" type="text/css"  title="style_09" />
  5. <script type="text/javascript" src="../js/styleswitcher.js"></script>
  7. ...
  9. <div class="affichages_alternatifs">
  10. <a class="sansdecoration" href="#" onclick="setActiveStyleSheet('style_06'); return false;">1</a> |
  11. <a class="sansdecoration" href="#" onclick="setActiveStyleSheet('style_07'); return false;">2</a> |
  12. <a class="sansdecoration" href="#" onclick="setActiveStyleSheet('style_08'); return false;">3</a> |
  13. <a class="sansdecoration" href="#" onclick="setActiveStyleSheet('style_09'); return false;">4</a> |
  14. </div>


 
 
 
PS : mon probleme est vraiment apparu depuis la création de ces nouvelles pages. Avant pendant 1 mois aucun probleme avec ça...
 
En fait j'ai dû toucher à qq chose soit sur mon template, soit sur les feuilles de styles ? (pas forcément un rapport avec ce script d'affichage, surement aucun même je dirais...)
 
Pour terminer ça se présente encore plus simplement que ce que j'ai dit plus haut :  si on accède à mon site  (mondomaine.com ou mondomaine.com/index.html) : plus de feuille de style. Si on clique en haut sur un des 4 chiffres de l'affichage alternatif, ça revient...
Si on change de répertoire (Monrep/les 3 pages), ça part de nouveau...


Message édité par toum_toum le 27-03-2010 à 01:26:27

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 27-03-2010 à 03:04:21    

Au chargement de la page quel style est censé être appliqué (avant le clique sur un des boutons) ?

 

Ca vient peux etre de la.. du coup essayes un :

 

window.onload = function(){
   setActiveStyleSheet('style_06')
}

 

pour expliciter à ta page que tu veux charger par defaut  le style 6.

 

par contre si ca règle ton problème, eje comprend pas comment ca pouvais marcher avant.. ta du virer un truc entre temps


Message édité par bixibu le 27-03-2010 à 03:05:31

---------------
App Android NextGP : Store - TU | Makerworld
Reply

Marsh Posté le 27-03-2010 à 09:51:48    

Oui mais si je fais cette méthode, à chaque changement de page je reviens sur le 'style06' (dans cet exemple).
 
Alors qu'il faut pouvoir naviguer dans le site en gardant le style choisi tant qu'on n'a pas décidé d'en changer expressément ! (Ce qui fonctionnait jusqu'à hier.. En effet j'ai un peu bidouillé, car j'ai voulu ajouter du script - pour une lightbox ! J'ai aussi mis en ligne ces "3 pages" annexes, créées il y a qq jours, mais que je ne testais pas trop encore, j'étais juste en train de les créer...)


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 27-03-2010 à 10:46:02    

Ca y est je pense avoir trouvé.
 
Du fait de l'installation de la lightbox, j'avais dû créer un repertoire "js" et j'avais mis les fichiers js dedans.
Du coup, pour mon affichage alternatif, j'avais un fichier styleswitcher.js qui trainait parmi mes fichiers html.
Je l'ai alors lui aussi déplacé dans ce repertoire "js".
 
J'ai alors changé mon template de :

Code :
  1. <script type="text/javascript" src="styleswitcher.js"></script>


à :

Code :
  1. <script type="text/javascript" src="../js/styleswitcher.js"></script>


 
Et c'est là l'erreur... Avec cette écriture, ça ne fonctionne plus. (Pourtant styleswitcher.js est bien dans le rep "js" )
D'où j'ai remis styleswitcher.js au  niveau des fichiers html, je retapé le code :

Code :
  1. <script type="text/javascript" src="styleswitcher.js"></script>


Et là plus de bug...
 
 
PS : à titre d'"info comment écrire cette ligne pour récupérer le fichier styleswitcher.js si je decide de le laisser avec les autres dans le rep "js" ?


Message édité par toum_toum le 27-03-2010 à 11:26:38

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 27-03-2010 à 11:41:33    

M...de c'est encore reparti...  [:bakasan:3]
 
--------------------------
 
 
Bon cette fois-ci, je suis de plus en plus près de la source du probleme :o
 
C'est le fameux styleswitcher.js  
 
 
J'ai 2 templates :  
 
1. Pour celui de mes pages principales, "template 1", j'ai placé le fichier styleswitcher.js à coté de ces pages (pas dans un rep spécifique).
D'où dans ce template je l'appelle par :
<script type="text/javascript" src="styleswitcher.js"></script>
 
Aucun soucis là... (tant que je me borne à naviguer entre ces 7 pages)
 
 
2. Pour celui de mes pages du répertoire "rep" où mes 3 autres pages sont insérées, "template 2", là je dois retrouver ce styleswitcher.js
D'où dans mon code j'ai tapé :
<script type="text/javascript" src="../styleswitcher.js"></script>  (pour remonter vers le répertoire "parent".)
 
Et c'est là que ça buggue avec la disparition de mes feuilles de style... (par contre l'affichage alternatif fonctionne sur ces 3 pages)
 
 
J'ai aussi tenté de dupliquer le styleswitcher.js pour le mettre dans "rep". Là je l'appelle dans le template 2 par :  
<script type="text/javascript" src="styleswitcher.js"></script>
 
Le bug reste le même : l'affichage alternatif fonctionne, mais le css disparait dès que je vais vers mes 7 pages "principales" (donc que je rechange de rep...).
 
 
C'est vraiment 100% lié à ce styleswitcher.js ...
 
 
------------------------------
 
 
Donc pour résumer le problème que j'ai depuis hier  :o :  
 
- si je navigue entre pages d'un même répertoire, tout va bien. C'est dès que je change de répertoire que je perds ma feuille de style
- Le problème est lié à ce fichier styleswitcher.js  
- Si je clique sur un des affichages alternatifs, cela me fait retrouver mes feuilles de style...


Message édité par toum_toum le 27-03-2010 à 12:37:00

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 27-03-2010 à 16:00:04    

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

 

sur toutes tes pages. comme ca quelque soit le dossier dans lequel se trouve ta page, elle ira chercher le script à partir de la racine de ton site, dossier JS


Message édité par bixibu le 27-03-2010 à 16:00:50

---------------
App Android NextGP : Store - TU | Makerworld
Reply

Marsh Posté le 27-03-2010 à 19:48:01    

Donc plutôt <script type="text/javascript" src="/js/styleswitcher.js"></script> , non ?
 
Je fais les tests... (avec /styleswitcher.js d'abord...) :jap:  
 
----------------
 
Pour le moment ca ne fonctionne pas...  Est-ce que je dois supprimer tous les styleswitcher.js sauf un ?
Pour être sûr que c'est le même fichier styleswitcher.js qui sera sollicité (est-ce que c'est important ?)


Message édité par toum_toum le 27-03-2010 à 19:54:01

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 27-03-2010 à 20:57:49    

oui j'ai zappé le /js effectivement :d


---------------
App Android NextGP : Store - TU | Makerworld
Reply

Marsh Posté le 27-03-2010 à 21:00:58    

c'est quoi l'url de ton site ??

 

si c'est du genre : test.com, tu aura donc :
<script type="text/javascript" src="/js/styleswitcher.js"></script>

 

si t'es en local sur du : http://localhost/monsite1/, tu aura plutot :
<script type="text/javascript" src="/monsite1/js/styleswitcher.js"></script>

 

Ca c'est la solution "absolute".

 


Sinon tu le fait en "relatif" :

 

Les pages au meme niveau que le dossier JS:
<script type="text/javascript" src="js/styleswitcher.js"></script>

 

Les pages dans un autre dossier (/test) :
<script type="text/javascript" src="../js/styleswitcher.js"></script>


Message édité par bixibu le 27-03-2010 à 21:01:28

---------------
App Android NextGP : Store - TU | Makerworld
Reply

Marsh Posté le 27-03-2010 à 21:00:58   

Reply

Marsh Posté le 27-03-2010 à 21:44:29    


Pages "libres" (les 7) :
Template 1 avec : <script type="text/javascript" src="js/styleswitcher.js"></script>
 
Pages dans répertoire "rep" :
Template 2 avec : <script type="text/javascript" src="../js/styleswitcher.js"></script>
 
styleswitcher.js :
logé dans le répertoire "js"
 
 
En résumé :
 
- mes 7 pages (template 1)
- répertoire "rep" : les 3 autres pages (template 2)
- répertoire "js" : le fichier js
 
--------------------------
 
-> Toujours mon bug...
 


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 27-03-2010 à 23:09:48    


Voici le code de ce fichier "styleswitcher.js", celui qui au final pose tant problème...
 
 

Code :
  1. function setActiveStyleSheet(title) {
  2.   var i, a, main;
  3.   for(i=0; (a = document.getElementsByTagName("link" )[i]); i++) {
  4.     if(a.getAttribute("rel" ).indexOf("style" ) != -1 && a.getAttribute("title" )) {
  5.       a.disabled = true;
  6.       if(a.getAttribute("title" ) == title) a.disabled = false;
  7.     }
  8.   }
  9. }
  10. function getActiveStyleSheet() {
  11.   var i, a;
  12.   for(i=0; (a = document.getElementsByTagName("link" )[i]); i++) {
  13.     if(a.getAttribute("rel" ).indexOf("style" ) != -1 && a.getAttribute("title" ) && !a.disabled) return a.getAttribute("title" );
  14.   }
  15.   return null;
  16. }
  17. function getPreferredStyleSheet() {
  18.   var i, a;
  19.   for(i=0; (a = document.getElementsByTagName("link" )[i]); i++) {
  20.     if(a.getAttribute("rel" ).indexOf("style" ) != -1
  21.        && a.getAttribute("rel" ).indexOf("alt" ) == -1
  22.        && a.getAttribute("title" )
  23.        ) return a.getAttribute("title" );
  24.   }
  25.   return null;
  26. }
  27. function createCookie(name,value,days) {
  28.   if (days) {
  29.     var date = new Date();
  30.     date.setTime(date.getTime()+(days*24*60*60*1000));
  31.     var expires = "; expires="+date.toGMTString();
  32.   }
  33.   else expires = "";
  34.   document.cookie = name+"="+value+expires+"; path=/";
  35. }
  36. function readCookie(name) {
  37.   var nameEQ = name + "=";
  38.   var ca = document.cookie.split(';');
  39.   for(var i=0;i < ca.length;i++) {
  40.     var c = ca[i];
  41.     while (c.charAt(0)==' ') c = c.substring(1,c.length);
  42.     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  43.   }
  44.   return null;
  45. }
  46. window.onload = function(e) {
  47.   var cookie = readCookie("style" );
  48.   var title = cookie ? cookie : getPreferredStyleSheet();
  49.   setActiveStyleSheet(title);
  50. }
  51. window.onunload = function(e) {
  52.   var title = getActiveStyleSheet();
  53.   createCookie("style", title, 365);
  54. }
  55. var cookie = readCookie("style" );
  56. var title = cookie ? cookie : getPreferredStyleSheet();
  57. setActiveStyleSheet(title);


 


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 28-03-2010 à 03:01:20    

Le nom de ton style est stocké dans un cookie.
Le meme cookie est utilisé pour toute tes pages.
Quand tu es sur ta première série de pages, ca va écrire dans le cookie un des 4 premiers noms de style, qui forcément n'existe pas quand tu passe sur le second set de pages, et vice versa (puisque le premier set utilise 1,2,3,4 et le second 5,6,7,8).
Solution (yen a surement d'autres, et probablement des plus jolies!): tu dupliques ton fichier styleswitcher.js, et dans le duplicata au lieu de mettre "style" dans ton cookie (lignes 47, 53 et 55) tu mets "style2", et apres tu utilises le styleswitcher original dans tes pages "set 1" et le duplicata dans tes pages "set 2".

 

J'espère que c'est assez clair...

 

Edit: ma première solution est vraiment trop moche, pis elle va pas gérer les "correspondances" entre tes sets de styles, essaie ca plutot:
- assures toi que tous tes styles ont exactement le meme début de nom sauf pour le numéro (style_ dans ton cas), et qu'ils sont "groupés" correctement (si t'en as 4, le 4 du premier set doit matcher le 8 du second set etc)
- dans ton styleswitcher remplace la premère fonction en mettant les valeurs qui vont bien dans les deux premieres variables (c'est fait de tete donc bon si ca marche pas ramènes moi le message d'erreur...) :

Code :
  1. var nombreDeStylesQueTuAs = 4;
  2. var nomDeTesStylesAvantLeNumero = 'style_';
  3. function setActiveStyleSheet(title) {
  4.   var i, a, main;
  5.   var styleNumber = title.substring(nomDeTesStylesAvantLeNumero.length,title.length) - 0;
  6.   for(i=0; (a = document.getElementsByTagName("link" )[i]); i++) {
  7.     if(a.getAttribute("rel" ).indexOf("style" ) != -1 && a.getAttribute("title" )) {
  8.       a.disabled = true;
  9.       var existingStyleTitle = a.getAttribute("title" );
  10.       var existingStyleNumber = existingStyleTitle.substring(nomDeTesStylesAvantLeNumero.length,existingStyleTitle.length) - 0;
  11.       if(existingStyleNumber % nombreDeStylesQueTuAs == styleNumber % nombreDeStylesQueTuAs) a.disabled = false;
  12.     }
  13.   }
  14. }


Message édité par lasnoufle le 28-03-2010 à 03:21:33

---------------
C'était vraiment très intéressant.
Reply

Marsh Posté le 28-03-2010 à 14:52:27    

Salut, et tout d'abord merci pour ce beau script... :jap:  
 
Je viens donc de le mettre en ligne, avec les changements demandés (style_ -> style_monsite_)
 
Les changements entre répertoires fonctionnent bien. Par contre reste un petit probleme : je reste "scotché" sur le 4ème style.
Même si je clique sur l'un des autres...
 
 
 
Edit :  mes styles sont 8 (2x4), mais je les ai écrits 1,2,3 et 4 et 6,7,8 et 9 (j'ai volontairement zappé un "5" )
Ca peut avoir un rapport avec la remarque plus haut ?...
et qu'ils sont "groupés" correctement (si t'en as 4, le 4 du premier set doit matcher le 8 du second set etc)


Message édité par toum_toum le 28-03-2010 à 15:06:48

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 28-03-2010 à 15:47:15    

Oui, ca a un rapport. Mets 5 au lieu de 4 dans la variable nombreDeStylesQueTuAs au début du script, ca devrait passer, eg:

Code :
  1. var nombreDeStylesQueTuAs = 5;


---------------
C'était vraiment très intéressant.
Reply

Marsh Posté le 28-03-2010 à 16:00:13    


Je viens de faire le changement, et rien à faire ça reste bloqué sur les feuilles 4 et 9...
 
(A la limite, je peux rechanger les noms de mes feuilles de styles, pour aller de 1 à 8, en continu... Ce n'est pas un probleme..)
 
-----------------------
 
Edit :  non rien à faire, j'ai perdu mes 3 (ou 6) premieres feuilles de style avec ce script...


Message édité par toum_toum le 28-03-2010 à 16:09:09

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 28-03-2010 à 18:34:36    

Mh bizarre. Donc tant que tu changes entre 1-2-3 (ou 6-7-8) ca marche, mais une fois passé à 4 (ou 9) ca change plus?
Quand tu dis ca, c'est dans une meme page je suppose?

 

Edit: en fait en relisant tes messages c'est pas évident, pis c'est pas logique en fait, s'il y a un bug ca serait plutot "tu es toujours sur 4 ou 9 dès le départ" (en fait-> tous les styles sont activés et le dernier chargé est prioritaire, et pour une raison quelconque le script ne désactive jamais les styles). Quand tu dis que tu as changé tes noms de style de style_ à style_monsite_, t'as aussi changé la seconde ligne du script pour refléter ca? -> var nomDeTesStylesAvantLeNumero = 'style_monsite_';


Message édité par lasnoufle le 28-03-2010 à 18:45:08

---------------
C'était vraiment très intéressant.
Reply

Marsh Posté le 28-03-2010 à 19:13:51    


Donc tant que tu changes entre 1-2-3 (ou 6-7-8) ca marche, mais une fois passé à 4 (ou 9) ca change plus? : Non non...  Avec le changement effectué dans le script, je n'obtiens plus que, par défaut, le style 04 (ou le 08 si je change de rep et me retrouve avec le template 2). Ce sont les 2 seuls styles "en fonctionnement".
 
Normalement c'est le 01 et le 05 qui sont prioritaires, non le 04 ou 08...
 
 
"tu es toujours sur 4 ou 9 dès le départ" : voilà, c'est ça en effet...
 
 
"t'as aussi changé la seconde ligne du script pour refléter ca? -> var nomDeTesStylesAvantLeNumero = 'style_monsite_'" :  
Oui j'ai bien : var nomDeTesStylesAvantLeNumero = 'style_monsite_';
 


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 29-03-2010 à 18:25:22    

Bon j'suis en déplacement ca va etre plus chaud de t'aider... Le top ca serait que tu me mettes ton truc qui marche pas qqe part sur le net pour que j'aille voir direct.
 
Sinon on va l'faire à l'ancienne si personne d'autre trouve le piège... Remplace la fonction par ca et dis moi les popups que ca te remonte quand tu rafraichis ta page:

Code :
  1. var nombreDeStylesQueTuAs = 5;
  2. var nomDeTesStylesAvantLeNumero = 'style_monsite_';
  3. function setActiveStyleSheet(title) {
  4.    var i, a, main;
  5.    var styleNumber = title.substring(nomDeTesStylesAvantLeNumero.length,title.length) - 0;
  6.    for(i=0; (a = document.getElementsByTagName("link" )[i]); i++) {
  7.      alert('i: '+a.getAttribute("rel" ).indexOf("style" )+' '+a.getAttribute("title" ));
  8.      if(a.getAttribute("rel" ).indexOf("style" ) != -1 && a.getAttribute("title" )) {
  9.        a.disabled = true;
  10.        var existingStyleTitle = a.getAttribute("title" );
  11.        var existingStyleNumber = existingStyleTitle.substring(nomDeTesStylesAvantLeNumero.length,existingStyleTitle.length) - 0;
  12.        if(existingStyleNumber % nombreDeStylesQueTuAs == styleNumber % nombreDeStylesQueTuAs) a.disabled = false;
  13.      }
  14.    }
  15. }


---------------
C'était vraiment très intéressant.
Reply

Marsh Posté le 29-03-2010 à 19:09:49    

Ca me fait :
 
 i: 0 style_01
 i: 10 style_02
 i: 10 style_03
 i: 10 style_04
 
 
(Je t'envoie un mp...)


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 29-03-2010 à 21:01:41    


Résolu :)  : un grand merci à Lasnoufle et Bixibu :jap:  :jap:  :jap:


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed