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
    };
});