SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Location
    Utrecht, The Netherlands
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Adding css-links depending on clients screen resolution

    Hi all,

    I want to check what screen resolution the client has using javascript, and then load a different stylsheet depending on the browser resolution. I am making an elastic design using one css file to cater for all screen sizes, but still need two additional stylesheets to set the initial font-size in percentages for different screen resolutions.

    I have one main css file, which is linked to with a simple <link> tag. Then there are two other css files: one for screen resolution above 1024x768, and one for screen resolution below 1024x768. I understand that the largest part of the users uses 1024x768, then 800x600 and then 1280x1024.

    Now, I'm not experienced with javascript, and this is what I have come up with. It doesn't work and I don't have a clue why not! Here it goes:

    Code:
    <script type="text/javascript">
    if (screen.width > 1024) { document.write('<link rel="stylesheet" type="text/css" href="1280x1024.css">'); }
    if (screen.width < 1024) { document.write('<link rel="stylesheet" type="text/css" href="800x600.css">'); }
    </script>
    I noticed that the document.write command is deprecated for XHTML. Is it a problem I used it? Maybe I didn't understand correctly, but I thought it shouldn't be, since I'm using html4 loose.

    I hope anyone can help me with this! I would be really grateful! Thanks for any help in advance!

    Best regards,
    Martijn Senden.

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    It works but nothing new? happens with a 1024 screen,
    if you link the js file like the css files it validates

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's an idea:
    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="s1.css" />
    <script type="text/javascript">
    function changeSS() {
    	if( screen.width < 1024 ) {
    		document.getElementsByTagName("link")[0].href = "s1.css";
    	} else {
    		document.getElementsByTagName("link")[0].href = "s2.css";
    	}
    }
    </script>
    </head>
    <body onload="changeSS()">
    blah
    </body>
    </html>
    Make sure you put the "safe" stylesheet in the link tag as the default - that way it will still work if JS is turned off or whatever.

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Location
    Utrecht, The Netherlands
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I must have been unclear

    Hi,

    Thanks for the input!

    Quote Originally Posted by jimfraser
    Here's an idea:
    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="s1.css" />
    <script type="text/javascript">
    function changeSS() {
    	if( screen.width < 1024 ) {
    		document.getElementsByTagName("link")[0].href = "s1.css";
    	} else {
    		document.getElementsByTagName("link")[0].href = "s2.css";
    	}
    }
    </script>
    </head>
    <body onload="changeSS()">
    blah
    </body>
    </html>
    Make sure you put the "safe" stylesheet in the link tag as the default - that way it will still work if JS is turned off or whatever.
    I'm afraid I haven't been to clear. I have an html document that already has a stylesheet linked to it, which caters for all resolutions. Then there is the javascript that tweaks only the initial font-size (in percentages) for resolutions lower than 1024x768 and for resolutions higher than 1024x768. The initial font-size at 1024x768 is fine with the main stylesheet from the html <link> tag.

    I have a site that shrinks and grows as the clients browser window is changed (elastic design). The reason why I want to do this is little javascript tweak is that it will make it possible to let the initial font-size be more or less equally readable on all screen resolutions. It will still be possible to change the browsers font display settings, since I'm using percentages for the initial font-size.

    Well, anyway, your code is aimed at switching between different stylesheets, which isn't what I want to do. I want to overrule the font-size in my main stylesheet with a different setting taken from the other two stylesheets, when the screen resolution is not 1024x768.

    So, this leaves the question: What was wrong with my original code? It didn't work for me....

    Thanks for the input so far.

    Best regards,
    Martijn Senden.

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    <script type="text/javascript">
    if (screen.width > 1024) { document.write('<link rel="stylesheet" type="text/css" href="1280x1024.css">'); }
    if (screen.width ==1024) { alert("lees post 2")}
    if (screen.width < 1024) { document.write('<link rel="stylesheet" type="text/css" href="800x600.css">'); }
    </script>
    Last edited by all4nerds; Apr 7, 2005 at 08:28.

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Location
    Utrecht, The Netherlands
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I missed your first post. I tried your suggestion, but to no avail. I must've done something wrong whith linking the pages? Nevertheless, I got it working in IE, with the javascript embedded in the html. Firefox however still negelcts the stylesheets I'm trying to embed with the javascript. Are you sure it's not the document.write?

    Best regards,
    Martijn Senden.

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Try this, test run page, script

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled</title>
    <script type="text/javascript">
    if (screen.width > 1024) { document.write('groter 1024'); document.write('<style type="text/css">body{background:#c0c0c0;}</style>'); }
    if (screen.width ==1024) { alert("switch to 800x600 or Bigger then 1024")}
    if (screen.width < 1024) { document.write('kleiner 1024'); document.write('<style type="text/css">body{background:#ffff00;}</style>'); }
    </script>
    </head>
    <body>
    </body>
    </html>


Bookmarks

Posting Permissions

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