Question

I have downloaded the jQuery outside events plugin as Sarfraz suggested, which seems really great, except, I cannot appear to get it functioning correctly.

Here is my code that I’m trying to call it with:

$("#player").bind( "clickoutside", function(event){
  if($('#player').is(':visible')) {
    $('#player').slideToggle(500);
  }
}); 

I don’t understand why this isn’t working.

I think it may have a problem with this jQuery snippet form my other jQuery file:

$('#text_music').click(function() {
  $('#jplayer').slideToggle(500);
});

But I’m not entirely sure.

In this context, #player is the <div> which contains my jPlayer plugin code, and #text_music is just the image which has text reading Music, which, upon click, should slideToggle the #player <div>.

Any ideas as to why this isn’t working?

You can see the implementation (attempted implementation, rather) at http://www.marioplanet.com

Thanks guys!

Answer 1

Looks like you’re slide toggling two different elements. Try changing #player in the callback of your first block of code to #jplayer:

$("#player").bind( "clickoutside", function(event){ 
  if($('#jplayer').is(':visible')) { 
    $('#jplayer').slideToggle(500); 
  } 
});

I tried running this snippet in Firebug’s console immediately after loading the page and then it behaved correctly.