Passez des boutons à une liste déroulantes avec du JS dedans

Sujet résolu

27 novembre 2011 à 7:59:32

Bonjour !

J'ai trouvé un script (Javascript) sur ce site, qui permet de changer une feuille de style en cascade (CSS) ou plutôt permettre au visiteur de changer le thème de mon site.

Voici les codes :

<link rel="stylesheet" type="text/css" title="blue"
    href="http://example.com/css/blue.css">
<link rel="alternate stylesheet" type="text/css" title="pink"
    href="http://example.com/css/pink.css">

<form>
<input type="submit"
  onclick="switch_style('blue');return false;"
  name="theme" value="Blue Theme" id="blue">
<input type="submit"
  onclick="switch_style('pink');return false;"
  name="theme" value="Pink Theme" id="pink">
</form>

// *** TO BE CUSTOMISED ***

var style_cookie_name = "style" ;
var style_cookie_duration = 30 ;

// *** END OF CUSTOMISABLE SECTION ***

function switch_style ( css_title )
{
// You may use this script on your site free of charge provided
// you do not remove this notice or the URL below. Script from
// http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
  var i, link_tag ;
  for (i = 0, link_tag = document.getElementsByTagName("link") ;
    i < link_tag.length ; i++ ) {
    if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
      link_tag[i].title) {
      link_tag[i].disabled = true ;
      if (link_tag[i].title == css_title) {
        link_tag[i].disabled = false ;
      }
    }
    set_cookie( style_cookie_name, css_title,
      style_cookie_duration );
  }
}
function set_style_from_cookie()
{
  var css_title = get_cookie( style_cookie_name );
  if (css_title.length) {
    switch_style( css_title );
  }
}
function set_cookie ( cookie_name, cookie_value,
    lifespan_in_days, valid_domain )
{
    // http://www.thesitewizard.com/javascripts/cookies.shtml
    var domain_string = valid_domain ?
                       ("; domain=" + valid_domain) : '' ;
    document.cookie = cookie_name +
                       "=" + encodeURIComponent( cookie_value ) +
                       "; max-age=" + 60 * 60 *
                       24 * lifespan_in_days +
                       "; path=/" + domain_string ;
}
function get_cookie ( cookie_name )
{
    // http://www.thesitewizard.com/javascripts/cookies.shtml
    var cookie_string = document.cookie ;
    if (cookie_string.length != 0) {
        var cookie_value = cookie_string.match (
                        '(^|;)[\s]*' +
                        cookie_name +
                        '=([^;]*)' );
        return decodeURIComponent ( cookie_value[2] ) ;
    }
    return '' ;
}

Le script fonctionne parfaitement mais j'aimerais au lieu d'avoir des boutons pour le code HTML, avoir une liste déroulante.

J'ai essayé plusieurs fois mais je n'arrive pas à faire fonctionner.

Merci d'avance.

rom117

27 novembre 2011 à 10:59:40

Bonjour,

Qu'est-ce qui ne marche pas exactement ?
Peux-tu nous montrer ton code avec ta liste déroulante.

Romain

Crcl

27 novembre 2011 à 15:01:56

En faite je ne sais pas comment passez des boutons à la liste déroulante.

En clair dans ce code html qui me permet de fournir un moyen pour mes utilisateurs de choisir le thème :

<form>
<input type="submit"
  onclick="switch_style('blue');return false;"
  name="theme" value="Blue Theme" id="blue">
<input type="submit"
  onclick="switch_style('pink');return false;"
  name="theme" value="Pink Theme" id="pink">
</form>

Je voudrais changer les boutons radio en liste déroulante de sélection mais le problème c'est que je ne sais pas quel code Javascript pour que ça fonctionne.

Par exemple :

<form>
<label>Changer de thème :</label><br />
<select name="theme">
  <option value="theme1">Classique</option>
  <option value="theme2">Alternative</option>
</select>
</form>

Il faut placer quoi comme code javascript en plus de la feuille en .js (donner plus haut).

Sur ce site, on me dit que c'est possible mais je n'arrive pas.

rom117

27 novembre 2011 à 15:26:11

Essaie ça (j'ai changé le rose car j'aime pas le rose

) :

<link rel="stylesheet" type="text/css" title="blue" href="blue.css">
<link rel="alternate stylesheet" type="text/css" title="green" href="green.css">
    
<script type="text/javascript" src="javascript.js"></script>
    
<body>
	<form>
		<select id="ddl" name="theme">
		  <option value="blue">Classique</option>
		  <option value="green">Alternative</option>
		</select>
	</form>
</body>

<script type="text/javascript">

var selectmenu=document.getElementById("ddl");
selectmenu.onchange=function()
{ 
	//run some code when "onchange" event fires
	//alert(this.options[this.selectedIndex]);
	switch_style(this.options[this.selectedIndex].value);
}

</script>

blue.css

body
{
	background-color: blue;
}

green.css

body
{
	background-color: green;
}

Romain

Crcl

28 novembre 2011 à 11:15:16

Moi non plus je n'aime pas le rose mais c'était juste un exemple qui était donné.

Merci de ton aide, ça fonctionne parfaitement maintenant

Je ne n'ai pas appris le Javascript mais j'aime bien utiliser quelques scripts pour mon site (jQuery...).

Edit : Par contre, j'ai remarquer avec ce code, que dans le navigateur Google Chrome, le choix du thème ne reste pas quand on ferme la fenêtre et qu'on le réouvre. Avec l'ancien code, il n'y avait pas ce problème.

rom117

28 novembre 2011 à 14:05:33

Euh aucune idée étant donné que j'ai rien changé au code javascript.

Edit: Le problème doit venir de la gestion des cookies mais je ne connais pas ce domaine.

Crcl

28 novembre 2011 à 15:16:20

Merci quand même de ton aide !