Writing a stylesheet switcher

**FrickenTrevor** · 01-22-2015, 10:57 PM

I found this stylesheet switcher here:
http://www.jqueryscript.net/demo/Cha...itcher-Plugin/

However I have spent the past few hours trying to turn the links from this

Code:

<a href="javascript: void(0)" data-theme="theme1">Default</a>

To something like this

Code:

<a href="javascript: void(0)" id="theme1">Default</a>

As well as changing the selection to a dropdown instead of a link, and a fade between the change of stylesheets. I know there is a stylesheet switcher hosted on this site, however it does not have what I am looking for

**FrickenTrevor** · 01-24-2015, 12:12 PM

Hello? Anyone?

**keyboard** · 01-24-2015, 04:30 PM

Is there any reason you need to change it from data-theme to id?
If you take a quick look at the script they're demoing on that first page you'll see sections like this -

Code:

var asset = $(this).data('theme'),

which is the part getting the data-theme attribute of the element. You could change each of these to something like var asset = $(this).attr("id"), I believe (untested)

Not sure about changing it to a select. The script is designed to work on a tags only so you'd probably need to just rewrite it to accomodate for that.

Fading between the sheets would be painful as you would have to clone the entire website with the old sheet and then switch it to the new sheet then fade between them. Is this the sort of thing you were talking about?

Let me know if you need specific code examples or just one big example showing what you've asked for.

**FrickenTrevor** · 01-24-2015, 08:36 PM

Originally Posted by keyboard

Fading between the sheets would be painful as you would have to clone the entire website with the old sheet and then switch it to the new sheet then fade between them. Is this the sort of thing you were talking about?
Let me know if you need specific code examples or just one big example showing what you've asked for.

Yes it is, but I don't know how it would be "painful". I will look into the script and see what I can do to change it to work with a select tag instead of links, although I'm not the best at jQuery.

**FrickenTrevor** · 01-25-2015, 11:28 PM

Originally Posted by keyboard

Let me know if you need specific code examples or just one big example showing what you've asked for.

Could I have the examples?

**FrickenTrevor** · 01-27-2015, 08:11 AM

Bumping again so this thread doesn't get buried

**vwphillips** · 01-27-2015, 11:46 AM

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" xml:lang="en" lang="en">

<head>
  <title></title>
<link rel="stylesheet" title="default" href="theam1.css" type="text/css" />
<style type="text/css">
/*<![CDATA[*/

.sheet1 {
  width:200px;height:200px;background-Color:red;
}

/*]]>*/
</style>
</head>

<body>
<div class="sheet1" ></div>
<select onchange="SwapSheet('default',this.value);" >
 <option value="theam1.css" >theam1.css</option>
 <option value="theam2.css" >theam2.css</option>
 <option value="theam3.css" >theam3.css</option>
</select>


<script type="text/javascript">
/*<![CDATA[*/

function SwapSheet(t,ns){
 var s=document.getElementsByTagName('LINK'),os,z0=0;;
 for (var os,z0=0;z0<s.length;z0++){
  if (s[z0].title==t){
   os=s[z0];
   break;
  }
 }
 if (os&&typeof(ns)=='string'){
  var s=os.cloneNode(false);
  s.href=ns;
  os.parentNode.appendChild(s);
  os.parentNode.removeChild(os);
 }
}

SwapSheet('default','theam3.css');
/*]]>*/
</script>
</body>

</html>

theam1.css

Code:

.sheet1 {
  width:200px;height:200px;background-Color:red;
}

theam2.css

Code:

.sheet1 {
  width:200px;height:200px;background-Color:blue;
}

theam3.css

Code:

.sheet1 {
  width:200px;height:200px;background-Color:yellow;
}

**FrickenTrevor** · 01-28-2015, 04:49 AM

Thanks, but I cant tell if the script remembers the users choice and the drop down is a little buggy. Not really sure how to fix it myself since the script looks a little complicated.

**vwphillips** · 01-28-2015, 12:49 PM

with persistance

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" xml:lang="en" lang="en">

<head>
  <title></title>
<link rel="stylesheet" title="default" href="theam1.css" type="text/css" />
<style type="text/css">
/*<![CDATA[*/

.sheet1 {
  width:200px;height:200px;background-Color:red;
}

/*]]>*/
</style>
</head>

<body>
<div class="sheet1" ></div>
<select id="s1" onchange="SwapSheet('default',this.value);" >
 <option value="theam1.css" >theam1.css</option>
 <option value="theam2.css" >theam2.css</option>
 <option value="theam3.css" >theam3.css</option>
</select>



<script type="text/javascript">
/*<![CDATA[*/

function SwapSheet(t,ns,days){
 var s=document.getElementsByTagName('LINK'),os,z0=0;;
 for (var os,z0=0;z0<s.length;z0++){
  if (s[z0].title==t){
   os=s[z0];
   break;
  }
 }
 if (os&&typeof(ns)=='string'){
  var s=os.cloneNode(false);
  s.href=ns;
  os.parentNode.appendChild(s);
  os.parentNode.removeChild(os);
  days!=-1?document.cookie=t+'='+ns+(typeof(days)=='number'?';expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path/;':';'):null;
 }
}


function cookie(t,days,id){
 var re=new RegExp(t+'=[^;]+','i'),ns,s=document.getElementById(id),o,z0=0;
 ns=document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
 if (ns){
  SwapSheet(t,ns,days);
  if (s){
   o=s.options||[];
   for (;z0<o.length;z0++){
    if (o[z0].value==ns){
     s.selectedIndex=z0;
     break;
    }
   }
  }
 }
}


//parameter 0 = the style sheet title.
//parameter 1 = the number of days to restore the last HREF.
//parameter 2 = the unique ID name is the select element.
cookie('default',1,'s1')
/*]]>*/
</script>
</body>

</html>