4 replies [Last post]
craigtaylor74
craigtaylor74's picture
Offline
Regular
Barcelona
Last seen: 18 years 34 weeks ago
Barcelona
Timezone: GMT+1
Joined: 2004-02-04
Posts: 31
Points: 0

can anyone suggest a piece of javascript (I know nothing about js!) I could use in an external js file to select an appropriate css according to screen resolution. I have 2 css files prepared (800 and 1024) which help maintain the look of the site but I now need a way of implementing them.
Thanks,
Craig.

http//www.ctam.co.uk

_janim
Offline
Regular
phinland
Last seen: 18 years 16 weeks ago
phinland
Joined: 2004-06-08
Posts: 22
Points: 0

js + css + screen resolution

That's very simple.
Insert inside the head-element in your html page:

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

You might want to include additional markup for browsers with
javascript disabled or not supporting javascript.
Insert after the javascript tag:

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

Please Provide a link to your code/site. If you can't, then please at least provide the HTML & CSS together.

qrayg
Offline
newbie
USA
Last seen: 18 years 12 weeks ago
USA
Joined: 2004-07-09
Posts: 3
Points: 0

js + css + screen resolution

What if someone is in a higher resolution than the window width. My work machine resolution is 1024 but I always keep my browser window at 800 centered on my desktop. At home my resolution is 1600 but my window is 1024 centered on the desktop. In this instance both machines would get the same css but the first one would need to scroll left and right to view.

I recommend using a single CSS file that will work in all resolutions. That way you won't have to worry about screen widths, wondow widths, or javascript.

_janim
Offline
Regular
phinland
Last seen: 18 years 16 weeks ago
phinland
Joined: 2004-06-08
Posts: 22
Points: 0

js + css + screen resolution

I do second to that. Even counting the window width is not the right way since people often resize browser windows.

Best practice is to create one good, fixed solution for all resolutions or design a liquid layout.

Please Provide a link to your code/site. If you can't, then please at least provide the HTML & CSS together.

craigtaylor74
craigtaylor74's picture
Offline
Regular
Barcelona
Last seen: 18 years 34 weeks ago
Barcelona
Timezone: GMT+1
Joined: 2004-02-04
Posts: 31
Points: 0

js + css + screen resolution

I'll take both answers ... for this site I'll use the two css and the next I'll try a single-please all css.
Thanks for the ideas.

http//www.ctam.co.uk