Problem with DTD

[MattoThePotatto]

Hey, I made a script for the page to adjust for different resolutions.. Works fine.. until I declair a DOCTYPE..

Here's the script..

var w = window.screen.width;
if(w >= 1280)
{
document.write('<link rel="stylesheet" type="text/css" href="css/layout1280.css" media="screen" />');
document.write('<link rel="stylesheet" type="text/css" href="css/playout1280.css" media="print" />');
}
if(w >= 1024 && w < 1280)
{
document.write('<link rel="stylesheet" type="text/css" href="css/layout1024.css" media="screen" />');
document.write('<link rel="stylesheet" type="text/css" href="css/playout1024.css" media="print" />');
}
if(w >= 800 && w < 1024)
{
document.write('<link rel="stylesheet" type="text/css" href="css/layout800.css" media="screen" />');
document.write('<link rel="stylesheet" type="text/css" href="css/playout800.css" media="print" />');
}


Which DOCTYPE can I use, or what can I do to the script to stop this problem?
Thanks, ^^

 

[MattoThePotatto]

I've tried a few other ways to execute the same script..
Same result...
Works fine until I put a doctype in...

------
HTML

<link rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" media="print" />

And the Javascript

var w = window.screen.width;
var s = document.getElementsByTagName("link")[0];
var p = document.getElementsByTagName("link")[1];
s.href = (w>=1280)?"css/layout1280.css":(w>=1024)?"css/layout1024":"css/layout800";
p.href = (w>=1280)?"css/playout1280.css":(w>=1024)?"css/playout1024":"css/playout800";

 

[BillyRayPreachersSon]

What exactly is your problem? You haven't said what isn't working.

Is it the screen width detection? Is the browser not including the right files? Or is the layout hosed, in which case, it's probably a CSS question?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[MattoThePotatto]

The problem is as soon as I put a doctype tag into the html, that stops working.
Without the doctype, it's good, so it's not the CSS. And the rest of the script works, so it's not that the script has been disallowed. :S
Could be the syntax? But I'm newish to scripting, so I'm not too sure. Lol.
Sorry if this isn't clear enough :S

 

[BillyRayPreachersSon]

The problem is as soon as I put a doctype tag into the html, that stops working.

But [!]what[/!] is it that isn't working? Saying "that" stops working still doesn't give us much of a clue.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[MattoThePotatto]

Sorry - No stylesheet loads when there is a doctype tag.

 

[BillyRayPreachersSon]

Have you tried debugging your JS? What does "w" hold after it's set with and without a DOCTYPE?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Also, 3 things to note:

1: You don't have any "fall back" logic... so no CSS will load at all if the screen resolution is less than 800px wide. Granted, having a screen resolution of < 800px wide is rare these days, but you should still load something, I'd say.

2: Don't confuse screen resolution with browser real-estate. Many users don't surf with full-screen browsers.

3: Do you really need different CSS per resolution? Can't you just scale things nicely?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Matto,

How did you debugging go?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]