smit_ralph
02-13-2012, 10:46 AM
1) Script Title: styleswitch.js
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.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 :confused:
the code looks like this right now:
<!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?
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.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 :confused:
the code looks like this right now:
<!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?