Page 1 of 1

Small resolution CSS switcher not working in IE

Posted: Sun Apr 12, 2009 5:41 pm
by Wolf_22
Here is my Javascript:

Code: Select all

var w = 0;
if(window.innerWidth !== 'undefined'){w = window.innerWidth;}
else{w = document.body.offsetWidth;}/*targets IE*/
 
if(w <= 800){document.write('<link rel="stylesheet" href="c/c_800px_600px.css" type="text/css" media="screen" />');}
else if(w <= 1024){document.write('<link rel="stylesheet" href="c/c_1024px_768px.css" type="text/css" media="screen" />');}
else if(w <= 1152){document.write('<link rel="stylesheet" href="c/c_1152px_864px.css" type="text/css" media="screen" />');}
Here is my (X)HTML:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="author" content="Moi" />
    <meta name="keywords" content="words,word,w" />
    <meta name="abstract" content="More blah..." />
    <meta name="description" content="Blah. Blah blah..." />
    <meta name="robots" content="all" />
    <title>- Blah -</title>
    <link rel="stylesheet" href="c/c.css" type="text/css" media="screen" />
    <script type="text/javascript" language="JavaScript1.4" src="s/s.js"></script>
    </head>
    <body>
        <div id="w">
            <div id="wR">
                <div id="c">
                    <p>Sed sit amet sem.</p>
                    <p>Nunc tempus justo quis urna.</p>
                </div><!--/#c-->
            </div>
        </div>
        </body>
</html>
The Javascript is working with Firefox, but not IE. The strange thing is that it WAS working a couple days ago, but I'm not sure if I did something to it or if it has something to do with something else. Regardless, could someone help me understand what I've done wrong with it?

Re: Small resolution CSS switcher not working in IE

Posted: Mon Apr 13, 2009 6:25 am
by kaszu
It doesn't work for IE, because window.innerWidth never will be a string with value 'undefined', but it will be with type undefined.
Correct:

Code: Select all

if(window.innerWidth !== undefined)
//or
if(typeof(window.innerWidth) !== 'undefined')

Re: Small resolution CSS switcher not working in IE

Posted: Mon Apr 13, 2009 6:35 am
by Wolf_22
I see! Thanks.