Question

I am stumped… I’m building a responsive site that loads a large an graphic only on larger screens. It works great in IE9/FF/Chrome, but it doesn’t function in IE8.

Am anyone see what is making IE8 not fire? Here is my code:

<script type="text/javascript">
$(document).ready(function() {
   $(window).resize(function() {
    //small-screen
    if (window.innerWidth < 768) {$('#smiling-model').html('');}
    //end small-screen
    else if (window.innerWidth >= 768) {
        $('#smiling-model:empty').append('<img id="#smiling-model-img" src="images/smiling-model-500x456px.jpg" alt="Great Smile" />');
            }
    }).resize(); // trigger resize event
});
</script>

Here is the link to the actual site: http://www.orlickdental.com/

Thanks all!

Omar

Answer 1

As far as I’m aware window.innerWidth isn’t supported by Internet Explorer below version 9

For more information check this DOM Compatibility information provide by good old Quirksmode 🙂

As you are already using jQuery you can rely on $(window).width(). However – in the spirit of knowledge – getting hold of the window’s dimensions was always a problem with IE. The main way to do it was to rely on the dimensions of the body element (using body.clientWidth) or to actually insert a specific div that was designed with css to fill the window’s dimensions (and then read the dimensions from that element). jQuery now obviously takes all the fun out of it 😉