Changing CSS file according to resolution with Javascript

Discussion in 'HTML' started by piraticman@gmail.com, May 4, 2005.

  1. Guest

    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
     
    , May 4, 2005
    #1
    1. Advertising

  2. 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_from_browsers/summary/
    --
    Edwin van der Vaart
    http://www.semi-conductor.nl/ Links to Semiconductors sites
    http://www.evandervaart.nl/ Under construction
     
    Edwin van der Vaart, May 4, 2005
    #2
    1. Advertising

  3. kchayka Guest

    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.
     
    kchayka, May 4, 2005
    #3
  4. Jim Royal Guest

    In article <>,
    <> 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
     
    Jim Royal, May 4, 2005
    #4
  5. Toby Inkster Guest

    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
     
    Toby Inkster, May 7, 2005
    #5
  6. Andy Dingley Guest

    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).
     
    Andy Dingley, May 7, 2005
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andrew FPGA
    Replies:
    0
    Views:
    1,010
    Andrew FPGA
    Sep 26, 2005
  2. Sivaswami Jeganathan

    Modify asp page according to Monitor resolution.

    Sivaswami Jeganathan, Mar 27, 2006, in forum: ASP General
    Replies:
    3
    Views:
    162
    Naresh
    Mar 28, 2006
  3. Markus Mohr
    Replies:
    2
    Views:
    232
    Markus Mohr
    Oct 29, 2003
  4. Claire Osborne
    Replies:
    2
    Views:
    121
    kaeli
    Feb 18, 2004
  5. Seige
    Replies:
    12
    Views:
    460
    Matt Kruse
    Jun 23, 2006
Loading...

Share This Page