Aller au contenu


Photo

Javascript : StyleSwitcher


  • Please log in to reply
6 replies to this topic

#1 BorakLeRouge

BorakLeRouge

    Hamster d'or (dort ?)

  • Membres
  • PipPipPipPipPipPipPip
  • 3 950 Messages :
  • Configuration:Mac Mini Core i7 - 16Go - 2To Hybride
  • Sexe:Masculin
  • Localisation:Cormeilles en Parisis.rb
  • Passions:Macintosh, Photo, Haute-fidélité, Ski, Roller, Call of Duty, Tactical Ops, Counter Strike, Worms 1

Posté 23 octobre 2011 - 19:37

Coucou,

J'utilise un "StyleSwitcher" en Javascript sur ma page pour pouvoir changer de style à la volée.

Seulement depuis quelques temps, ca ne marche plus sur un navigateur (perdu, ce n'est pas "Exphorreur", c'est "Safari" qui bugge).

J'ai fini par trouver une solution perso :
Pour rappel, on place les style de la manière suivante :
<link href="style1.css" title="Alternatif 1" type="text/css" rel="stylesheet" />
<link href="style2.css" title="Alternatif 2" type="text/css" rel="alternate stylesheet" />
<link href="style3.css" title="Alternatif 3" type="text/css" rel="alternate stylesheet" />
<link href="style4.css" title="Alternatif 4" type="text/css" rel="alternate stylesheet" />
<link href="style5.css" title="Alternatif 5" type="text/css" rel="alternate stylesheet" />
Le premier étant le défaut (rel="stylesheet"), les suivants les alternatifs.

Et voila mon script pour changer de style (avec sauvegarde dans un cookie) :
// Auteur : Mathieu Fay
// Adaptation perso pour bug Safari
// ------------------------------------------------------
var swctobj 	= null ;
var swcttabtitl = new Array() ;
var swcttabhref = new Array() ;
function setActiveStyleSheet(title) 
{ ecritCookie(title);
 var i, a, href;
 var swcti = -1 ; 
 if (swctobj == null)
 { for(i=0; (a = document.getElementsByTagName("link")[i]); i++)
 	{ if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title"))
 	{ a.disabled = true ;
 	swcti++ ;
 	swcttabtitl[swcti] = a.title ;
 	swcttabhref[swcti] = a.href ; 	
 	if(a.title == title)
 	{ href = a.href ;
 	} } } 
 	var parent = document.getElementsByTagName("head")[0]
 	swctobj = document.createElement("link") ;
 	swctobj.setAttribute("type", "text/css") ; 
 	swctobj.setAttribute("rel", "stylesheet") ; 
 	swctobj.href = href ;
 	parent.appendChild(swctobj)
 }
 else
 { for(i in swcttabtitl)
 	{ if (swcttabtitl[i] == title)
 	{ swctobj.href = swcttabhref[i] ; 
} } } }

// Ecriture du COOKIE pour 5 ans
// -----------------------------

function ecritCookie(NomStyle) 
{ var expires = new Date();
 expires.setTime(expires.getTime()+(5*365*24*3600*1000));
 document.cookie = 'FeuilleStyleMfay=' + NomStyle + '; expires=' + expires.toGMTString();
}


// Recuperation du COOKIE, est appele en premier dans la page
// ----------------------------------------------------------
function recupCookie()
{ if(document.cookie != '')
 { var cookies = document.cookie.split(/; */);
 	for(var i=0; i < cookies.length; i++)
 	{ cookies[i] = cookies[i].split(/=/);
 	if(cookies[i][0] == 'FeuilleStyleMfay')
 	{ setActiveStyleSheet(cookies[i][1]) ;
} } } }
recupCookie();


Et voici un exemple : http://boraklerouge....t/StyleSwitcher

(Les liens OLD sont l'ancienne solution qui coincent sur Safari).

Ce message a été modifié par BorakLeRouge - 23 octobre 2011 - 19:56 .

Je fais mes sauvegardes sur NSA-Cloud !

Au bout de 10 ans, le vieux MacPro vient de laisser sa place à un MacMini i7...


#2 FredoMkb

FredoMkb

    ...bosseigne...

  • Membres
  • PipPipPipPipPipPipPip
  • 2 645 Messages :
  • Configuration:iMac-SowLeopard
  • Sexe:Masculin
  • Localisation:StÉ
  • Passions:À part rien, absolument tout le reste !

Posté 24 octobre 2011 - 17:52

Salut Borak :)

