Dropdown Menu Won't Work if jQuery not immediatly included

JavaScript
1

I’m in the process of building this Ballroom Dancing website that has a simple dropdown menu. The menu works if I immediately call jQuery right above the javascript for the menu, ie:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/js/menu.js" type="text/javascript"></script>

The problem is that I don’t want to do this because I already have WordPress calling jQuery several lines above for some other plugins. Is there a reason why it will only work with jQuery included right above?

You can visit the site at www.zumbasudbury.ca to see the non-working dropdown. Hovering over Ballroom should produce a dropdown of two items.

2

I haven’t looked at the code, but I think wordpress uses jQuery in noConflict mode (i.e., jQuery() function instead of $() function), while your js menu uses jQuery in normal mode (i.e., $()) function.
When you include jQuery the $() funcion becomes available and the menu works. When you don’t include jQuery the $() function is not available and your menu doesn’t work.

To test this try this line instead of the jQuery include:


<script language="javascript" type="text/javascript">window.$ = jQuery</script>
3

You seem to have a MASSIVE amount of javascript there! No wonder the page loads quite slowly. On that page, the only javascripty thing I can see is the calendar with its tooltips. What is all the rest for? I suggest you use Firebug and the YSlow add-on for it - it’ll give you some important recommendations for improving your page.

As for the jQuery conflicts, Scallio is right - you have this inline script:

// <![CDATA[
	var ecd = {};
	ecd.jq = jQuery.noConflict(true);
	//]]>

You’re going to have to decide whether to use jQuery in no conflict mode or in normal mode throughout. The noconflict is supposed to be used only if you have other libraries (a bad idea anyway) that use the $() function. Why are you calling noConflict(true)? Most jquery scripts just use the $() function.

4

That is not me adding all that JavaScript, it’s the calendar plugin and the NextGen Gallery plugin.

5

OK, but you don’t need the Gallery one on this page, so it’s superfluous to include it for this page. Same for many others, e.g. the comments or thickbox javascript.

Only include the javascript you’re going to be using for that particular page.

6

I don’t get control over that. I just put in the php call

<?php wp_head(); ?>

and WordPress calls the Javascript in.

7

I do totally agree with you though, unfortunately, I don’t know how to tell WordPress to only include it on the actual pages it requires. If anyone knows, please let me know.

8

Yeah, I imagined it would be so. Is there no way to fine-tune this in the admin settings? I’m not familiar with worpress so I can’t help you there. Perhaps the Scripts and Online Services forum is a good place to ask, but check the wordpress documentation first. I’d be very surprised if you can’t change what wp_head() includes. At the very least you should be able to control which pages the plugins operate in.