Changing CSS file according to resolution with Javascript

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

  1. piraticman

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


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

    <script type="text/javascript">
    function sniffer() {
    var screen_height = screen.height;
    var screen_width = screen.width;
    if (screen_height >= 960) {
    else {

    If I change the line
    <link id="style" rel="stylesheet" type="text/css" />
    <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

    piraticman, May 4, 2005
    1. Advertisements

  2. 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.
    Edwin van der Vaart, May 4, 2005
    1. Advertisements

  3. piraticman

    kchayka Guest

    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.
    kchayka, May 4, 2005
  4. piraticman

    Jim Royal Guest

    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, May 4, 2005
  5. piraticman

    Toby Inkster Guest

    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
    Toby Inkster, May 7, 2005
  6. piraticman

    Andy Dingley Guest


    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
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.