PDA

View Full Version : Writing a stylesheet switcher



FrickenTrevor
01-22-2015, 10:57 PM
I found this stylesheet switcher here:
http://www.jqueryscript.net/demo/Change-Switch-Stylesheets-with-jQuery-Style-Switcher-Plugin/

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

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

To something like this

<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 (http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm), 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 -


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
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
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
<!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


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



theam2.css


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





theam3.css


.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


<!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>

FrickenTrevor
01-28-2015, 11:51 PM
Thanks! I still cant seem to figure out how to add the fade between stylesheets though. :(

FrickenTrevor
01-30-2015, 09:06 AM
Bumping again