CODEWITHSUNDEEP
javascriptjqueryinternet-explorer
Adam
Adam

Reputation: 25

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

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,

Upvotes: 2

Views: 9196

Answers (3)

gen_Eric
gen_Eric

Reputation: 227310

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

Upvotes: 2

Will
Will

Reputation: 20235

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

Upvotes: 5

ShankarSangoli
ShankarSangoli

Reputation: 69915

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

Upvotes: 0

Related Questions