OK, I've gotten a little farther, I think. Fixing the error in IE causes the script to break in Firefox.
Here is the code that works in Firefox:
Code:
function getCookie(Name) {
....
}
function setCookie(name, value, days) {
....
}
function deleteCookie(name){
....
}
function setStylesheet(title, randomize){ //Main stylesheet switcher function. Second parameter if defined causes a random alternate stylesheet (including none) to be enabled
var i, cacheobj, altsheets=[""]
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) { //if this is an alternate stylesheet with title
cacheobj.disabled = true
altsheets.push(cacheobj) //store reference to alt stylesheets inside array
if(cacheobj.getAttribute("title") == title) //enable alternate stylesheet with title that matches parameter
cacheobj.disabled = false //enable chosen style sheet
}
}
var x, flashobj = new Array (), flashd=document.getElementById('flash_div');
flashobj[0] = ['citylights', '<object width="780" height="208" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="flash/header.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><embed src="flash/header.swf" quality="high" wmode="transparent" width="780" height="208" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>'];
flashobj[1] = ['water', '<object width="780" height="208" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="flash/bubs.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><embed src="flash/bubs.swf" quality="high" wmode="transparent" width="780" height="208" name="header" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>'];
//flashobj[2] = ['green_flash', '<object id="green_flash"><embed></embed></object>'];
//flashobj[3] = ['yellow_flash', '<object id="yellow_flash"><embed></embed></object>'];
flashd.innerHTML='';
flashd.style.display='none';
for ( x = 0; x < flashobj.length; x++){
if (flashobj[x][0]==title) {
flashd.innerHTML = flashobj[x][1];
flashd.style.display='block';
}
}
if (typeof randomize!="undefined"){ //if second paramter is defined, randomly enable an alt style sheet (includes non)
var randomnumber=Math.floor(Math.random()*altsheets.length)
altsheets[randomnumber].disabled=false
}
return (typeof randomize!="undefined" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet
}
function chooseStyle(styletitle, days){ //Interface function to switch style
....
}
}
function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu
....
}
}
}
}
Code:
function getCookie(Name) {
....
}
function setCookie(name, value, days) {
....
}
function deleteCookie(name){
....
}
function setStylesheet(title, randomize){ //Main stylesheet switcher function. Second parameter if defined causes a random alternate stylesheet (including none) to be enabled
var i, cacheobj, altsheets=[""]
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) { //if this is an alternate stylesheet with title
cacheobj.disabled = true
altsheets.push(cacheobj) //store reference to alt stylesheets inside array
if(cacheobj.getAttribute("title") == title) //enable alternate stylesheet with title that matches parameter
cacheobj.disabled = false //enable chosen style sheet
}
}
if (typeof randomize!="undefined"){ //if second paramter is defined, randomly enable an alt style sheet (includes non)
var randomnumber=Math.floor(Math.random()*altsheets.length)
altsheets[randomnumber].disabled=false
}
return (typeof randomize!="undefined" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet
var x, flashobj = new Array (), flashd=document.getElementById('flash_div');
flashobj[0] = ['citylights', '<object width="780" height="208" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="flash/header.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><embed src="flash/header.swf" quality="high" wmode="transparent" width="780" height="208" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>'];
flashobj[1] = ['water', '<object width="780" height="208" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="flash/bubs.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><embed src="flash/bubs.swf" quality="high" wmode="transparent" width="780" height="208" name="header" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>'];
//flashobj[2] = ['green_flash', '<object id="green_flash"><embed></embed></object>'];
//flashobj[3] = ['yellow_flash', '<object id="yellow_flash"><embed></embed></object>'];
flashd.innerHTML='';
flashd.style.display='none';
for ( x = 0; x < flashobj.length; x++){
if (flashobj[x][0]==title) {
flashd.innerHTML = flashobj[x][1];
flashd.style.display='block';
}
}
}
function chooseStyle(styletitle, days){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}
function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu
var element=(element.type=="select-one") ? element.options : element
for (var i=0; i<element.length; i++){
if (element[i].value==selectedtitle){ //if match found between form element value and cookie value
if (element[i].tagName=="OPTION") //if this is a select menu
element[i].selected=true
else //else if it's a radio button
element[i].checked=true
break
}
}
}
}
Moving our code to just above the last curly bracket for function setStylesheet(title, randomize) fixes the error in IE, but causes our code not to work in either FF or IE.
As for the issue of the <div> being empty upon the initial page load, I've figured out that's because in our array and our loop, we're only looking at the alternate stylesheet titles. If this is the first time a user views the page, or if no cookie is found, there is nothing to fill the <div>. That only happens once the user chooses an alternate stylesheet.
I've tried creating a separate codeblock to just replace the empty <div> with the Flash movie that goes with the default theme, but it wouldn't work, no matter where I put it.
Code:
var flashd=document.getElementById('flash_div');
return document.getElementById("flash_div").innerhtml='<object width="780" height="208" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="flash/header.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><embed src="flash/header.swf" quality="high" wmode="transparent" width="780" height="208" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>';
This is frustrating because I know the answers are probably staring me in the face, but I just can't see them because I've been looking at it too long. 
Switching Content In a Div
Reply With Quote
Bookmarks