Ton script est pas mal, mais je trouve que tu t'es un peu compliqué là vie, car perso, j'avais trouvé un truc beaucoup plus simple (déniché sur le web, j'ai juste personnalisé les noms), certes, il pose néanmoins le soucis d'un petit temps de latences lors du chargement de feuilles de style un peu volumineuses, mais cela évite par ailleurs d'envoyer beaucoup d'informations "inutiles" au navigateur, car, charger en mémoire 3 ou 4 feuilles de style (voire d'avantage) qui ne seront peut-être pas utilisées au final par les visiteurs, c'est un peu dommage je trouve.

Voici la solution que j'avais utilisé :

- Head
<link href="style_1.css" type="text/css" rel="stylesheet" media="all" id="swisty_css" />
<script type='text/javascript'><!--
function f_swisty(sId, sStyle) {
	document.getElementById(sId).href = sStyle + '.css';
}
--></script>

- Body
<a href="#" title="#" onclick="f_swisty('swisty_css', 'style_1'); return false;">Style 1</a> - 
<a href="#" title="#" onclick="f_swisty('swisty_css', 'style_2'); return false;">Style 2</a> - 
<a href="#" title="#" onclick="f_swisty('swisty_css', 'style_3'); return false;">Style 3</a> - 

Pour la partie "cookies", rien à dire... :P

;)
Fredo
"Un pas à la fois me suffit..." Gandhi
"Il n'y a rien de plus inutile que quelque chose d'inexistant. Il n'y a rien de plus utile que de tenter de le créer." FredoMkb

#3 BorakLeRouge

BorakLeRouge

    Hamster d'or (dort ?)

  • Membres
  • PipPipPipPipPipPipPip
  • 3 950 Messages :
  • Configuration:Mac Mini Core i7 - 16Go - 2To Hybride
  • Sexe:Masculin
  • Localisation:Cormeilles en Parisis.rb
  • Passions:Macintosh, Photo, Haute-fidélité, Ski, Roller, Call of Duty, Tactical Ops, Counter Strike, Worms 1

Posté 24 octobre 2011 - 18:12

Intéressant, faut que je teste ce soir.

Défaut, dans ce cas, la liste des Styles n'apparait pas dans le menu "Style de la Page" de FireFox (ben oui, ça existe :) ).

Je fais mes sauvegardes sur NSA-Cloud !

Au bout de 10 ans, le vieux MacPro vient de laisser sa place à un MacMini i7...


#4 FredoMkb

FredoMkb

    ...bosseigne...

  • Membres
  • PipPipPipPipPipPipPip
  • 2 645 Messages :
  • Configuration:iMac-SowLeopard
  • Sexe:Masculin
  • Localisation:StÉ
  • Passions:À part rien, absolument tout le reste !

Posté 24 octobre 2011 - 18:40

Défaut, dans ce cas, la liste des Styles n'apparait pas dans le menu "Style de la Page" de FireFox (ben oui, ça existe :) ).

C'est vrai... mais, entre nous, combien d'utilisateurs de Firefox connaissent même l'existence de cette option ? :huh:

Et puis, si tu proposes un mécanisme de changement de style directement dans la page Html, l'utilisateur n'aura plus besoin de passer par le menu "Style de la Page" de FireFox...

Bon, après, c'est juste une histoire de choix personnel, tant que ça marche, les deux méthodes se valent je pense... ;)

Ce message a été modifié par Fredo d:o) - 24 octobre 2011 - 18:58 .

Fredo
"Un pas à la fois me suffit..." Gandhi
"Il n'y a rien de plus inutile que quelque chose d'inexistant. Il n'y a rien de plus utile que de tenter de le créer." FredoMkb

#5 BorakLeRouge

BorakLeRouge

    Hamster d'or (dort ?)

  • Membres
  • PipPipPipPipPipPipPip
  • 3 950 Messages :
  • Configuration:Mac Mini Core i7 - 16Go - 2To Hybride
  • Sexe:Masculin
  • Localisation:Cormeilles en Parisis.rb
  • Passions:Macintosh, Photo, Haute-fidélité, Ski, Roller, Call of Duty, Tactical Ops, Counter Strike, Worms 1

