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

  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,273
    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/

  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.

  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