Styleswitch.js doesn't COMPLETELY switch styles...

**smit_ralph** · 02-13-2012, 10:46 AM

1) Script Title: styleswitch.js

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

3) Describe problem:

Actually, the script seems to be working fine, but I am trying to switch between two completely different css's, totally redefining the design of the site.

I defined one CSS as the preferred (rel=stylesheet, included a title) and one as the alternate.

The preferred one looks, fine, but the alternate css mixes in some of the preferred, which off course results in a kind of screwed up view.

The one way it DOES work (shows two proper designs) is when i define both css's as alternate, not assigning a preferred or persisitant css. However, this only works in Chrome / Firefox. Safari and IE will show a site without any stylesheet attached

the code looks like this right now:

Code:

<!DOCTYPE html> 
<head>
<link rel="stylesheet" type="text/css" href="css-strict-blue.css" title="strict-blue" media="screen" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="css-sketchy-blue.css" title="sketchy-blue"/> 
<link rel="stylesheet" type="text/css" href="lightbox/jquery.lightbox-0.5.css" media="screen"/>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
       
<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>

<script type="text/javascript">
//These two variables optionally moved here from the main script:
var manual_or_random="manual" //"manual" or "random"
var randomsetting="eachtime" 
//"eachtime", "sessiononly", or "x days (replace x with desired integer)". Only applicable if mode is random.
</script>     
        
<script type="text/javascript">
window.onload=function(){
var formref=document.getElementById("switchform")
indicateSelected(formref.choice)
//indicateSelected(formref.switchcontrol)
}
</script>    

</head>	
<body>

<div id="container">
			
<div id="sub-heading">
<form id="switchform" class="switch">
<select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)">
<option selected="selected" disabled="disabled">- Select your style -</option>
<option value="sketchy-blue">Blue Sketchy Theme</option>
<option value="strict-blue">Blue Strict Theme</option>
</select>
</form>

</div>
</div>

</body>
</html>

so the question is: How to get both css's to work properly without interfering with each other, and get (either) one of them to load directly in safari and IE?

**ddadmin** · 02-15-2012, 08:21 AM

Try the below modified .js file, which lets you completely switch between one main stylesheet and a choice of various alternate stylesheets. When the user chooses an alternate stylesheet, the main one is disabled. For the new .js file to work, you have to give your main stylesheet a title of "main", and also pass in that value when dynamically switching stylesheets by calling chooseStyle(). The below HTML illustrates the necessary changes:

Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" title="main" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="user.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="brown-theme" href="user2.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="main" onClick="chooseStyle(this.value, 60)">Default style<br />
<input type="radio" name="choice" value="blue-theme" onClick="chooseStyle(this.value, 60)">Blue Theme<br />
<input type="radio" name="choice" value="brown-theme" onClick="chooseStyle(this.value, 60)">Brown Theme
</form>
// Rest of body here
</body>
</html>

In the above case, when the user chooses the "blue" theme for example, default.css is disabled while user.css is applied.

Thread: Styleswitch.js doesn't COMPLETELY switch styles...

Thread Tools

Search Thread

Styleswitch.js doesn't COMPLETELY switch styles...

Bookmarks

Bookmarks

Posting Permissions