using jQuery for multiple purposes

  • miocene22

    (@miocene22)


    15 years, 8 months ago

    OK I’m making a theme and am using jQuery for several things (in order that they are called:

    1. I have a Lightbox 2 plugin. Called in wp_head(). (This plugin also calls its own jQuery file so I have no need to call one separately).

    2. I have cufon text replacement. Called in the head just after wp_head(). (This is so it gets the jQuery file loaded with lightbox).

    3. A custom js script I developed to collapse the sidebar widgets when the widget title is clicked. This script appears just after the cufon scripts.

    So basically this portion of my <head> looks like this:

    <?php wp_head(); ?>

		<!--Cufon Scripts -->
		<script src="<?php bloginfo("template_url"); ?>/cufon/cufon-yui.js" type="text/javascript"></script>
		<script src="<?php bloginfo("template_url"); ?>/cufon/Superclarendon_Rg_700.font.js" type="text/javascript"></script>
		<script type="text/javascript">
			Cufon.replace('#header h1');
		</script>
		<!--/Cufon Scripts -->

		<script type="text/javascript">
	$(document).ready(function(){
				$('.widget h2').click(function(){

					// gets the parent div
					var parent = $(this).parents('.widget');

					// checks if it's active
					var active = $(parent).hasClass('active');

					// if it's active, it slides the div down, otherwise it slides it up
					if(active == true){
						$(this).next().slideDown('fast');
						$(parent).removeClass('active');
					} else {
						$(this).next().slideUp('fast');
						$(parent).addClass('active');
					};
				});
			});
</script>

    The problem is that my custom script is not working. I developed and tested it on a lone simple html page but now I’ve added it to my theme it doesn’t work.
    Firebug reports that $(document).ready is not a function. This is strange because viewing the page source shows that jQuery is loaded just before it. Any ideas?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Chase Adams

    (@realchaseadams)

    15 years, 8 months ago

    Give this a shot:

    var $ = jQuery.noConflict();

    before $(document).ready

    Thread Starter miocene22

    (@miocene22)

    15 years, 8 months ago

    That made my script work (no. 3) but now lightbox doesn’t work. Should I perhaps put it earlier on?

    Also gave the following firebug errors:

    jQuery is not defined
[Break on this error] var $ = jQuery.noConflict();
wordpr...omments (line 21)

element.dispatchEvent is not a function
[Break on this error] element.dispatchEvent(event);
protot...r=1.6.1 (line 4619)

element.style is undefined
[Break on this error] element.style.width = w +"px";
    Chase Adams

    (@realchaseadams)

    15 years, 8 months ago

    This may be a dumb question…but are you actually including jquery?

    <?php wp_enqueue_script("jquery"); ?>

    Also, change
    var $ = jQuery.noConflict();

    to var $j = jQuery.noConflict();

    and everywhere in your script you’ve written $ change it to $j.

    Thread Starter miocene22

    (@miocene22)

    15 years, 8 months ago

    That did the trick thanks.

    Yup deffo using jQuery. Have checked the page source after loading and jQuery is successfully loaded.

    edit: what does <?php wp_enqueue_script("jquery"); ?> do?

    Chase Adams

    (@realchaseadams)

    15 years, 8 months ago

    It loads jquery the proper way in the WordPress framework. It uses the most up to date version within your WordPress install. wp_enqueue_script is the best way to include all scripts in WordPress.

    So your issue is resolved now?

    Thread Starter miocene22

    (@miocene22)

    15 years, 8 months ago

    oh ok thanks.

    I would like to load wordpress the proper way but the lightbox plugin I’m using already loads jQuery automatically which is actually quite annoying.

    Might try and find a way to stop it doing that and load it the way you said.

    Thanks for the help.

    Thread Starter miocene22

    (@miocene22)

    15 years, 8 months ago

    sorry do I put <?php wp_enqueue_script("jquery"); ?> in my theme’s head or in functions.php?

    Chase Adams

    (@realchaseadams)

    15 years, 8 months ago

    The head. Check out the wordpress codex.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘using jQuery for multiple purposes’ is closed to new replies.