Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Code to detect resolution not working in IE6

    I'd be greatful to anyone who can help me correct the code for resolution detection for internet explorer6. Most of the following formats work for almost all browsers except IE6 . I'd appreciate any code that yu already have that is working.
    Thanks everbody.
    This format didnt work for IE6
    <SCRIPT LANGUAGE="JavaScript1.2">
    if (screen.height >= 600 && screen.width >= 800) {
    document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/reduced-ie6.css" type="text/css">");
    }
    else {
    if (screen.height == 768 && screen.width == 1024) {
    document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/expanded-ie6.css" type="text/css">");
    }
    else {
    document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/expanded-ie6" type="text/css">");
    }
    }
    </script>

    This code didnt make it either

    <script language="JavaScript" type="text/javascript">
    if(screen.width<=800)
    {document.write("<link rel=\"stylesheet\" href=\"http://www.mysite.com/Css-folder/reduced-ie6.css\" type=\"text/css\"/>");}
    else
    if(screen.width<=1024)
    {document.write("<link rel=\"stylesheet\" href=\"http://www.mysite.com/Css-folder/expanded-ie6.css\" type=\"text/css\"/>");}
    else
    {document.write("<link rel=\"stylesheet\" href=\"http://www.mysite.com/Css-folder/expanded-ie6.css\" type=\"text/css\"/>");}
    </script

    This code also failed

    <script language="JavaScript" type="text/javascript">
    if(screen.width<=800)
    {document.write("<style type="text/css" media="all">@import url(http://www.mysite.com/Css-folder/red...6.css);@import url(http://www.mysite.com/Css-folder/reduced-ie6.css);<style type="text/css" media="all">@import url(http://www.mysite.com/Css-folder/red...o.css);@import url(http://www.mysite.com/Css-folder/reduced-fifo.css)</style>");}
    else
    if(screen.width<=1024)
    {document.write("<style type="text/css" media="all">@import url(http://www.mysite.com/Css-folder/exp...6.css);@import url(http://www.mysite.com/Css-folder/expanded-ie6.css);<style type="text/css" media="all">@import url(http://www.mysite.com/Css-folder/exp...o.css);@import url(http://www.mysite.com/Css-folder/reduced-fifo.css)</style>");}
    else
    {document.write("<style type="text/css" media="all">@import url(http://www.mysite.com/Css-folder/exp...6.css);@import url(http://www.mysite.com/Css-folder/expanded-ie6.css);<style type="text/css" media="all">@import url(http://www.mysite.com/Css-folder/exp...o.css);@import url(http://www.mysite.com/Css-folder/reduced-fifo.css)</style>");}
    </script>

    This code worked partially(outcome was a deshaped look)

    function setStyleSheet()
    { width = getTheWidthThatMatters();
    height = getTheHeightThatMatters();
    if(width<800 && height<600)
    document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/reduced-ie6.css" type="text/css">");
    return;
    }
    else
    if(width<1024 && height<768)
    document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/expanded-ie6.css" type="text/css">");
    return;
    else
    document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/expanded-ie6.css" type="text/css">");
    return;
    }
    setStyleSheet();
    Last edited by Karina; 02-09-2007 at 12:45 AM.

  • #2
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your code has a flow of control bug.

    Test your code for

    screen.width == 1024
    screen.height == 768

    Code:
    // this first if statement is true for those numbers.  it will never get to the next if statement
    if (screen.height >= 600 && screen.width >= 800) { 
      document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/reduced-ie6.css" type="text/css">"); 
    } else { 
      if (screen.height == 768 && screen.width == 1024) { 
        document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/expanded-ie6.css" type="text/css">"); 
      } else { 
        document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/expanded-ie6" type="text/css">"); 
      } 
    }
    try something like

    Code:
    if (screen.height <= 600 && screen.width <= 800) { 
      document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/reduced-ie6.css" type="text/css">"); 
    } else { 
      if (screen.height == 768 && screen.width == 1024) { 
        document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/expanded-ie6.css" type="text/css">"); 
      } else { 
        document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/expanded-ie6" type="text/css">"); 
      } 
    }
    By the way, in your second check you set the css file to either "expanded-ie6.css" for one resolution or "expanded-ie6" for everything else. Is that your intention? If so, I recommend changing the second file name to something more appropriate.

    david_kw

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by david_kw View Post
    Test your code for

    screen.width == 1024
    screen.height == 768
    If checking for screen space with a vew to using that space somehow, then it's often better to check for available space. Certain OS screen components will sometimes take up sme of the total space, reducing what is available for things like app windows.

    e.g.
    Code:
    screen.availWidth…
    screen.availHeight
    However, in most cases, it's best to check the dimensions of the window itself, rather than the screen. A significant number of users do not have their browser windows at fullscreen.

    e.g.
    Code:
    var winW = (window.innerWidth) ? window.innerWidth : document.body.offsetWidth;
    var winH = (window.innerHeight) ? window.innerHeight : document.body.offsetHeight;
    A more exhaustive check…
    Code:
    var winW, winH;
    
    if (window.innerWidth) {
    	winW = window.innerWidth;
    	winH = window.innerHeight;
    }
    else if (document.body.clientWidth) {
    	winW = document.body.clientWidth;
    	winH = document.body.clientHeight;
    }
    else if (document.documentElement && document.documentElement.clientWidth) {
    	winW = document.documentElement.clientWidth;
    	winH = document.documentElement.clientHeight;
    }

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You only need to include either the document.documentElement or document.body test as you can't have both a strict doctype and not a strict doctype on the same page. IE loads the first for a strict doctype and the second for a transitional, loose, or no doctype. Other browsers use innerWidth and innerHeight
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by felgall View Post
    You only need to include either the document.documentElement or document.body test as you can't have both a strict doctype and not a strict doctype on the same page. IE loads the first for a strict doctype and the second for a transitional, loose, or no doctype. Other browsers use innerWidth and innerHeight
    I considered it simpler to show the more exhaustive method, which should work regardless of the render mode, than to add a mini lecture about triggering strict mode.

    I prefer the first method that I posted, but then I can reliably predict which mode browsers will be in when I code...

    Code:
    var winW = (window.innerWidth) ? window.innerWidth : document.body.offsetWidth;
    var winH = (window.innerHeight) ? window.innerHeight : document.body.offsetHeight;
    Last edited by Bill Posters; 02-09-2007 at 11:03 AM.


  •  

    Posting Permissions

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