the cursed 7th style...

**pablete** · 09-28-2008, 05:48 PM

1) Script Title: Style Sheet Switcher (v1.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...etswitcher.htm

3) Describe problem:
hi guys, first of all, I have to say this is the best and easiest styles switcher script I've come across; I know almost nothing about css, xhtml and javascript programming, but I got it working in a few hours.
Now, I've tried to search for my problem in the forum but I didn't find it, so here it goes: the thing is everything works fine in IExplorer as long as I only create SIX styles (the default one, plus 5 more). When I create another one, Explorer just ignores it and if selected, switches directly to the default one.
The ignored style in Explorer is always the last written in the code (the one written just before the script)
In Firefox, Opera, Chrome and Safari, the 7th style works just fine. Weird, isn't it?
any ideas guys? I really appreciate your help
Pablo

**pablete** · 09-28-2008, 06:24 PM

ok, sorry, I think I should have copied the code so you could have a look... here it is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>the Mental Room. A Mental Ray and Maya Experience</title>
<meta name="keywords" content="mental ray, autodesk maya, mental images, 3d, fx" />



<!-- este es un parchecillo para arreglar la transparencia de los png en el Explorer 6 e inferiores-->
<style type="text/css">
img, div { behavior: url(/trfix/iepngfix.htc) }
</style>
<!--este es un parchecillo para arreglar la transparencia de los png en el Explorer 6 e inferiores -->

<link href="css/swapflags.css" rel="stylesheet" type="text/css" />

<link href="css/blueCSS/blue_style.css" rel="stylesheet" type="text/css"title="blue" />
<link href="css/blueCSS/bluelanguage.css" rel="stylesheet" type="text/css"title="blue" />
<link href="css/blueCSS/blue_style.css" rel="stylesheet" type="text/css"title="blue" />
<link href="css/blueCSS/stylesmenublue.css" rel="stylesheet" type="text/css"title="blue" />
<link href="css/blueCSS/bluelanguage.css" rel="stylesheet" type="text/css"title="blue" />


<link href="css/greenCSS/green_style.css" rel="alternate stylesheet" type="text/css"title="green" />
<link href="css/greenCSS/greenlanguage.css" rel="alternate stylesheet" type="text/css" title="green" />
<link href="css/greenCSS/green_style.css" rel="alternate stylesheet" type="text/css"title="green" />
<link href="css/greenCSS/stylesmenugreen.css" rel="alternate stylesheet" type="text/css"title="green" />
<link href="css/greenCSS/greenlanguage.css" rel="alternate stylesheet" type="text/css"title="green" />


<link href="css/whiteCSS/white_style.css" rel="alternate stylesheet" type="text/css"title="white" />
<link href="css/whiteCSS/whitelanguage.css" rel="alternate stylesheet" type="text/css" title="white" />
<link href="css/whiteCSS/white_style.css" rel="alternate stylesheet" type="text/css"title="white" />
<link href="css/whiteCSS/stylesmenuwhite.css" rel="alternate stylesheet" type="text/css"title="white" />
<link href="css/whiteCSS/whitelanguage.css" rel="alternate stylesheet" type="text/css"title="white" />


<link href="css/blackCSS/black_style.css" rel="alternate stylesheet" type="text/css"title="black" />
<link href="css/blackCSS/blacklanguage.css" rel="alternate stylesheet" type="text/css" title="black" />
<link href="css/blackCSS/black_style.css" rel="alternate stylesheet" type="text/css"title="black" />
<link href="css/blackCSS/stylesmenublack.css" rel="alternate stylesheet" type="text/css"title="black" />
<link href="css/blackCSS/blacklanguage.css" rel="alternate stylesheet" type="text/css"title="black" />


