www.webdeveloper.com
Results 1 to 7 of 7

Thread: Why won't this work!!!

  1. #1
    Join Date
    Jan 2003
    Location
    UK
    Posts
    267

    Why won't this work!!!

    This script fails to load any of the css files it refers to and I have no idea why...

    Code:
    var screenwidth = screen.width;
    var screenheight = window.innerHeight;
    if (screenwidth <= 1024){
    document.write('<link rel="stylesheet" href="small.css" type="text/css" media="screen" />');
    }
    else if (screenwidth = 1152){
    document.write('<link rel="stylesheet" href="1152x864.css" type="text/css" media="screen" />');
    }
    else if ((screenwidth >= 1280) && (screenwidth <= 1600) && (screenheight <= 728)){
    document.write('<link rel="stylesheet" href="medium.css" type="text/css" media="screen" />');
    }
    else {
    document.write('<link rel="stylesheet" href="large.css" type="text/css" media="screen" />');
    }

  2. #2
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    The way it's coded, if screen.width > 1024 it will always load "1152x864.css", otherwise "small.css".
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  3. #3
    Join Date
    Jan 2003
    Location
    UK
    Posts
    267
    Thank you, I changed the code to be more specific about the ranges I wanted to control:

    Code:
    var screenwidth = screen.width;
    var screenheight = window.innerHeight;
    if (screenwidth <= 1024){
    document.write('<link rel="stylesheet" href="small.css" type="text/css" media="screen" />');
    }
    else if ((screenwidth > 1024) && (screenwidth <= 1152)){
    document.write('<link rel="stylesheet" href="1152x864.css" type="text/css" media="screen" />');
    }
    else if ((screenwidth > 1152) && (screenwidth <= 1600) && (screenheight <= 728)){
    document.write('<link rel="stylesheet" href="medium.css" type="text/css" media="screen" />');
    }
    else {
    document.write('<link rel="stylesheet" href="large.css" type="text/css" media="screen" />');
    }
    So if anyone's still browsing in 800x600 they'll get a nicely laid out page!!!

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    Strange code
    1/ - with screen.width and window.innerHeight ???
    2/ - with an if (screenwidth = 1152) which is not a condition but an assignment
    3/ - with a (screenwidth <= 1600) && (screenheight <= 728) ???
    4/ - with a (screenwidth >= 1280) && (screenheight <= 728) for medium css !

  5. #5
    Join Date
    Dec 2005
    Posts
    2,984
    Drop the JS document.write and use media queries.

    http://css-tricks.com/6731-css-media-queries/
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  6. #6
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by W8 4me View Post
    So if anyone's still browsing in 800x600 they'll get a nicely laid out page!!!
    Like anyone using a handheld device, assuming they have scripting enabled.

    In the CSS forum they'll show you how to do it all with one file.
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  7. #7
    Join Date
    Jan 2003
    Location
    UK
    Posts
    267
    You've all been a great help but I'm kind of on a deadline so I will utilise your methods once I've configured all my CSS files. Doing everything in one file is right up my street and you make a very good point about mobile devices with scripting disabled.

    Thanks again

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles