By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,918 Members | 1,816 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,918 IT Pros & Developers. It's quick & easy.

Script to detect screen width and set dynamic CSS not working correctly

P: n/a
JJA
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>

Oct 27 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
ASM
JJA a écrit :
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?
There is no interest at all to know screen size in css
Why ?
Because I do open my browsers in a window sized by 900/650
and my screen is by 1200/900

The script bellow tries to get the window size.
<!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 screenW = (document.body) ? document.body.clientWidth : innerWidth;

and that works fine with my FireFox and my Opera.
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>
Oct 27 '06 #2

P: n/a
In message <11*********************@i42g2000cwa.googlegroups. com>, Fri,
27 Oct 2006 08:19:44, JJA <jo***@cbmiweb.comwrites
if (a.getAttribute('href').indexOf(theStyle) != -1) {
a.disabled = false;
} else {
a.disabled = true;
}
Something like
a.disabled = ! /theStyle/.test(a.getAttribute('href'))
seems better.

It's a good idea to read the newsgroup and its FAQ. See below.

--
(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 6
<URL:http://www.jibbering.com/faq/>? JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htmjscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/TP/BP/Delphi/jscr/&c, FAQ items, links.
Oct 28 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.