Changing CSS file according to resolution with Javascript

P

piraticman

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
 
E

Edwin van der Vaart

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.
Click to expand...
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_from_browsers/summary/
 
K

kchayka

I have this script which will load a seperate stylesheet if the user is
browsing in a resolution with height over 980px.
Click to expand...

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>
 
J

Jim Royal

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

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.
 
T

Toby Inkster

Edwin said:
The only browsers that doesn't support stylesheets are old browsers
(e.g. Netscape Communicator 4.79) and text-browsers.
Click to expand...

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.
 
A

Andy Dingley

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

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).
 

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

Javascript DOM 1
CSS File does not really work? 1
Check forms With JavaScript 1
JQuery add shadow error 4
Positioning CSS components 1
Help with code 0
Final chapter of "Learn PHP, MySQL and JavaScript" 3
How to store data from a sign up form on a website into an sql databse 1

Members online

Total: 76 (members: 4, guests: 72)
Robots: 355

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,819
Latest member
masterdaster

Latest Threads

Top