<link href="css/purpleCSS/purple_style.css" rel="alternate stylesheet" type="text/css"title="purple" />
<link href="css/purpleCSS/purplelanguage.css" rel="alternate stylesheet" type="text/css" title="purple" />
<link href="css/purpleCSS/purple_style.css" rel="alternate stylesheet" type="text/css"title="purple" />
<link href="css/purpleCSS/stylesmenupurple.css" rel="alternate stylesheet" type="text/css"title="purple" />
<link href="css/purpleCSS/purplelanguage.css" rel="alternate stylesheet" type="text/css"title="purple" />


<link href="css/orangeCSS/orange_style.css" rel="alternate stylesheet" type="text/css"title="orange" />
<link href="css/orangeCSS/orangelanguage.css" rel="alternate stylesheet" type="text/css" title="orange" />
<link href="css/orangeCSS/orange_style.css" rel="alternate stylesheet" type="text/css"title="orange" />
<link href="css/orangeCSS/stylesmenuorange.css" rel="alternate stylesheet" type="text/css"title="orange" />
<link href="css/orangeCSS/orangelanguage.css" rel="alternate stylesheet" type="text/css"title="orange" />


<link href="css/redCSS/red_style.css" rel="alternate stylesheet" type="text/css"title="red" />
<link href="css/redCSS/redlanguage.css" rel="alternate stylesheet" type="text/css" title="red" />
<link href="css/redCSS/red_style.css" rel="alternate stylesheet" type="text/css"title="red" />
<link href="css/redCSS/stylesmenured.css" rel="alternate stylesheet" type="text/css"title="red" />
<link href="css/redCSS/redlanguage.css" rel="alternate stylesheet" type="text/css"title="red" />



<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<script src="js/styleswitch.js" type="text/javascript">
/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

</head>

<body>

<div id="container">
  <p>&nbsp;</p>
  <div id="logomain"></div>
  <p>&nbsp;</p>
  
  <p>&nbsp;</p>
</div>

<div id="language">
  <h3><a href="es/index.html">¡Llévame ya a la Habitación Mental!</a>  | <a href="en/index.html">Take me right to the Mental Room!</a></h3>
  
</div>





<div id="flags"><div id="flagplace"><img src="images/flagsbuttons/buttonflagsEN.png" alt="English" name="engg" width="124" height="44" id="engg" /><img src="images/flagsbuttons/buttonflagsES.png" alt="Castellano" name="castt" width="124" height="44" id="castt" /><img src="images/flagsbuttons/buttonflags.png" alt="Sepia" name="idioma_language" width="124" height="44" border="0" usemap="#sepiaMap" id="idioma_language" />
<map name="sepiaMap" id="sepiaMap">
  <area shape="rect" coords="63,8,116,38" href="en/index.html" alt="English" onmouseover="MM_swapImage('idioma_language','','images/flagsbuttons/buttonflagsEN.png',1)" onmouseout="MM_swapImgRestore()" />
  <area shape="rect" coords="5,9,53,37" href="es/index.html" alt="Castellano" onmouseover="MM_swapImage('idioma_language','','images/flagsbuttons/buttonflagsES.png',1)" onmouseout="MM_swapImgRestore()" />
</map></div></div>
<div id="pdmstyles2"><form id="switchform">
<select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)">
<option value="none"selected>Elige esquema de color</option>
<option value="none">------------</option>

<option value="blue">azul básico</option>
<option value="white">cirugía alienígena</option>
<option value="green">dibujos animados</option>
<option value="black">etiqueta</option>
<option value="purple">Noveno Infierno</option>
<option value="orange">pulpa de naranja</option>
<option value="red">tengo miedo, Lola</option>
</select>

</form>
</div>




<div id="pdmstyles"><form id="switchform">
<select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)">
<option value="none"selected>Choose color scheme</option>
<option value="none">------------</option>
<option value="blue">a sketchy blue</option>
<option value="white">alien surgery</option>
<option value="green">cartoony greenpink</option>
<option value="black">etiquette</option>
<option value="red">I am scared, Lola</option>
<option value="purple">Ninth Underworld</option>
<option value="orange">orange pulp</option>
</select>
</form>
</div>

