choose css and check if javascript enabled

[jackvull]

Hi
I am running the following code from my page but it is not picking up the styles from the stylesheet. Can you see any problems with it. I am running it from PHP but don't think it's anything to do with server side or client side issues as you can type the links in that way into HTML and it works.

2nd question is: is it sufficient to have the <noscript> tags as a test for browsers that have javascript disabled?

Thanks.

<script language="javascript">
<!--
if (screen.width <= 800)
{
document.write('<link rel="stylesheet" type="text/css" href="css/styles.css">');
}
else if (screen.width = 1024)
{
document.write('<link rel="stylesheet" type="text/css" href="css/styles.css">');
}
else if (screen.width > 1024)
{
document.write('<link rel="stylesheet" type="text/css" href="css/styles.css">');
}
else
{
document.write('<link rel="stylesheet" type="text/css" href="css/styles.css">');
}
//-->
</script>

<noscript>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</noscript>

[jackvull]

oh...all the stylesheets are the same at the moment but that's just for testing. I intend to use different ones for each screen resolution.

[jackvull]

I get an object doesn't support this action in IE but not sure why?

[jackvull]

forget all of that.
I should have had this:

else if (screen.width == 1024)

2 equal signs!

[DrDoc]

yep, that's why :)
You should also probably use more than just

screen.width

to increase compatibility.

[jackvull]

what would you suggest?

[jackvull]

Do you mean to cover other resolutions like 640x480 etc. or to use javascript like screen.height etc.?

Thanks.

[Mobull]

I think he means Browser compatibility, thus check which browser the user is using and then use specific script.

e.g. consider the code below (copied from what I found on Google btw)

function alertSize() {
 var myWidth = 0, myHeight = 0;
 if( typeof( window.innerWidth ) == 'number' ) {
  //Non-IE
  myWidth = window.innerWidth;
  myHeight = window.innerHeight;
 } else if( document.documentElement &&
   ( document.documentElement.clientWidth ¦¦ document.documentElement.clientHeight ) ) {
  //IE 6+ in 'standards compliant mode'
  myWidth = document.documentElement.clientWidth;
  myHeight = document.documentElement.clientHeight;
 } else if( document.body && ( document.body.clientWidth ¦¦ document.body.clientHeight ) ) {
  //IE 4 compatible
  myWidth = document.body.clientWidth;
  myHeight = document.body.clientHeight;
 }
 window.alert( 'Width = ' + myWidth );
 window.alert( 'Height = ' + myHeight );
}

[Ingolemo]

What if the user is at a crasy resolution like 854? They'd get no style!

Better make that first condition something like screen.width < 1024.

Of course, you shouldn't really be using different styles for different resolutions, but meh, let those without javascript go elsewhere.

[Mobull]

just change
else if (screen.width = 1024)

to something like

else if (screen.width <= 1024)