$('html').click event after another click event

Question

Intention:

On click of (#clickme) a DIV slides down and comes into view and (var isclicked = true)
When (var isclicked = true) and on click of (#clickme), DIV slides up and (var isclicked = false)
While (var isclicked = true) and DIV is in view, on click of $('html') slides the DIV up and (var isclicked = false)

Issue: While DIV is in the slideDown position, (var isclicked = true), on click of $('html') keeps firing. What am I missing so that on click o f $('html') only fires WHILE DIV is (var isclicked = true)

var isclicked = false; 
$('#clickme').click(function(event){
  doslider();       
  console.log(isclicked);    
  if(isclicked == true){
     $('html').click(function(event){
         console.log('is box opened? '+isclicked);
     });        
  } 
});


function doslider(){     
 if(isclicked == false){    
     $('#myslider').slideDown('slow');         
       isclicked = true;                
 }else{
     $('#myslider').slideUp('slow');
       isclicked = false;          
 }   
 return isclicked; }

JSFiddle: http://jsfiddle.net/7Zfwx/92/

what do you mean by "only fires WHILE DIV is (var isclicked = true)"? — compid
– compid, Commented Jul 30, 2013 at 17:14

tymeJV · Accepted Answer · 2013-07-30 17:12:51Z

1

Ditch the global isClicked var, and just use a slideToggle:

$("#clickme").click(function(e) {
    e.stopPropagation();
    $("#myslider").slideToggle("slow");
});

$("body").click(function() {
    $("#myslider").is(":visible") ? $("#myslider").slideUp("slow") : 0
});

Demo: http://jsfiddle.net/7Zfwx/103/

answered Jul 30, 2013 at 17:12

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JerryHuang.me Over a year ago

This works. e.stopPropagation(); and $("#myslider").is(":visible") does the trick. Thank you

Naftali · Accepted Answer · 2013-07-30 17:07:41Z

1

Remember to stop (and complete) the previous animation first:

if(isclicked == false){    
    $('#myslider').stop(true, true).slideDown('slow');
      isclicked = true;       
}else{
    $('#myslider').stop(true, true).slideUp('slow');
      isclicked = false;   
}

Demo: http://jsfiddle.net/maniator/7Zfwx/94/

answered Jul 30, 2013 at 17:07

Naftali

147k41 gold badges247 silver badges304 bronze badges

Comments

Mohammad Masoudian · Accepted Answer · 2013-07-30 17:23:32Z

0

use $('body') instead of $('html')

see this JSFiddle

answered Jul 30, 2013 at 17:23

Mohammad Masoudian

3,5017 gold badges29 silver badges45 bronze badges

Collectives™ on Stack Overflow

$('html').click event after another click event

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related