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

J

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++) {
if (a.getAttribute('href').indexOf(theStyle) != -1) {
a.disabled = false;
} else {
a.disabled = true;
}
}
}
window.onload = window.onresize = dynamicStyle;
//-->
</script>
</head>

<body>
 
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?
Click to expand...

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
Click to expand...

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++) {
if (a.getAttribute('href').indexOf(theStyle) != -1) {
a.disabled = false;
} else {
a.disabled = true;
}
}
}
window.onload = window.onresize = dynamicStyle;
//-->
</script>
</head>

<body>
Click to expand...
 
D

Dr J R Stockton

Fri said:
if (a.getAttribute('href').indexOf(theStyle) != -1) {
a.disabled = false;
} else {
a.disabled = true;
}
Click to expand...

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Working on mobile css menu with plenty of frustration! 2
Justify-content not working 1
On-air script 0
Help me sort out this script 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
CSS Image swap not working. 1
How to position the *tooltip* comment on these buttons? 9
Help with my responsive home page 2

Members online

Total: 32 (members: 1, guests: 31)
Robots: 390

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,014
Latest member
BiancaFix3

Latest Threads

Top