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

Question

I am having problems with my superfish drop down menu - it was working fine before i added the jQuery.Columnizer to my project. Taken out the columnizer jQuery fixes the problem for the superfish.js - however when both are enabled and running the drop down menu is displayed when you hover over the menu but when you try clicking on the menu link in the dropdown the dropdown disappears. I cant seem to fix this problem - i've googled around and followed various advice and examples but to no avail.

I am using the columnizer to split up my content in to like 3 columns. Is the problem because i am referencing 2 jquery libraries?

Superfish.js

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="/assets/css/main.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/assets/css/superfish.css" media="screen" />
<script type="text/javascript" src="/assets/js/hoverIntent.js"></script>
<script type="text/javascript" src="/assets/js/superfish.js"></script>
<script type="text/javascript" src="/assets/js/jquery-1.2.6.min.js"></script>

  <script type="text/javascript">
      // initialise plugins
      $(document).ready(function () {
          jQuery('ul.sf-menu').superfish();
          //alert("hello i am working... maybe or maybe not!");
      });
</script>

Columnizer.js

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="/assets/js/jquery.columnizer.min.js" type="text/javascript"></script>

<script type="text/javascript">
$('#wrapper').columnize();
$('.wide').columnize({ width: 200 });
</script>

UPDATE: Here is the solution to the problem;

<add key="**********.*********.***.JQuery.Path" value="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/>

taking out both the previous references and updating it with the latest CDN ensured it was working perfectly - i referenced the .JS in my webconfig and then code behind page. Phew.. working now - thanks for all your help people.

Solution

you are adding jquery twice remove this line

<script type="text/javascript" src="/assets/js/jquery-1.2.6.min.js"></script>

or if you need to include two versions of jquery on the same page because of plugin support refer to this answer

https://stackoverflow.com/a/528251/413670

EDIT

if your plugins support the jquery version try this

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="/assets/css/main.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/assets/css/superfish.css" media="screen" />
<script type="text/javascript" src="/assets/js/hoverIntent.js"></script>
<script type="text/javascript" src="/assets/js/superfish.js"></script>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="/assets/css/main.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/assets/css/superfish.css" media="screen" />
<script type="text/javascript" src="/assets/js/hoverIntent.js"></script>
<script type="text/javascript" src="/assets/js/superfish.js"></script>
<script src="/assets/js/jquery.columnizer.min.js" type="text/javascript"></script>

<script type="text/javascript">
      // initialise plugins
      $(document).ready(function () {
          jQuery('ul.sf-menu').superfish();          
          $('#wrapper').columnize();
         $('.wide').columnize({ width: 200 });

      });
</script>

Comments

[mjcoder]

if i take that out then it brings up this error message in firebug Error: $clone.prop is not a function Source File: http://localhost:53225/assets/js/jquery.columnizer.min.js Error: jQuery("ul.sf-menu").superfish is not a function Source File: http://localhost:53225/*****/*****/********.aspx Line: 15 leaving that line in you said to take out doest bring up the first error. Proper confusing.

[mjcoder]

3nigma i added the reference to jQuery in the web.config and then referenced it in my code behind page - using the latest CDN as a reference solved the problem - i took out the old one that was hiding in another page which was conflicting with each other - working perfectly fine now. <add key="********.******CMS.BLL.JQuery.Path" value="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jqu‌​ery.min.js"/> PHEW! Took me a few hours but got there in the end... first post updated