PDA

View Full Version : Switching Content In a Div



So_Cute
11-06-2006, 03:30 PM
1) Script Title: Style Sheet Switcher (v1.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

I am trying to use this script to create a selection of themes. Instead of just changing a text color, or a background image, I want to be able to change the design entirely. I am working in an environment in which only client-side scripting can be used.

What I've done is create a basic layout that will be used for every theme. Everything that I want to be able to change is called from the stylesheet instead of the HTML file. For example, if I have an image on the page, I can put a transparent .gif with the dimensions of the image in the HTML and assign a style to call the real image in the stylesheet as a background image.

The only problem that I have encountered so far is Flash elements. I haven't been able to figure out how to use the stylesheet to call a Flash element.

Say, for example, that I have a different Flash header on each theme, or, I have a Flash header on some themes, but not on others. I have figured out that I can make the Flash element invisible by putting it in a div and assigning a class to it and using visibility:hidden; in the stylesheet. That would be ok if I only have one theme that is using a Flash header (other than the fact that even though it's hidden, the Flash movie would still load).

Is it possible to call the Flash element from the stylesheets in the way that I've described above for images? Is it possible to modify the javascript so that when the user picks a theme, the Flash element associated with that stylesheet is called, or if that theme has no Flash element, the div in the HTML is ignored?

I realize this is not exactly how the script was intended to work, but any insight from someone with more expertise than me would be greatly appreciated.

ddadmin
11-06-2006, 10:50 PM
You'll definitely need to throw in some custom JavaScript for this, since CSS style switching alone isn't versatile enough. But in general it's certainly possible.

If you could describe a test case scenerio of flash element switching you're looking to accomplish, I can show you a sample of how such a JavaScript would look.

jscheuer1
11-06-2006, 10:54 PM
No, you can't do it with css except by manipulating the display property but, that is not 100% reliable for efficient handling of this type of modularity. You should use a separate function that fills a container division's innerHTML object with your object/embed code depending upon the theme selected. When no flash is desired, this innerHTML object can be set to an empty string and the style for the division can be display:none.

Example:


document.getElementById('flash_div').innerHTML='<object attribute="some_value"><param value="whatever"><embed attribute="some_attribute"></embed></object>'

The division would look like so:


<div id="flash_div"></div>

and could contain the default flash object/embed tags in it.

You could even have the themes set to variables:


var blue_flash='<object attribute="some_value"><param value="whatever"><embed attribute="some_attribute"></embed></object>';
var red_flash='<object attribute="some_other_value"><param value="whatever"><embed attribute="some_other_attribute"></embed></object>';
function flash_it(theme){
document.getElementById('flash_div').innerHTML=theme;
}

and call it like:


flash_it(red_flash);

or like:


flash_it('');

for no flash.

So_Cute
11-08-2006, 06:59 PM
Thanks, John. That's pretty much what I had in mind. I'm still a little fuzzy on how to associate the flash movie with the stylesheet, so maybe you can help me make the connection. Here's what I have so far:


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 flashobj new Array ()
flashobj[0] = "<object id='red_flash'><embed></embed></object>";
flashobj[1] = "<object id='blue_flash'><embed></embed></object>";
flashobj[2] = "<object id='green_flash'><embed></embed></object>";
flashobj[3] = "<object id='yellow_flash'><embed></embed></object>";

var x, theme
for (x=0; (flashobj[flashobj.length-1]); x++) {
if (flashobj(getAttribute(id))[x]==(cacheobj.getAttribute("title") {
document.getElementById('flash_div').innerHTML = theme;
}
break
}
else {
document.getElementById('flash_div').innerHTML = '';
}
}


My additions are the bits in red. This is based upon the assumption that my stylesheet titles and object ids will be the same. As you probably know from my previous postings, I'm no expert in Javascript, but I do try. :rolleyes:

jscheuer1
11-08-2006, 10:13 PM
You cannot getAttribute the id of the flashobj[x] because, unlike the hard coded alternate stylesheet links, it is not an object yet. If, as you say, the titles are the same as the flash object's intended ids, this should work:


function setStylesheet(title){
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] = ['red_flash', '<object id="red_flash"><embed></embed></object>'];
flashobj[1] = ['blue_flash', '<object id="blue_flash"><embed></embed></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; (flashobj[flashobj.length-1]); x++)
if (flashobj[x][0]==title) {
flashd.innerHTML = flashobj[x][1];
flashd.style.display='block';
}
}

So_Cute
11-12-2006, 11:34 PM
Thanks again John. We're getting closer. Only a couple of things to work out now to get our theme switcher working. As always, I can't thank you enough for taking the time to help people like me with big ideas and little know-how.:o

For efficiency's sake, I'll post the problems first and then my codes at the bottom.

Issue #1: "0" is null or not an object error in IE.

Description: The script as is, works fine in FF and Opera, but not in IE. The page loads fine upon the inital page view, but when a theme is selected, the flash div (which holds the header bg and the flash element) completely disappears. Refreshing the page brings back the div section.

From what I've read for the past couple of days, this error could be caused because the call to the object was placed before the form function, hence no object yet existed. Going on that assumption, I moved my (your) block of code which associates the Flash element to the stylesheet to just below the function chooseStyle(styletitle, days) and/or the function indicateSelected(element).

Result: Error disappears in IE but Flash element is no longer associated with the stylesheet title. In other words, the stylesheet changes, but the flash movie doesn't.

Issue #2: Flash element is not remembered upon revisit.

Description: Upon the initial page load, the default stylesheet and corresponding Flash element load. No problem. Selecting a different style changes the stylesheet and flash movie accordingly. Upon refresh, or returning to the page, the stylesheet is remembered, but the default Flash element is loaded instead of the Flash element associated with the stylesheet retrieved from the cookie (?).

Here is a link to the page in development:

Here are the relevant codes:

HTML:


<link rel="stylesheet" type="text/css" href="citylights.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="water" href="water.css" />

<script src="styleswitch.js" type="text/javascript">
/***********************************************
* Style Sheet Switcher v1.1- &#169; 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">
window.onload=function(){
var formref=document.getElementById("switchform")
indicateSelected(formref.choice)
}
</script>
</head>
<body>
<table align="center" cellpadding="0" cellspacing="0" width="780">
<tr>
<td align="center" class="header">
<div id="flash_div">
<object id="citylights" 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" />
<param name="bgcolor" value="#ffffff" />
<embed src="flash/header.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="780" height="208" name="header" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</td>
</tr>
</table>


JS:


function setStylesheet(title, randomize) {
.....
}
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; (flashobj[flashobj.length-1]); x++)
if (flashobj[x][0]==title) {
flashd.innerHTML = flashobj[x][1];
flashd.style.display='block';
}

if (typeof randomize!="undefined"){
......
}

function chooseStyle(styletitle, days){
......
}

function indicateSelected(element){
......
}

jscheuer1
11-13-2006, 08:10 AM
Let's start with the obvious. This is just wrong and I am a bit puzzled why it works at all (I think it is because it goes on forever and at least tries the existing array entries):


for (x=0; (flashobj[flashobj.length-1]); x++)

It should be:


for ( x = 0; x < flashobj.length; x++)

That should take care of your "0" is null or not an object error in IE as, IE just can't deal gracefully with a flashobj[x][0] that doesn't exist. FF reports the error but doesn't seem to mind as much.

Once that is fixed, the cookies may start working as well. I haven't looked to see but, it certainly could have confused the cookie code having the x value completely out of range. There could be other problems.

So_Cute
11-14-2006, 01:59 AM
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:



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
....
}
}
}
}




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.


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. :(

jscheuer1
11-14-2006, 07:48 AM
I'm having trouble following you:

"fixes the error in IE, but causes our code not to work in either FF or IE."

Fixes IE but doesn't work in IE?

The only substantial difference between the two poorly labeled code segments that I can see is:


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


being in a different location. I wasn't even aware that you were using the randomize option.

Your previous example link is currently not coming up at all. In any case, to be of much help, I would want to see a live demo the page that works or that sort of works in any browser and to know if you want the randomize part of the code or not.

So_Cute
11-14-2006, 05:06 PM
Sorry about the confusion and the link not working. As luck would have it, our server went down last night. :|

Here is the original script from DD. I've placed 2 reference points to show what I'm referring to.


//Style Sheet Switcher version 1.1 Oct 10th, 2006
//Author: Dynamic Drive: http://www.dynamicdrive.com
//Usage terms: http://www.dynamicdrive.com/notice.htm

var manual_or_random="manual" //"manual" or "random"
var randomsetting="3 days" //"eachtime", "sessiononly", or "x days (replace x with desired integer)". Only applicable if mode is random.

//////No need to edit beyond here//////////////

function getCookie(Name) {
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}

function setCookie(name, value, days) {
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
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){ //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
}
}

/////Position 1////

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

////Position 2////
}

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

if (manual_or_random=="manual"){ //IF MANUAL MODE
var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet from cookie if there is one stored
setStylesheet(selectedtitle)
}
else if (manual_or_random=="random"){ //IF AUTO RANDOM MODE
if (randomsetting=="eachtime")
setStylesheet("", "random")
else if (randomsetting=="sessiononly"){ //if "sessiononly" setting
if (getCookie("mysheet_s")==null) //if "mysheet_s" session cookie is empty
document.cookie="mysheet_s="+setStylesheet("", "random")+"; path=/" //activate random alt stylesheet while remembering its "title" value
else
setStylesheet(getCookie("mysheet_s")) //just activate random alt stylesheet stored in cookie
}
else if (randomsetting.search(/^[1-9]+ days/i)!=-1){ //if "x days" setting
if (getCookie("mysheet_r")==null || parseInt(getCookie("mysheet_r_days"))!=parseInt(randomsetting)){ //if "mysheet_r" cookie is empty or admin has changed number of days to persist in "x days" variable
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting)) //activate random alt stylesheet while remembering its "title" value
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting)) //Also remember the number of days to persist per the "x days" variable
}
else
setStylesheet(getCookie("mysheet_r")) //just activate random alt stylesheet stored in cookie
}
}
Continued next post....

So_Cute
11-14-2006, 05:15 PM
Here is the code I'm trying to add:


var x, flashobj = new Array (), flashd=document.getElementById('flash_div'); //define and initialize variables for flash elements and HTML 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>']; future flash movie
//flashobj[3] = ['yellow_flash', '<object id="yellow_flash"><embed></embed></object>']; future flash movie

flashd.innerHTML='';
flashd.style.display='none';
for ( x = 0; x < flashobj.length; x++){ //loop through array
if (flashobj[x][0]==title) { //compares flash name with stylesheet title already defined
flashd.innerHTML = flashobj[x][1]; //display the flash movie which meets the condition
flashd.style.display='block';
}
}

If I place this code at position 1, the page works fine in FF and Opera, but gives an error in IE. It was originally "0 is null or not an object" but after changing the condition statement of the loop (as prescribed in an earlier post) the error in IE is now "type is null or not an object".

Moving the block of code to position 2 (below the randomize section, but still inside the function) gets rid of the error in IE, but causes the script to break in FF and Opera. The stylesheet switcher still works but the <div> isn't being filled with our Flash movie code.

There is a separate issue in that the <div> is empty until an alternate stylesheet is chosen, or if cookies are turned off. Our new code only affects alternate stylesheets, not the default stylesheet.

Here is the link where the code in position 1 works in FF and Opera, but not IE.

So_Cute
11-16-2006, 11:26 PM
Resolved.