I'm trying this technique I found on Digital-Web.com in an attempt to
set different stylesheets based on the width of the screen. Even when I
resize the screen to my max of 1280x1024 I always get "Small" in the
alert box in either IE 6 or Firefox 1.5.0.7. Could someone please
comment on how to accomplish this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Dynamic CSS</title>
<link rel=STYLESHEET href=styleHuge.css type=text/css>
<link rel=STYLESHEET href=styleBig.css type=text/css>
<link rel=STYLESHEET href=styleSmall.css type=text/css>
<script language="JavaScript">
<!--
function dynamicStyle() {
var screenW = (document.body) ? document.body.clientWidth : innerWidth
var theStyle = (screenW 1248) ? 'Huge' : (screenW 1000) ? 'Big' :
'Small';
alert(theStyle + ' ' + screenW + ' ' + document.body.clientWidth)
var i, a;
for (i = 0; a = document.getElementsByTagName('link')[i]; i++) {
if (a.getAttribute('href').indexOf(theStyle) != -1) {
a.disabled = false;
} else {
a.disabled = true;
}
}
}
window.onload = window.onresize = dynamicStyle;
//-->
</script>
</head>
<body>
