Click to See Complete Forum and Search --> : javascript to change stylesheet/browser


sjemp
01-08-2004, 07:12 AM
Is there a javascript that depending on your type of browser (eg IE and Netscape) allows you to add a specific (different) stylesheet to a page?

In other words: is it possible with javascript to use style1.css for IE and style2.css for Netscape?

Or am I posting in the wrong forum and is there a way to do this simply by adding something in the stylesheet?

thx
Sjemp

96turnerri
01-08-2004, 07:14 AM
have a look at my post which is Stylesheet cookie that shows you a way to change cookie just modify the function to detect browser type and then set stylesheet

http://forums.webdeveloper.com/showthread.php?s=&threadid=24854

96turnerri
01-08-2004, 07:22 AM
<script language="JavaScript" type="text/javascript">
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
if(navName == 'Microsoft Internet Explorer'){
setActiveStyleSheet('style1');
} else {
setActiveStyleSheet('style2');
}
}
}
</script>
<LINK href="style-black.css" type="text/css" rel="stylesheet" title="style1">
<LINK href="style-blue.css" type="text/css" rel="alternate stylesheet" title="style2">

<body onload="setActiveStyleSheet();">

sjemp
01-08-2004, 08:24 AM
Exactly what i need but this script gives an error :s ?

It only works for the first stylesheet in IE (and there is an error on the page- i think it's saying an object is being expected), but other browsers also display this stylesheet.

96turnerri
01-08-2004, 08:36 AM
now this works fine

<head>
<LINK href="style1.css" type="text/css" rel="stylesheet" title="style1">
<LINK href="style2.css" type="text/css" rel="alternate stylesheet" title="style2">
<script language="JavaScript" type="text/javascript">
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
if (navigator.appName == "Microsoft Internet Explorer") {
setActiveStyleSheet('style1');
} else {
setActiveStyleSheet('style2');
}
}
</script>
</head>

<body onload="setActiveStyleSheet();">

</body>

hope that what u after ;)

sjemp
01-08-2004, 09:35 AM
is it me or what? It doesnt work fine with me though.

I get an errorbox in the middle of the screen: Out of memory at line: 7 in IE

btw thx 4 your help 96turnerri

Sjemp

96turnerri
01-08-2004, 04:19 PM
hmmm so do i know didnt in testing, hmmm strange let me think about it why it could be dont have a clue at the moment

Pittimann
01-08-2004, 05:13 PM
Hi!

The "Out of memory..." is based on the fact, that this:

if (navigator.appName == "Microsoft Internet Explorer") {
setActiveStyleSheet('style1');
} else {
setActiveStyleSheet('style2');
}

is inside the function which is called onload.

Sorry to say, that also the rest doesn't work - don't have time now to fix it...

Cheers - Pit

AtReyU_101
04-23-2007, 10:03 AM
I know my answer is about 3 years late ... the answer is here ... http://www.technorealm.co.uk/scripts/browserdetectcss.html ... just for anyone that is busy searching the threads for this ...