I'm stuck on a syntax problem!

[georgeocrawford]

Hi,

I'm using a flash animation to trigger a function called change_style on my page. The function loads a new style sheet and causes the page to change visually.

I'm stuck on the best way to approach the syntax for this. I want to cater for as many browsers as possible. I have learnt a bit about the different DOM types I'll have to deal with, but my knowledge of Javascript is very very basic and I can't quite make the function work!

The page initially contains this CSS link:

<link id=&quot;style&quot; rel=&quot;stylesheet&quot; href=&quot;style.css&quot; type=&quot;text/css&quot;>

Here's what I want to do:

If DOM is the old one {
   use document.createStyleSheet to change the CSS
}

Else If DOM is the new one {
    use document.getElementById('style').href to change the CSS
}

Else redirect the browser to a completely new page[code]

Even better than this would be:

[code]If DOM is the old one {
    use document.createStyleSheet to change the CSS
        If it worked {do nothing}
        Else {redirect the browser to a completely new page}
}

Else If DOM is the new one {
    use document.getElementById('style').href to change the CSS
        If it worked {do nothing}
        Else {redirect the browser to a completely new page}
}

Else redirect the browser to a completely new page[code]

And here is what I've done so far:

[code]function change_style() { 
		
		if (document.all)  {
			document.createStyleSheet('style2.css');
		}
	
		else if (document.getElementById) {
			document.getElementById('style').href ='style2.css';
		} 

		else {
			window.location="[URL unfurl="true"]http://www.therealeubo.org.uk/index.html";[/URL]
		}
	}

Now this doesn't work in Opera 6 for the Mac, which means that some browsers are falling through the function. Opera answers 'yes' to

if (document.all)

but then fails to attatch the new CSS. This is why I want to have the page redirect option at each stage of the function.

How do I test if

document.createStyleSheet('style2.css');

or

document.getElementById('style').href ='style2.css';

have worked or not? I tried

if (!document.createStyleSheet('style2.css')) {window.location="[URL unfurl="true"]http://www.therealeubo.org.uk/index.html";}[/URL]

etc. but it didn't work.

Thanks for any help!

______________________

George

 

[clarkin]

would be interested in seeing a solution for this - not quite up to scratch with cross browser DOM

One suggestion - use something else for your stylesheet ID (say 'style101'), 'style' might be protected as it is also an element (<style></style>). Not sure if it matters, but you never know


Posting code? Wrap it with code tags: [ignore]

[/ignore][code]CodeHere

[ignore][/code][/ignore].

 

[georgeocrawford]

Good sugestion, but the stylesheet ID is only relevant for the second of the three conditionals (new DOM), and Opera is getting stuck on the first one (old DOM).

By the way, I just noticed that when I run this in Opera, the status bar at the bottom of the window says &quot;Executing Javascript&quot; continuously from when the animation finishes. This suggests to me its stuck in a loop or someting.

Anyone else with a solution for me?

Thanks

______________________

George

 

[georgeocrawford]

I'm now using this:

function change_style() {
if (document.all) {
document.createStyleSheet('style2.css');
}

else if (document.getElementById && document.childNodes && document.createElement) {
document.getElementById('my_style_sheet').href ='style2.css';
}

else {
window.location=&quot;

http://www.mysite.com/index.html&quot;;

}
}

...which works on ALL my available browsers. Can anyone tell me if there is a potential problem still here?

Thanks

(sorry - TGML code tag not working)

______________________

George

 

[Lrnmore]

Just a wild guess??

Maybe you should include both sheets initially
in the header so that the server sends it to the
client??

2b||!2b