Discussion :

[dragonfly]

Bonjour à tous,

je viens vers vous car lors que je recharge une page CSS via Javascript, celle-ci se charge mais entre le temps ou je clique sur le bouton pour recharger et celui ou la feuille CSS se recharge, tous les styles de cette feuille de style disparaissent.
Ce qui au final fait assez "bizarre".

Pour voir plus clairement de quoi je parle, voir mon site => Lorsque vous cliquez en bas à gauche pour changer de style.

Voici mon code de changement de style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
	// Fonction permattant de reloader la feuille de style CSS
	// ficCss => Nom du fichier à recharger
	this.reloadCSS = function(ficCss) {
	  var i,a,s;
	  a=document.getElementsByTagName('link');
	  for(i=0;i<a.length;i++) {
		  s=a[i];
		  if(s.rel.toLowerCase().indexOf('stylesheet')>=0 && s.href.match(ficCss)) {
			  var h=s.href.replace(/(&|\\?)forceReload=d /,'');
			  s.href=h+(h.indexOf('?')>=0?'&':'?')+'forceReload='+(new Date().valueOf());
		  }
	  }
	}

En fait je voudrais juste savoir si il est possible de forcer l'ancien style à rester jusqu'au moment ou il est totalement rechargé.

P.S : Si c'est possible de le faire via JQuery ou prototype, cela ne me dérange pas

Par avance.
Merci

[scourjean]

Peut etre ici :
http://www.kelvinluck.com/assets/jquery/styleswitch/

[Bovino]

A mon sens, tu devrais plutôt créer la nouvelle balise link, attendre le load, puis remplacer l'ancienne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var oldCSS = document.getElementsByTagName('link')[0];
var newCSS = document.createElement('link');
newCSS.rel = 'stylesheet';
newCSS.type = 'text/css';
newCSS.onload = function(){
    oldCSS.parentNode.replaceChild(newCSS,oldCSS);
}
newCSS.src = 'newCSS.css';

à adapter bien sûr à ton code

[dragonfly]

Bonjour,

merci pour vos réponses.

scroujean, j'ai regardé ton lien mais la solution ne me conviens pas (je veux vraiment recharger la feuille CSS), à moins que je soit passé a côté de quelque chose (Le fait de créer un cookie pour recharger une page me semble space...).

Bovino, je vais essayer de mettre tout ca en place ce midi et je revient aux nouvelles.

Cordialement

[dragonfly]

Re,

Bovino, j'ai essayé ta méthode mais rien ne se passe.
Une question, le CSS se recharge quand avec ta méthode? Au rechargement de la page?
Parce que c'est ce que je veux éviter, recharger la page.

En fait pour faire simple, ma CSS à recharger à des valeurs qui dépendent de variable de session PHP.
Lorsque je clique sur le changement de style il y'a appel ajax via une div invisible, dans cette div, je modifie la valeur des variables de session et pour que ces nouvelles valeurs soient prises en compte je recharge uniquement la feuille de style (c.f comme sur mon site).

Mais avec ton exemple j'ai l'impression que le CSS se rajoute au rechargement de la page.

Pour info j'ai fait ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
	this.reloadCSS = function(ficCss) {
	  var i,a,s;
	  a=document.getElementsByTagName('link');
	  for(i=0;i<a.length;i++) {
		  s=a[i];
		  if(s.rel.toLowerCase().indexOf('stylesheet')>=0 && s.href.match(ficCss)) {
                              var oldCSS = s;
                              var newCSS = document.createElement('link');
                              newCSS.rel = 'stylesheet';
                              newCSS.type = 'text/css';
                              newCSS.onload = function(){
                                     oldCSS.parentNode.replaceChild(newCSS,oldCSS);
                               }
                              newCSS.src = s.href;
		  }
	  }
	}

aprés j'ai peut être oublié un truc

[Bovino]

Arf...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

newCSS.href = s.href;

[dragonfly]

Même en mettant newCSS.href, rien ne se passe...

[Bovino]

A vrai dire, il y a un truc qui me chiffonne un peu dans ton code...
Si je comprends bien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

s=a[i];

puis

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var oldCSS = s;

donc sauf erreur de ma part, oldCSS correspond à la feuille de style actuelle.
Or quand tu fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

newCSS.href= s.href;

tu cherches donc à remplacer la feuille de style actuelle par... la feuille de style actuelle

Du coup, c'est un peu normal que rien ne change ! re-

[dragonfly]

En fait, c'est normal, je cherche juste à recharger ma feuille de style.
Elle se compose ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<?php
header('content-type: text/css' );
session_start();
?>
body{background-color: <?php echo($_SESSION['body']['bcolor']);?>;}
input{
	background-color: <?php echo($_SESSION['input']['bground']);?>;
	color:<?php echo($_SESSION['input']['text']);?>;
}
span{color:<?php echo($_SESSION['text']['affi']);?>;}
a{color:<?php echo($_SESSION['titre']['text']);?>;}
.obligatoire{background-color:<?php echo($_SESSION['obli']['bgroundKO']);?>;}
.ok{background-color:<?php echo($_SESSION['obli']['bgroundOK']);?>;}
.textOk{color:<?php echo($_SESSION['text']['ok']);?>;}
.textErreur{color:<?php echo($_SESSION['text']['erreur']);?>;}
...

En fait, je la recharge pour prendre en compte le fait que les variables de sessions changent (remarque qu'avec mon ancienne méthode cela fonctionne mais le temps du chargement se fait sans cette feuille de style)