Quick help with on Blur() event in my code - not working

on Blur DIV fadeOut not triggering

[digitalsquare]

Hi,

I have the following JS code, which slides in one of 2 hidden divs on click, and when you click them or the button the divs fade out.

I want to replicate the fadeOut on Blur too, but that part of my code isnt working for some reason.

Im a bit of a noob when it comes to JS, still learning. So any help would be muc apprecited


CODE:

$(document).ready(function(){
  $(".btn-ncl").toggle(function(){
   
   //Open info 
   $(".info-ncl").stop().animate({ down: "+=1200" }, 600) 
   $(".info-ncl").stop().slideDown("slow"); 
  }, function(){
 
   //Close info
   $(".info-ncl").stop().animate({ down: "-=300" }, 1400) 
   $(".info-ncl").stop().fadeOut("slow"); 
 }); 


  $(".btn-gh").toggle(function(){
 
   //Open info 
   $(".info-gh").stop().animate({ down: "+=1200" }, 600) 
   $(".info-gh").stop().slideDown("slow"); 
  }, function(){
 
  //Close info
  $(".info-gh").stop().animate({ down: "-=300" }, 1400) 
  $(".info-gh").stop().fadeOut("slow"); 
 });
 
 
 $(".info-gh").blur(function(){
 alert('blur'); 
  $(".info-gh").stop().animate({ down: "-=300" }, 1400) 
  $(".info-gh").stop().fadeOut("slow"); 
 }); 
 
});

[Fotiman]

It sounds like the element with class 'info-gh' is a div element, in which case the blur event is not going to be triggered automatically (if it was a form element, then it would). You may need to do something like attach a click listener to the body element that fires the blur event. Something like:

$(document).click(function (e) {
  var target = $(e.target);
  if (!target.is(".btn-gh,.info-gh")) {
    $(".info-gh").blur();
  }
});

In other words, on any click event check to see if the target was your '.btn-gh' or '.info-gh' elements, and if not, then fire the blur event on '.info-gh'. Not sure if that's exactly right, but I think that's along the lines of what you'd need to do. Hope that helps.

[digitalsquare]

Hi - thank you for the reply Fotiman. I really appreciate your help.

I couldnt get your suggestion to work tho sadly.


Basically there are two buttons, which are actually list items ('btn-gh' and 'btn-ncl').

When clicked these reveal via slide down, 'info-gh' and 'info-ncl' respectively - yes, both DIVs.

When you click the buttons they fade out which is cool, but id like the same to happen when the user clicks else where on the page, not having to click on the button directly, you know?

[Fotiman]

Hmmm... maybe try adding an alert to that function just to verify that it's getting called when click on any element in the document.