We Keep Coding

jQuery make an event available only when a div is visible and disable it while the div is not visible

I have a dropdown(.dropdown) div that opens when I click on .open:
Html:
<div class="open">Open</div>
<div class="dropdown">Dropdown</div>
jQuery:
$(".open").click(function(){
$(".dropdown").show();
});
Once the dropdown is open I'm using this jQuery script to close it when i click is made outside .dropdown div:
$(document).click(function(){
$('.dropdown').hide();
console.log('click');
});
$('.open, .dropdown').click(function(e){
e.stopPropagation();
});
The problem is that the click event for document is executed even if the div is not visible. Now, I could check to see if the div is visible before executing the .hide() method but is there a solution to activate the event on the document when the div is visible and deactivate it when the div is hidden?

It looks like you need to bind a click event to the document anyways to hide the dropdown. So, what about doing something like:
$(document).ready(function(){
$(document).click(function(e){
if ($(e.target).hasClass("open")) $(".dropdown").show();
else $(".dropdown").hide();
});
});
It's more concise and you don't have to worry about event propagation.

Dynamically applying a class to a button unable to do click event

I have two div of width 100% absolutely positioned side by side. On clicking a button I want to slide it to left. Then on clicking on same button I want it to come back to its normal position.
Here is my JsFiddle
The first part works fine, but I am not able to slide it back. The 2nd part of the jQuery code does not work. Can anyone please tell me the reason why its not working and how to make it work
<div class="about-deals">
<span class="view-tomorrow-deal">View Tomorrow Deals</span>
</div>
<div class="deals-image-wrapper">
<div class="deal-container">
<div class="today-deals">
</div>
<div class="tomorrow-deals">
</div>
</div>
</div>

try this JSFiddle
$(document).on('click', '.view-tomorrow-deal', function(event) {
$(this).removeClass('view-tomorrow-deal');
$(this).addClass('view-today-deal');
$(this).text('View Today Deals');
$('.deal-container').animate({left: '-100%'}, 1000);
});
$(document).on('click', '.view-today-deal', function(event) {
event.preventDefault();
$(this).removeClass('view-today-deal');
$(this).addClass('view-tomorrow-deal');
$(this).text('View Tomorrow Deals');
$('.deal-container').animate({left: '0%'}, 1000);
});

That's not really the way to create toggle functionality.
When you attach an event handler, that event handler is attached to any element matching the given selector at that time, changing the class later does not remove the event handler or make event handlers executed on pageload magically start working, unless they are delegated, but that makes very little sense here.
Just toggle the functionality in the same click handler, if needed use a flag etc.
$('.view-tomorrow-deal').click(function (event) {
$(this).text(function(_,txt) {
return txt == 'View Tomorrow Deals' ? 'View Today Deals' : 'View Tomorrow Deals';
});
$('.deal-container').animate({
left: $('.deal-container').position().left === 0 ? '-100%' : '0%'
}, 1000);
});
FIDDLE

Try jQuery toggle
$( "#clickme" ).click(function() {
$( "#book" ).slideToggle( "slow", function() {
// Animation complete.
});
});
or
$("#book").toggle("slide");
Link : https://api.jquery.com/slideToggle/
for slide effect
Stack link : slideToggle JQuery right to left

How to detect if a specific class link was clicked inside a DIV and override the DIV's click action then?

I have several DIV of the following kind on my page:
<div class='entry'>
This is a statement
<a title="Search #travel" class="app-context-link" href="">#travel</a>
</div>
When a DIV of class .entry is clicked I trigger the following:
$(".entry").on('click', function(e) {
console.log("DIV Clicked");
});
When a link of the class .app-context-link is clicked I trigger the following:
var context_links = document.getElementsByClassName('app-context-link');
for (var k=0;k<context_links.length;++k) {
context_links[k].addEventListener('click', function(e) {
console.log("The context link inside DIV is clicked");
});
}
The question:
Right now when I click on the app-context-link both actions seem to be triggered: for the DIV (because a .click event is detected) and for the link (because there's an event listener on a link of that class).
How do I make it that if the link is clicked the DIV on click jQuery is not triggered?
I tried several possibilities, nothing worked. Also I would prefer not to reorganize the code too much, but simply add some directive in the on click jQuery part so that it detects if a link was clicked and does not do what it would normally do if the DIV was clicked.
Thank you!

you can use like this
$(".entry").on('click', function(e) {
e.stopPropagation();
alert($(this).prop("tagName"));
});
$(".entry a").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
alert($(this).prop("tagName"));
});
DEMO

Use stop propagation :
context_links[k].addEventListener('click', function(e) {
e.stopPropagation(); //Here
console.log("The context link inside DIV is clicked");
});
This will stop the click event from bubbling, so when you click on the a, click events of its ancestor will not trigger.

Is there any unclick event in jquery?

I want to style my div using jquery, i want to make it when i click the background become blue, when i unclick(i clicked on other part other than div in my page) the background become red. Sorry for my bad english

With a click handler on document you can capture all the click events, and if the click is not on your div, you can revert to red
$('#yourdiv').click(function() {
$(this).css('background-color', 'blue');
});
$(document).click(function(e) {
if(!$(e.target).is('#yourdiv'))
$('#yourdiv').css('background-color', 'red');
});
See example: http://jsbin.com/oyunin/1/edit

Im not sure about performace, but you can do something like:
$("*").not("your element selector").on("click",function(){
//other elements click
});
a good practice will be doing this:
$("*","some container").not......

if you want to change the div when you click on another div, you can add a click event on the other div, or perhaps you want to add the click event to the entire body of the document so that if a click event is not captured and stopped by another listener, it will go through to the body's event listener.

Try this,
Jquery Code:
$(document).mouseup(function (e){
var wrapDiv = $(".wrapper");
if(wrapDiv.has(e.target).length === 0){
wrapDiv.css('background-color','red');
}
$('.wrapper').click(function(event){
$('.wrapper').css('background-color','blue')
});
});
CSS code:
<style type="text/css">
.wrapper{
background-color:#0FF;
width:200px;
height:200px;
}
</style>
Html code:
<div class="wrapper">
</div>

The way I solved it in my site was adding a click event to the div in question, and another click event to the document in general. The method stopImmediatePropagation() makes it work as expected:
Here's a jsFiddle with a working example.
HTML:
<div class="colored"></div>
JQUERY:
$(document).click(function(e){
$(".active").removeClass("active");
});
$(".colored").live("click",function(e){
$(this).addClass("active");
e.stopImmediatePropagation();
});
CSS:
.colored{background:red}
.colored.active{background:blue}

Close Toggle on outside click

I'm still quite new to javascript and JQuery...How do I get this div to close by clicking outside the toggle area (I don't want the user to have to use a close button)
the code looks like this:
function toggleDiv(divId) {
$("#"+divId).toggle();
}
function showonlyone(thechosenone) {
$('.newnote').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(0);
}
else {
$(this).hide(0);
}
});
}
and the html looks like this
<div class="note">
<a id="myHeader1" href="javascript:showonlyone('newnote1');" >
<img src="images/SN_NotesPage_14.png">
</a>
<div class="newnote" id="newnote1">
<a>
<img src="images/SN_NotesPage_16.png">
</a>
</div>
</div>
thank you

What I usually do is adding a click event listener to the document body which closes the overlay. To prevent closing the overlay by clicking on it I add a second click event listener to the overlay which contains ev.stopPropagation();
So with jQuery it would look like:
$(document.body).bind('click.closeNote', function() {
$('.newnote').hide();
});
$('.newnote').bind('click.closeNote', function(ev) {
ev.stopPropagation();
});
Another way is to add a transparent div (with a lower zIndex than the note) which covers the whole page. You could then add a click event listener to this div which closes the note.
Edit:
Please note, that the example above is not very performant as it executes a selector on every click. Just bind this event when a note is shown and unbind it when they get closed.