Question about changing stylesheets

[kbjradmin]

i have a drop down box on my page that is used to change the stylesheets used on the page. i have noticed, though, that the code seems to have some sort of an error in firefox. could someone help?

<form id="switchform" action="#">
<pre class="theme">Change Theme</pre>
<select name="switchcontrol" size="1" onchange="chooseStyle(this.options[this.selectedIndex].value, 60)">
<option value="bluestyle" selected="selected">Blue Theme</option>
<option value="greenstyle">Green Theme</option>
<option value="purplestyle">Purple Theme</option>
<option value="redstyle">Red Theme</option>
<option value="orangestyle">Orange Theme</option>
</select>
</form>

the result can be seen on my page at http://kbjr.x10hosting.com

thanks in advance!

 

[LHVWB]

When I take that code and run it on my server and view it with firefox, there is no problem. The problem must be something to do with your javascript function. Could you please post your javascript code.

 

[kbjradmin]

alright, here is my javascript.

var manual_or_random="manual"
var randomsetting="3 days"
function getCookie(Name) { 
var re=new RegExp(Name+"=[^;]+", "i");
if (document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1]
return null
}
function setCookie(name, value, days) {
var expireDate = new Date()
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
function deleteCookie(name){
setCookie(name, "moot")
}

function setStylesheet(title, randomize){
var i, cacheobj, altsheets=[""]
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) {
cacheobj.disabled = true
altsheets.push(cacheobj)
if(cacheobj.getAttribute("title") == title)
cacheobj.disabled = false
}
}
if (typeof randomize!="undefined"){
var randomnumber=Math.floor(Math.random()*altsheets.length)
altsheets[randomnumber].disabled=false
}
return (typeof randomize!="undefined" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : ""
}
function chooseStyle(styletitle, days){
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}
function indicateSelected(element){
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){
var element=(element.type=="select-one") ? element.options : element
for (var i=0; i<element.length; i++){
if (element[i].value==selectedtitle){
if (element[i].tagName=="OPTION")
element[i].selected=true
else
element[i].checked=true
break
}
}
}
}
if (manual_or_random=="manual"){
var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null)
setStylesheet(selectedtitle)
}
else if (manual_or_random=="random"){
if (randomsetting=="eachtime")
setStylesheet("", "random")
else if (randomsetting=="sessiononly"){
if (getCookie("mysheet_s")==null)
document.cookie="mysheet_s="+setStylesheet("", "random")+"; path=/"
else
setStylesheet(getCookie("mysheet_s"))
}
else if (randomsetting.search(/^[1-9]+ days/i)!=-1){
if (getCookie("mysheet_r")==null || parseInt(getCookie("mysheet_r_days"))!=parseInt(randomsetting)){
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting))
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting))
}
else
setStylesheet(getCookie("mysheet_r"))
} 
}

currently used on manual (just to tell you; of course i guess thats kind of obvious)

 

[woiwky]

I assume that the error you're referring to is that the drop-down list cannot be clicked. I believe the error is that in indexstyle1024.css, you have:

#content{
position: absolute;
top: 146px;
left: 0px;
width: 1000px;
height: 400px;
}

then in base1024.css, you have:

#theme{
position: absolute;
top: 150px;
left: 850px;
}

So you're placing the #theme div (left: 850px) in an area which is covered by the #content div (width: 1000px).

Giving #theme a greater z-index than #content should fix this.

 

[kbjradmin]

thanks for the help!


By The Way, i am currently holding a http://forums.x10hosting.com/marketplace/59015-low-stakes-credit-raffle.html in case any one is interested. :naughty: