Fix: jQuery(“ul.sf-menu”).superfish is not a function

by Terri Ann on August 14, 2009

I’ve been working on a site lately that uses a lot of jQuery. I’m much more familiar with prototype so sometimes I find myself stumped at some of the problems I run into.

I had the site looking beautiful with superfish drop down menu and a nice side slider. Then I opened a page and suddenly superfish was throwing an error:

Error: jQuery("ul.sf-menu").superfish is not a function

My code looked like:

Javascript

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript">
    jQuery('ul.sf-menu').superfish();
</script>

What baffled me most was that it went from working to not working in zero-to-ten!

After fumbling and useless google searching I finally figured it out. For some reason it was calling the superfish() function before the js/superfish.js file was loaded. There’s an easy fix for that:

Javascript

<script type="text/javascript">
    $(document).ready(function(){   
        jQuery('ul.sf-menu').superfish();
    });
</script>

Tada! Easy to fix: using the ready function on the document.

{ 4 comments… read them below or add one }

1 Torbjoern Karlevid March 11, 2010 at 7:41 am

nope, still the same (superfish 1.48 / typo3)

2 Bellavance F March 26, 2010 at 12:32 am

I had several trouble working with multiple JQuery. Thank you for the tip, I will keep that in my bookmarks.

Best,

3 WonK SenK April 20, 2010 at 9:07 am

This is a very good post, I discovered your weblog doing research bing for a similar subject and arrived to this. I couldnt come across to much other information and facts on this piece of content, so it was nice to discover this one. I probably will end up being back to check out some other articles that you have another time

4 Ahsan August 20, 2010 at 8:21 pm

Nice Post. Thanks for sharing this information with us.

Leave a Comment

Previous post: