Change CSS Stylesheets using Javascript - works in IE; not in Firefox

Thingol · Apr 7, 2005

Hi all,

I have used this tutorial to create a set of stylesheets between which I can switch. I fact, I switch between two stylsheets that contain specific markup and I have one main sheet that is always enabled. The code works in IE, but not in Firefox.

Can anyone help me out? I really want it to work in Firefox as well.

Best regards,
Martijn Senden.

Here's the code I have:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>Menu Sirena</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="Menu.css">
<link rel="stylesheet" type="text/css" href="menu800x600.css" title="menu800x600">
<link rel="stylesheet" type="text/css" href="menu1280x1024.css" title="menu1280x1024">

<script type="text/javascript" language="javascript">
if (screen.width > 1024) {
  changeStyle('menu1280x1024');
}
if (screen.width < 1024) {
  changeStyle('menu800x600');
}
if (screen.width == 1024) {
  changeStyle();
}

function getAllSheets() {
  if( !window.ScriptEngine && navigator.__ice_version ) { return document.styleSheets; }
  if( document.getElementsByTagName ) { var Lt = document.getElementsByTagName('link'), St = document.getElementsByTagName('style');
  } else if( document.styleSheets && document.all ) { var Lt = document.all.tags('LINK'), St = document.all.tags('STYLE');
  } else { return []; } for( var x = 0, os = []; Lt[x]; x++ ) {
    var rel = Lt[x].rel ? Lt[x].rel : Lt[x].getAttribute ? Lt[x].getAttribute('rel') : '';
    if( typeof( rel ) == 'string' && rel.toLowerCase().indexOf('style') + 1 ) { os[os.length] = Lt[x]; }
  } for( var x = 0; St[x]; x++ ) { os[os.length] = St[x]; } return os;
}
function changeStyle() {
  for( var x = 0, ss = getAllSheets(); ss[x]; x++ ) {
    if( ss[x].title ) { ss[x].disabled = true; }
    for( var y = 0; y < arguments.length; y++ ) {
     if( ss[x].title == arguments[y] ) { ss[x].disabled = false; }
} } }
</script>

</head>
<body>
</body>
</html>

In the Beginning there was nothing, which exploded.

--Terry Pratchett, Lords and Ladies--

BillyRayPreachersSon · Apr 7, 2005

I've not tested this, but try replacing your current two functions with these (hacked around from some Eric Meyer and Paul Snowden code):

Code:

function getAllSheets() {
	return(document.getElementsByTagName('link'));
}

function changeStyle(title) {
	if (!title) return;

	var styleElement = getAllSheets();
	for (var loop=0; loop<styleElement.length; loop++) {
		if (styleElement.getAttribute('rel').indexOf('stylesheet') != -1 && styleElement.getAttribute('title')) {
			styleElement.disabled = true;
			if (styleElement.getAttribute('title') == title) styleElement.disabled = false;
		}
	}
}

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

Thingol · Apr 7, 2005

Hi,

Thanks a lot for the input! Your code looks a lot simpler, I like it. I tried implementing it (see code below), and now it always uses the menu800x600.css sheet, no matter what screen resolution I use. But at least it's doing things in both Firefox and IE!

I tried adjusting the code to get it to work, but haven't succeeded. Below is the code you posted, implemented in my webpage.

I hope you can tell what is wrong. Thanks a lot in advance!

Best regards,
Martijn Senden.

Code:

<head><title>Menu Sirena</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="Menu.css">
<link rel="stylesheet" type="text/css" href="menu800x600.css" title="menu800x600">
<link rel="stylesheet" type="text/css" href="menu1280x1024.css" title="menu1280x1024">

<script type="text/javascript" language="javascript">
if (screen.width > 1024) {
  changeStyle('menu1280x1024');
}
if (screen.width < 1024) {
  changeStyle('menu800x600');
}
if (screen.width == 1024) {
  changeStyle();
}

function getAllSheets() {
    return(document.getElementsByTagName('link'));
}

function changeStyle(title) {
    if (!title) return;

    var styleElement = getAllSheets();
    for (var loop=0; loop<styleElement.length; loop++) {
		if (styleElement.getAttribute('rel').indexOf('stylesheet') != -1 && styleElement.getAttribute('title')) {
            styleElement.disabled = true;
		    if (styleElement.getAttribute('title') == title) styleElement.disabled = false;
        }        
    }
}
</script>

</head>

In the Beginning there was nothing, which exploded.

--Terry Pratchett, Lords and Ladies--

BillyRayPreachersSon · Apr 8, 2005

Try changing your logic from this:

Code:

if (screen.width > 1024) {
  changeStyle('menu1280x1024');
}
if (screen.width < 1024) {
  changeStyle('menu800x600');
}
if (screen.width == 1024) {
  changeStyle();
}

to this:

Code:

if (screen.width > 1024) {
  changeStyle('menu1280x1024');
} else if (screen.width < 1024) {
  changeStyle('menu800x600');
}

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Change CSS Stylesheets using Javascript - works in IE; not in Firefox

Thingol

Technical User

BillyRayPreachersSon

Programmer

Thingol

Technical User

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor