Using jQuery button hover effect

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Bartel

    (@andrew-bartel)

    13 years ago

    jQuery is included in WordPress core, you don’t need to include it. Using javascript in WordPress can be a little tricky, because you need to include the files a specific way to avoid funky behavior. Go ahead and remove the file you uploaded to the wp-admin directory. You don’t ever want to touch wp-admin or wp-includes.

    Create a separate javascript file, we’ll call it baz.js, and put it in your theme root. Here’s a fiddle with the basics for how to handle a hover/mouseout event: http://jsfiddle.net/etcth/

    You want to call .css() in jQuery rather than .attr().

    In addition, WordPress uses jQuery in no conflict mode, so rather than $(document).ready(function(){ at the top of your javascript file, put jQuery(document).ready(function($){ That will allow you to $ throughout your js file.

    Lastly, in order to properly include your javascript file, you need to hook it to wp_enqueue_scripts. In you functions.php file, add the following:

    add_action('wp_enqueue_scripts','include_my_scripts');
function include_my_scripts() {
    wp_enqueue_script('baz.js','/path/to/baz.js');
}

    Make sense?

    Thread Starter benrsullivan

    (@benrsullivan)

    13 years ago

    Makes sense, but it’s still not working… I have the feeling I’m doing something wrong in my baz.js file, here’s the code I’ve got:

    jQuery(document).ready(function($){
	$('.modelbutton').on('mouseenter',function(e) {
		$(this).css('background-image','wp-content/uploads/2013/05/buttonA_on.png');
			});
	$('.modelbutton').on('mouseout',function(e) {
		$(this).css('background-image','wp-content/uploads/2013/05/buttonA_off.png');
	});
});
    Andrew Bartel

    (@andrew-bartel)

    13 years ago

    Try an absolute path: http://2013.whitehallrow.com/wp-content/uploads/2013/05/","buttonA_on.png

    Thread Starter benrsullivan

    (@benrsullivan)

    13 years ago

    Still nothing… I’m supposed to have baz.js in my child theme’s js folder, right?

    Andrew Bartel

    (@andrew-bartel)

    13 years ago

    Yes, have you loaded the page and confirmed that baz.js is included properly? Could you post your enqueue code from your functions.php?

    Thread Starter benrsullivan

    (@benrsullivan)

    13 years ago

    add_action(‘wp_enqueue_scripts’,’include_my_scripts’);
    function include_my_scripts() {
    wp_enqueue_script(‘baz.js’,’http://2013.whitehallrow.com/wp-content/themes/twentytwelve-child/js/baz.js’);
    }

    I put that at the very bottom of functions.php.

    Andrew Bartel

    (@andrew-bartel)

    13 years ago

    Hey ben, I don’t why this didn’t occur to me right away, there’s no reason to use javascript at all here anyway. You can just attach a :hover in your css. See: http://jsfiddle.net/etcth/3/

    Thread Starter benrsullivan

    (@benrsullivan)

    13 years ago

    Haha, works like a charm. Thanks a bunch!

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

The topic ‘Using jQuery button hover effect’ is closed to new replies.