jQuery and IE, object doesn't support this property or method

Question

I've used this bit of code to get a drop-down style menu on a website. It works absolutely fine on all browsers other than IE, and even works fine on IE except on this one page where I get the "Object doesn't support this property or method" error.

Here is where IE tells me the error is, this part is in a "header" file that is loaded first before the rest of the page.

<script type="text/javascript"> 
$(document).ready(function(){
    $("#nav-one li").hover(
        function(){ $("ul", this).fadeIn("fast"); }, 
        function() { } 
    );

if(document.all){
    $("#nav-one li").hoverClass("sfHover");//THIS LINE IS WHERE THE ERROR IS
    };
});

$.fn.hoverClass = function(c) {
    return this.each(function(){
    $(this).hover( 
        function() { $(this).addClass(c);  },
        function() { $(this).removeClass(c); }
        );
    });
};    
</script> 

I don't think the error is in the code because it works fine with no errors on every single page except for this one, this is also the only page that uses additional jQuery code. The rest of the jQuery code runs fine on the page, only the drop-down doesn't work when hovering over the menu items. If anyone can help me find the answer it would be greatly appreciated.

Thanks,

Answer 1

When you call hoverClass, it has not yet been defined. You need to declare $.fn.hoverClass at the top of your code.

$.fn.hoverClass = function(c) {
    return this.each(function(){
    $(this).hover( 
        function() { $(this).addClass(c);  },
        function() { $(this).removeClass(c); }
        );
    });
};   
$(document).ready(function(){
    $("#nav-one li").hover(
        function(){ $("ul", this).fadeIn("fast"); }, 
        function() { } 
    );

if(document.all){
    $("#nav-one li").hoverClass("sfHover");//THIS LINE IS WHERE THE ERROR IS
    };
}); 

Answer 2

You are accessing $.fn.hoverClass before it's being declared. You should declare/load all plugins before any other code, just to be safe.

Also, in $.fn.hoverClass, you don't need .each, you can just return this.hover(). (Also, you don't need a semicolon after if statements).

$.fn.hoverClass = function(c) {
    return this.hover( 
        function() { $(this).addClass(c);  },
        function() { $(this).removeClass(c); }
    );
}; 

$(document).ready(function(){
    $("#nav-one li").hover(
        function(){ $("ul", this).fadeIn("fast"); }, 
        function() { } 
    );

    if(document.all){
        $("#nav-one li").hoverClass("sfHover");//THIS LINE IS WHERE THE ERROR IS
    }
});

Answer 3

I think the plugin is getting overridden by jQuery. May be you have included jQuery multiple times on this page. Try this

$(document).ready(function(){

$.fn.hoverClass = function(c) {
    return this.each(function(){
    $(this).hover( 
        function() { $(this).addClass(c);  },
        function() { $(this).removeClass(c); }
        );
    });
};  

    $("#nav-one li").hover(
        function(){ $("ul", this).fadeIn("fast"); }, 
        function() { } 
    );

if(document.all){
    $("#nav-one li").hoverClass("sfHover");//THIS LINE IS WHERE THE ERROR IS
    };
});