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

Question

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.

.resize() is an independent event and can occur before .ready(), before menu is defined. To avoid the race condition, you can bind the .resize() event within the .ready() handler. — Jonathan Lonowski
– Jonathan Lonowski, Commented Jun 5, 2014 at 20:26
This basically only works because you forgot to delimit your variables with comma and made them global ! — adeneo
– adeneo, Commented Jun 5, 2014 at 20:28
So I need to pull the variables outside of the first $(function ? — IEcansuckit
– IEcansuckit, Commented Jun 5, 2014 at 20:29

Chris · Accepted Answer · 2014-06-06 19:23:16Z

2

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

answered Jun 6, 2014 at 19:23

Chris

8332 gold badges7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jfriend00 · Accepted Answer · 2014-06-05 21:02:07Z

0

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:

Avoid globals whenever possible.
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.
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.
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).

edited Jun 5, 2014 at 21:02

answered Jun 5, 2014 at 20:31

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

6 Comments

adeneo Over a year ago

The resize event can still trigger before the DOM is ready if someone is really fast

jfriend00 Over a year ago

@adneo - And, it would do no harm here if the resize went too early. If menu wasn't there yet, the jQuery objects would be empty and their methods would just be noops. That is one of the safety nets of jQuery. If the OP wants to put the resize inside the ready handler, that's probably fine too.

IEcansuckit Over a year ago

This method worked, I wondered why the original source used variables for such a small script. Is this common practice? Like I said, I'm still very new at JS/jQuery

adeneo Over a year ago

I agree, it most definitively shouldn't, jQuery fails silently, I just noticed the comment under the question, and that this didn't move the handler, but it should of course not be neccessary.

jfriend00 Over a year ago

@IEcansuckit - I generally don't ever store the results of selectors in globals because fewer globals is generaly good, code is more self contained if you don't and computers are plenty fast to just fetch the DOM elements via query when needed (particularly in response to a user initiated event). As I did in the .resize() handler, I will fetch it into a local variable within a function if I'm going to refer to it more than once in that function.

|

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related