Changing CSS file according to resolution with Javascript

05-04-2005

I have this script which will load a seperate stylesheet if the user is
browsing in a resolution with height over 980px. This will stop the
page from looking too small on higher resolutions, it works fine on a
browser that supports the script, it works fine on a computer without
javascript (no script just ingores it and runs the default CSS file)
but in a browser WITH javascript that does not support this action no
CSS file is loaded at all.

My code is below.

<head>

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

<script type="text/javascript">
//<![CDATA[
function sniffer() {
var screen_height = screen.height;
var screen_width = screen.width;
if (screen_height >= 960) {
document.getElementById("style").href="style2.css" ;
}
else {
document.getElementById("style").href="style.css";
}
}
window.onload=sniffer;
//]]>
</script>

If I change the line
<link id="style" rel="stylesheet" type="text/css" />
to
<link href="style.css" rel="stylesheet" type="text/css" />
it will load the style.css as the stylesheet, but this disables the
javascript function.
So the question is: Is there a way to set the default stylesheet as
style.css but have the javascript override the default stylesheet,
because if there is no default stylesheet,a browser that does not
support the javascript function will not load a stylesheet. The no
script loads a default css file for users with no javascript.

Hope this makes sense.

Thanks in advance

Daniel

05-04-2005

wrote:
> I have this script which will load a seperate stylesheet if the user is
> browsing in a resolution with height over 980px. This will stop the
> page from looking too small on higher resolutions, it works fine on a
> browser that supports the script, it works fine on a computer without
> javascript (no script just ingores it and runs the default CSS file)
> but in a browser WITH javascript that does not support this action no
> CSS file is loaded at all.
>
> My code is below.
>
> <head>
>
> <link id="style" rel="stylesheet" type="text/css" />
> <noscript>
> <link href="style.css" rel="stylesheet" type="text/css" />
> </noscript>
>
> <script type="text/javascript">
> //<![CDATA[
> function sniffer() {
> var screen_height = screen.height;
> var screen_width = screen.width;
> if (screen_height >= 960) {
> document.getElementById("style").href="style2.css" ;
> }
> else {
> document.getElementById("style").href="style.css";
> }
> }
> window.onload=sniffer;
> //]]>
> </script>
>
> If I change the line
> <link id="style" rel="stylesheet" type="text/css" />
> to
> <link href="style.css" rel="stylesheet" type="text/css" />
> it will load the style.css as the stylesheet, but this disables the
> javascript function.
> So the question is: Is there a way to set the default stylesheet as
> style.css but have the javascript override the default stylesheet,
> because if there is no default stylesheet,a browser that does not
> support the javascript function will not load a stylesheet. The no
> script loads a default css file for users with no javascript.
>
> Hope this makes sense.
No.
The only browsers that doesn't support stylesheets are old browsers
(e.g. Netscape Communicator 4.79) and text-browsers.
IMHO you can use media="all" in the style sheet.
http://w3development.de/css/hide_css...wsers/summary/
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Under construction

05-04-2005

wrote:
> I have this script which will load a seperate stylesheet if the user is
> browsing in a resolution with height over 980px.

FYI, "resolution" has nothing to do with the browser window or viewport
size. A better idea than loading separate stylesheets is to design with
a flexible layout that automatically adjusts to whatever the viewport
size happens to be.
<URL:http://www.allmyfaqs.com/faq.pl?AnySizeDesign>

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

05-04-2005

In article <. com>,
<> wrote:

> I have this script which will load a seperate stylesheet if the user is
> browsing in a resolution with height over 980px. This will stop the
> page from looking too small on higher resolutions

I don't have a solution for your particular problem, but consider that
this approach works only for people who maximize their browser windows,
and only on OSes that provide that "maximize" function.

I run my monitor at 1600x1200, but my browser window is typically 900
pixels across.

--
Jim Royal
"Understanding is a three-edged sword"
http://JimRoyal.com

05-07-2005

Edwin van der Vaart wrote:

> The only browsers that doesn't support stylesheets are old browsers
> (e.g. Netscape Communicator 4.79) and text-browsers.

Stop talking crap!

Netscape Communicator 4.x supports stylesheets. In fact, it supports two
different stylesheet languages, which is more than most.

Whatsmore, there are plenty of shiny, new browsers that don't support CSS,
but are not text-only. For example, the one on my Nokia 6100.

To answer the OP's question, you want:
<link href="style.css" rel="stylesheet" type="text/css" id="style" />

And stop using that "//<![CDATA[" crap. It's crap.

And as kchayka and Jim said, forget looking at screen.height. It
doesn't tell you anything useful. Look at document.body.clientWidth
instead, but make sure both style.css and style2.css are flexible layouts
anyway.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

05-07-2005

On Sat, 07 May 2005 15:23:53 +0100, Toby Inkster
<> wrote:

>And stop using that "//<![CDATA[" crap. It's crap.

Why?

And how else are you going to embed JavaScript in XHTML ?

(although the // is admittedly bogus, the use of a CDATA section isn't).

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Hmmm... DVD is only 540 horizontal resolution (according to the EIA)	SFTVratings_troy@yahoo.com	DVD Video	65	02-10-2007 05:58 PM
Resizing background using CSS and Javascript according to screen resolution	Seige	Javascript	12	06-23-2006 04:20 AM
Modify asp page according to Monitor resolution.	Sivaswami Jeganathan	ASP General	3	03-28-2006 11:32 AM
Changing submit function according to what user selects in pulldown list	Claire Osborne	Javascript	2	02-18-2004 07:32 PM
Switching the background-image according to resolution	Markus Mohr	Javascript	2	10-29-2003 06:21 AM