</div>

<p>&nbsp;</p>
</body>
</html>

the problem here is in the red style, but if I take the five lines of code about the red style and swap them with, for instance, the orange code 5 lines, the color scheme ignored would be the orange. Hope I've made myself clear, it's somewhat confusing even for me (I mean, specially for me, newbie of the newbies)...
thanks for your help...

**pablete** · 09-29-2008, 08:12 PM

any ideas? I'm completely lost. I tried yet another style (the 8th) and Explorer ignores it too, but it works fine in all the other browsers. It looks as if Explorer would stop reading the code once it reaches the 7th style... Maybe I could try another switcher but this one is sooo easy that it sends shivers down my spine just to think about configuring another one...
any suggestion is really appreciated

**ddadmin** · 09-30-2008, 06:18 PM

It definitely shouldn't matter how many alternate stylesheets you're switching in IE- it should work just the same. Looking at your code above, there seems to be some errors with the way you're defining your <link> elements. For example:

Code:

<link href="css/blueCSS/blue_style.css" rel="stylesheet" type="text/css"title="blue" />
<link href="css/blueCSS/bluelanguage.css" rel="stylesheet" type="text/css"title="blue" />
<link href="css/blueCSS/blue_style.css" rel="stylesheet" type="text/css"title="blue" />
<link href="css/blueCSS/stylesmenublue.css" rel="stylesheet" type="text/css"title="blue" />
<link href="css/blueCSS/bluelanguage.css" rel="stylesheet" type="text/css"title="blue" />


<link href="css/greenCSS/green_style.css" rel="alternate stylesheet" type="text/css"title="green" />
<link href="css/greenCSS/greenlanguage.css" rel="alternate stylesheet" type="text/css" title="green" />
<link href="css/greenCSS/green_style.css" rel="alternate stylesheet" type="text/css"title="green" />
<link href="css/greenCSS/stylesmenugreen.css" rel="alternate stylesheet" type="text/css"title="green" />
<link href="css/greenCSS/greenlanguage.css" rel="alternate stylesheet" type="text/css"title="green" />

Note the two sample errors highlighted in red. First, there should be a space between the type attribute and the title attribute. Secondly, the title attribute value should be unique for each <link> element, as that value uniquely identifies that <link> element. Right now you have groups of <link> sharing the same title value, such as "green", or "blue".

FYI here's a full, working example of a page switching between 7 alternate stylesheets that works in IE upon testing:

Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="1-theme" href="user.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="2-theme" href="user2.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="3-theme" href="user3.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="4-theme" href="user4.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="5-theme" href="user5.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="6-theme" href="user6.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="7-theme" href="user7.css" />

<script src="styleswitch.js" type="text/javascript">
/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
</head>

<body>
<form id="switchform">
<input type="radio" name="choice" value="none" onClick="chooseStyle(this.value, 60)">Default style<br />
<input type="radio" name="choice" value="1-theme" onClick="chooseStyle(this.value, 60)">1 Theme<br />
<input type="radio" name="choice" value="2-theme" onClick="chooseStyle(this.value, 60)">2 Theme<br />
<input type="radio" name="choice" value="3-theme" onClick="chooseStyle(this.value, 60)">3 Theme<br />
<input type="radio" name="choice" value="4-theme" onClick="chooseStyle(this.value, 60)">4 Theme<br />
<input type="radio" name="choice" value="5-theme" onClick="chooseStyle(this.value, 60)">5 Theme<br />
<input type="radio" name="choice" value="6-theme" onClick="chooseStyle(this.value, 60)">6 Theme<br />
<input type="radio" name="choice" value="7-theme" onClick="chooseStyle(this.value, 60)">7 Theme<br />
</form>
// Rest of body here
</body>
</html>

**pablete** · 09-30-2008, 06:54 PM

