Small resolution CSS switcher not working in IE

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Wolf_22
Forum Contributor
Posts: 159
Joined: Fri Dec 26, 2008 9:43 pm

Small resolution CSS switcher not working in IE

Post 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?
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Small resolution CSS switcher not working in IE

Post 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')
Wolf_22
Forum Contributor
Posts: 159
Joined: Fri Dec 26, 2008 9:43 pm

Re: Small resolution CSS switcher not working in IE

Post by Wolf_22 »

I see! Thanks.
Post Reply