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