thanks a lot for your reply ddadmin.
I tried the spaces between the type and the title attribute but everything stays the same, IE only recognizes the first 6 styles, which is really weird for it switches perfectly between those 6 styles.
Regarding the shared title value, I don't know what to do, because I've made several style sheets for every color scheme (as a beginner, I find it more manageable than having just one long style sheet). Should I make one big style sheet for each color scheme then? or is there any way to group all the style sheets in one, which name I should put then in the title attribute? Sorry if it sounds too newbie, but that's really what it is

thanks in advance
pablo

**ddadmin** · 09-30-2008, 08:10 PM

Another potential error I spotted within your CSS code:

Code:

<link href="css/blueCSS/blue_style.css" rel="stylesheet" type="text/css"title="blue" />
<link href="css/blueCSS/bluelanguage.css" rel="stylesheet" type="text/css"title="blue" />
<link href="css/blueCSS/blue_style.css" rel="stylesheet" type="text/css"title="blue" />
<link href="css/blueCSS/stylesmenublue.css" rel="stylesheet" type="text/css"title="blue" />
<link href="css/blueCSS/bluelanguage.css" rel="stylesheet" type="text/css"title="blue" />

With the above, you're giving all <link> elements a rel="stylesheet" definition. This means every one of them will be applied to the page when it loads, instead of letting the user choose between them. Is that what you had in mind? If you want certain <link> to be alternate styles, they must carry the rel="alternate stylesheet" definition instead.

Regarding the shared title value, I don't know what to do, because I've made several style sheets for every color scheme (as a beginner, I find it more manageable than having just one long style sheet). Should I make one big style sheet for each color scheme then?

Nope, it's fine to separate each alternate style into its own file as you have done. It's probably the best way as well. The point is just that you need to give each corresponding alternate <link> a unique title attribute, such as "blue1", "blue2", etc. Like the ID attribute of an element, these values need to be unique in order for the script to uniquely identify every alternate stylesheet on the page.

**pablete** · 09-30-2008, 08:45 PM

thanks again ddadmin.
It won't work though. I tried to give each link tag a different name but when selecting the color scheme (in the drop down menu), it only switches the style sheet set in the "option value" (I guess I have to modify it but I really don't know how). Can I set several names in the option value? (such as <option value="white, white2, white3, white4">alien surgery</option> or something like that? -I'm just guessing-).

As for the "alternate stylesheet" definition, I already have it set in the alternate color schemes (not in the blue one, which I'd like to be the default one or preferred rather, and it works fine, it's the style shown when there are no cookies in the temp files). I tried to set the blue as "alternate stylesheet" too, but then the 7th and 8th styles are simply not applied, resulting a page without any style (whereas when the rel attribute in the part of the blue scheme code lines is set to "stylesheet", making it the default, the 7th and 8th styles in Explorer -when selected in the drop down menu- switch to the default, ignoring its css -but at least a style is applied). -->(I'm really sorry if I haven't explained this last issue properly, sometimes trying to explain complex things in English is a hard task for me

)

thanks for all your help (and time!

)
pablo

**pablete** · 10-01-2008, 09:09 AM

ok, I'm almost there. It seems I made a really stupid mistake, repeating one of the link tags (<link href="css/blueCSS/bluelanguage.css" rel="stylesheet" type="text/css"title="blue" />) in each and every one of my color scheme set of code lines. Now it doesn't look completely right (now it's mixing color schemes) but at least it switches all the styles in explorer.
I'll tell you when I finally set it all right...
pablo

**pablete** · 10-01-2008, 01:54 PM

Ok guys, I finally did it!
the truth is the problem wasn't the repited link tag (it just added too much css link tags), but the limit IE sets for css stylesheets. After hours of what looked like a nonsense thing, I thought "IE HAS to be setting a limit here", and googled "styles limit in explorer" and found out that actually there's a limit of 30 stylesheets per page. That's why my last color scheme wasn't read at all.
Now I've merged some of the stylesheets in just one sheet, and everything goes right in explorer...

FINALLY! now I can go to sleep....