CODEWITHSUNDEEP
javascriptjqueryinternet-explorer-8
IEcansuckit
IEcansuckit

Reputation: 36

IE8 JS error: Object doesn't support this property or method

I'm using the following JS I found online to implement a responsive navigation. There is nothing on the source about having any errors in IE8, however I'm doing some compatibility testing in BrowserStack (Win7+IE8) and getting the "Object doesn't support this property or method" error. Here is the entire script:

<script>
$(function() {  
    var pull        = $('#menu');  
        menu        = $('nav ul');  
        menuHeight  = menu.height();  

    $(pull).on('click', function(e) {  
        e.preventDefault();  
        menu.slideToggle();  
    });  
});  

$(window).resize(function(){  
    var w = $(window).width();  
    if(w > 320 && menu.is(':hidden')) {  
        menu.removeAttr('style');  
    }  
});
</script>

And this is the line that IE8 doesn't like (character 6 specifically):

if(w > 320 && menu.is(':hidden')) {

Any help in solving this would be awesome, I'm still not the best at JS.

Upvotes: 2

Views: 18929

Answers (2)

Chris
Chris

Reputation: 833

I hope you realize that single var statement doesn't apply to all of the variables. You are declaring global variables.

Upvotes: 2

jfriend00
jfriend00

Reputation: 707158

Just stop storing jQuery objects in globals at all. It doesn't cost much to just create them upon demand and you don't get into this lifetime/scoping issue that you had:

<script>
$(function() {  
    $('#menu').on('click', function(e) {  
        e.preventDefault();  
        $('nav ul').slideToggle();  
    });  
});  

$(window).resize(function(){  
    var menu = $('nav ul'); 
    if($(window).width() > 320 && menu.is(':hidden')) {  
        menu.removeAttr('style');  
    }  
});
</script>

Some general design/code layout thoughts that apply here:

  1. Avoid globals whenever possible.
  2. Don't declare something in one scope and then try to use it in another scope (won't work unless global so see rule #1) and if global may have timing issues too.
  3. Fetch selector results only when needed in the function where they are consumed. There is very, very rarely a reason to cache something like that beyond the lifetime of a function.
  4. If you are going to refer to the same jQuery object more than once within a function, then you may want to save it into a local variable for the duration of the function (as long as its results won't be modified within the function).

Upvotes: 0

Related Questions