0

I built this flyout contact panel. It worked fine until I put it into my Wordpress site, then it refused to work at all. Here's what it's supposed to do:

http://jsfiddle.net/XwTpE/1/

I found that if I put jQuery(document).ready at the beginning, it started working, but now it won't close! When you hit the close button, it just re-opens. In fact, I've noticed that anywhere you click on the page causes it to re-open. See demo here:

http://jsfiddle.net/q9b7M/1/

Hopefully this is simple to fix! Any help is appreciated. Thanks!

danzo
  • 301
  • 1
  • 5
  • 18

2 Answers2

0

That's not how you use DOM Ready handler:

jQuery(function ($) { //shorthand for DOM Ready, put your code inside of it
  $('#contactFlyout').click(function () {
    $(".togglepanel:visible").hide();
    $("#contact_panel").animate({
      width: 'toggle',
      height: 'toggle'
    }, 200);
  });
  $('.closeDiv').click(function () {
    $(".togglepanel:visible").animate({
      width: 'toggle',
      height: 'toggle'
    }, 200);
  });
});

Fiddle

The special jQuery(function($){}) syntax is very useful for WP as it aliases jQuery back to $ inside the DOM ready handler scope. Very useful if you don't want to type jQuery over and over again.

Fabrício Matté
  • 69,329
  • 26
  • 129
  • 166
  • You are correct, I always use the jQuery(function($){}) in Wordpress, but I have had problems with it failing me in the past, so for those who don't know about conflicting etc I advised simply using jQuery. Or sometimes if that method fails I use var $j = jQuery.noConflict(); then use $j throughout to reference jQuery, it is pretty robust as well. – Liam Bailey Jan 12 '13 at 21:19
  • @LiamBailey yes, it will be useful data for future users. But provided that the plugins you're using (if any) are wrote correctly using `(function($){})(jQuery)`, the DOM ready `jQuery(function($){})` syntax shouldn't have any problems as jQuery is passed as the `$` parameter to inside the handler scope. As long as all of your code is inside of it, you can safely use `$` to reference jQuery there. – Fabrício Matté Jan 12 '13 at 21:27
  • Also, jQuery is automatically put into `noConflict` by WP right? `var $j = jQuery;` should suffice as well. `=]` – Fabrício Matté Jan 12 '13 at 21:29
  • Indeed, but in Wordpress it isn't only jQuery plugins you have to worry about, but WP plugins as well... You can have dozens of snippets of jQuery going on, and unfortunately they don't always call or pass jQuery around in a consistent way, so you can find that the way we are discussing fails on occasion. I have found the second way I mentioned to be more robust in the WP environment. – Liam Bailey Jan 12 '13 at 21:34
0

You need:

jQuery(document).ready(function() {
  jQuery('#contactFlyout').click(function()
 {
    jQuery(".togglepanel:visible").hide();
    jQuery("#contact_panel").animate({width:'toggle',height:'toggle'},200 );
});

// the close button
$('.closeDiv').click(function()
 {
    jQuery(".togglepanel:visible").animate({width:'toggle',height:'toggle'},200 );

});
});

See: http://jsfiddle.net/DcRHh/2/

Or you can use the shorthand as pointed out by Fabricio. Although I would stick with jQuery over $ inside Wordpress, unless you know what you are doing when it comes to avoiding conflict with other scripts.

Liam Bailey
  • 5,879
  • 3
  • 34
  • 46
  • You guys are awesome! Both ways work perfectly, but I gave the check to Liam only because he had less answers :) Thanks to both of you and thanks Fabricio for the link to learn how to properly use the DOM Ready handler. – danzo Jan 12 '13 at 21:02
  • By giving a check in the 3 minutes you will have rep to upvote answers too. Just sayin'. No problem. `:P` – Fabrício Matté Jan 12 '13 at 21:04
  • No problem @danzo - anytime – Liam Bailey Jan 12 '13 at 21:19