Posté 24 octobre 2011 - 20:24

Je sais, mais il fallait bien que je trouve un truc pour ma méthode.

Moi aussi, j'avais déniché la base sur le web. Seulement cette cochonnerie de Safari me l'avait cassé :)

Sinon, ta version avec du cookie et un paramètre en moins. (Adopté, j'ai bien fait de poster). C'est vrai que plus c'est simple, mieux c'est (moins de risque de bug).

// Auteur : Freddo d:o)
// ------------------------------------------------------
function f_swisty(sStyle)
{ document.getElementById('swisty').href = sStyle + '.css' ;
 ecritCookie(sStyle) ;
}

// Ecriture du COOKIE pour 5 ans
// -----------------------------

function ecritCookie(NomStyle) 
{ var expires = new Date();
 expires.setTime(expires.getTime()+(5*365*24*3600*1000));
 document.cookie = 'FeuilleStyleFddo=' + NomStyle + '; expires=' + expires.toGMTString();
}


// Recuperation du COOKIE, est appele en premier dans la page
// ----------------------------------------------------------
function recupCookie()
{ if(document.cookie != '')
 { var cookies = document.cookie.split(/; */);
 	for(var i=0; i < cookies.length; i++)
 	{ cookies[i] = cookies[i].split(/=/);
 	if(cookies[i][0] == 'FeuilleStyleFddo')
 	{ swisty(cookies[i][1]) ;
} } } }
recupCookie();

Et la partie HTML - HEAD:
<link href="style1.css" type="text/css" rel="stylesheet" id="swisty" />
 <script type="text/javascript" src="styleswitchercookieFreddo.js"></script>
La partie HTML - LIEN :
<ul>
<li><a href="javascript:f_swisty('style1')">Style 1</a>
<li><a href="javascript:f_swisty('style2')">Style 2</a>
<li><a href="javascript:f_swisty('style3')">Style 3</a>
<li><a href="javascript:f_swisty('style4')">Style 4</a>
<li><a href="javascript:f_swisty('style5')">Style 5</a>
</ul>

Ce message a été modifié par BorakLeRouge - 24 octobre 2011 - 20:27 .

Je fais mes sauvegardes sur NSA-Cloud !

Au bout de 10 ans, le vieux MacPro vient de laisser sa place à un MacMini i7...


#6 FredoMkb

FredoMkb

    ...bosseigne...

  • Membres
  • PipPipPipPipPipPipPip
  • 2 645 Messages :
  • Configuration:iMac-SowLeopard
  • Sexe:Masculin
  • Localisation:StÉ
  • Passions:À part rien, absolument tout le reste !

Posté 25 octobre 2011 - 02:55

Nickel je trouve ! :up:

Sinon, honnêtement, tu peux enlever la partie "Auteur", ou mettre tout simplement ton pseudo, car je ne suis pas réellement l'auteur de ce code, et je serais incapable de te dire où j'ai pu le trouver (ça fait un moment en plus)...

Question, pourquoi tu écris les "cookies" pour une durée de 5 ans ? :blink:

Il me semble avoir vu sur le Web une astuce assez simple pour rendre les "cookies" éternels... si je la retrouve je t'en ferai part...

;)
Fredo
"Un pas à la fois me suffit..." Gandhi
"Il n'y a rien de plus inutile que quelque chose d'inexistant. Il n'y a rien de plus utile que de tenter de le créer." FredoMkb

#7 BorakLeRouge

BorakLeRouge

    Hamster d'or (dort ?)

  • Membres
  • PipPipPipPipPipPipPip
  • 3 950 Messages :
  • Configuration:Mac Mini Core i7 - 16Go - 2To Hybride
  • Sexe:Masculin
  • Localisation:Cormeilles en Parisis.rb
  • Passions:Macintosh, Photo, Haute-fidélité, Ski, Roller, Call of Duty, Tactical Ops, Counter Strike, Worms 1

Posté 25 octobre 2011 - 09:32

OK :)

Pourquoi 5 ans, ça me paraissait bien à l'époque.

Mais en fait c'est trop, a chaque fois qu'il réaffiche la page (donc un style) le cookie est réactivé.

Je fais mes sauvegardes sur NSA-Cloud !

Au bout de 10 ans, le vieux MacPro vient de laisser sa place à un MacMini i7...





1 utilisateur(s) en train de lire ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)