We Keep Coding

jquery/javascript: hide div when click anywhere on page except for selected div?

i have div-1 and div-2. when a user clicks on div-1 div-2 is shown. This operates using jquery as a toggle function so when a user re-clicks div-1, then div 2 is hidden again. now i want to add a statement to my jquery that says if the user clicks to another area of the page so an area which is not div-1 then to also hide div-2. can someone please show me how i might do this as i am brand new to jquery and javascript.
thanks
<script type="text/javascript">
$('.notifications').click(function() {
$('.drop_down_column2').toggle();
return false;
});
</script>

It's pretty straightforward:
$('body').click(function() {
$('.drop_down_column2').hide();
});
Because you are returning false from your .notifications click handler, jQuery will prevent propagation of the event up to the body. So in essence, any time you click anywhere, except .notifications, your div will hide.

Trigging tap event jquery mobile

I'm pretty new to Jquery Mobile and I'm trying to trig a tap event.
It's working. If I click the div the class will be added. But if I click the a tag the class will be added to the a tag too.
How can I make the class be added just to the div, no matter if I click the div or a?
Here is the code:
<div id="measure-success">
<div class="measures">How long to prepare each campaign?</div>
<div class="measures">Size of Database</div>
</div>
$(function() {
$("#measure-success .measures").bind("tap", tapHandler);
function tapHandler (event) {
$(event.target).addClass("tap");
}
});

Change $(event.target) to $(this) leave the rest of the code as is.

jquery modal getting it to close when I click elsewhere

at the moment Im only learning javascript and could do with some help here as Im a little confused as to where to go from here.
I have a site with a modal using jquery, I can get it to show when I click on the image, but when I click elsewhere it doesnt turn it off.
Ive tried toggle, but that makes it turn on and off no matter where I click.
Ive tried hide but that stops it working at all (assuming its applying the hide function even when I click on the link)
Heres what I have so far, any help would be great...
jQuery('#youtube').click(function(){
jQuery('#youtubemodal').show();
});

make an function that checks for youtubemodal that is shown and then hide.
$("document").click(function() {
if( $('#youtubemodal').is(':visible') ) {
$('#youtubemodal').hide();
}
});

Here's what you need to do:
$('#youtube').click(function(){
$('#youtubemodal')
.show()
.on("click", function(e){
e.stopPropagation();
});
$(document).on("click.youtubemodal", function(){
$(this).off(".youtubemodal");
$('#youtubemodal').hide();
});
});​
This is how it will behave:
When you click on the image, the modal appears
When the modal appears, we add a listener to document so that when you click anywhere, the modal is hidden (and the listener is removed as well)
When the modal appears, we also add a listener to it, so that if you click on the modal if doesn't hide it: the modal is only hidden if you click outside of it
Note: if you're not using jQuery 1.7 or above, replace .on() with .bind(), and .off() with .unbind()

I came up with my own workaround for this, where I set up a div with a dark background with an opacity of 40%,that appears throughout the page when the modal is loaded.
#modalbackground {
width:100%;
height:100%;
background-image: url('images/modalbackground.png');
background-repeat: repeat;
position:fixed;
z-index:600;
display:none;
}
I then put this div outside of everything to insure it covers the entire page
<div id="modalbackground"> </div>
I then applied this code to make sure the div and the modal closes when I click on the new dark "background".
jQuery('#youtube').click(function(){
jQuery('#youtubemodal').show();
});
jQuery('#youtube').click(function(){
jQuery('#modalbackground').show();
});
jQuery('#modalbackground').click(function(){
jQuery('#modalbackground').hide();
});
jQuery('#modalbackground').click(function(){
jQuery('#youtubemodal').hide();
});

How to simply achieve Google Logout kind of "click anywhere to close" kind of functionality?

Here is what my team member was looking for: How to provide a functionality like GMail where you click on your email and it opens up Logout div with some additional user information and when you click anywhere outside of document it closes that box (hides the div)?

The easiest way to achieve this is binding a click handler for the whole document which closes the box and also one for the box. In the box's event you stop the propagation of the click event so:
$(document).on('click', function() {
$('#box').hide();
});
$('#box').on('click', function(e) {
e.stopPropagation();
});
Demo: http://jsfiddle.net/ThiefMaster/JTtXB/
Note that you also need to stop the propagation of whatever click event opens the box or it will be closed again immediately.

It can be achieved using following code:
HTML:
Dharmavir
<div id="user-card" style="display:none">
<p>
Welcome Dharmavir,<br />
ABC Software, Inc
</p>
Logout
<div>
Javascript:
$(document).ready(function(){
// To show user-box
$("#show-card").mouseup(function(){
$("#user-card").show();
// To hide user-box
$(document).mousedown(function(){
$("#user-card").hide();
$(this).unbind("mousedown");
})
});
});
CSS:
#user-card {
height:75px;
width:200px;
border:solid 1px #ccc;
}
JSFiddle for the same can be seen at http://jsfiddle.net/dharmavir/tPdsE/

How to use javascript onclick on a DIV tag to toggle visibility of a section that contains clickable links?

Hi I've got a DIV section that has only its title visible initially. What I would like to achieve is that when the visitor clicks anywhere on the area of toggle_section the toggle_stuff div toggles between visible/hidden.
<div id="toggle_section"
onclick="javascript: new Effect.toggle('toggle_stuff', 'slide');">
<div id="toggle_title">Some title</div>
<div id="toggle_stuff">
some content stuff
Some link
</div>
</div>
However, the way it is set-up right now, if I have any <a> link within the toggle_section, clicking that link will also execute the onclick event.
Then my question is what would be the best way to set this type of behavior?

The most simple solution is to add an extra onclick handler to the link within your DIV which stops event propagation:
<div id="toggle_section"
onclick="javascript: new Effect.toggle('toggle_stuff', 'slide');">
<div id="toggle_title">Some title</div>
<div id="toggle_stuff">
some content stuff
<a href="/foo.php"
onclick="Event.stop(event);"
>Some link</a>
</div>
</div>
The above example uses Prototype's Event.stop() function in order to facilitate a cross browser event propagation stop.
As you use the inline onclick() handler, most (if not all) browser will traverse the event in the bubbling phase first (which is what you want).
A good guide to understanding the actual reasons behind this behaviour and the differences between event capturing and event bubbling can be found at the excellent Quirksmode.

in script :
function overlayvis(blck) {
el = document.getElementById(blck.id);
el.style.visibility = (el.style.visibility == 'visible') ? 'hidden' : 'visible';
}
activator link, followed by content (no reason that couldn't be else on the page):
<div onclick='overlayvis(showhideme)">show/hide stuff</div>
<div id="showhideme">
... content to hide / unhide ...
</div>
I got this from Modal window javascript css overlay - had to search for the source and was pleased to find it was this site. :)

After I posted my first question I could not wait to try to think about it once more and it seems that I have found a quite simple way to achieve this.
I have moved the onlick Effect.toggle into a separate function like:
function someClick(event) {
if (event.target.nodeName == 'A') {
return;
} else {
new Effect.toggle('toggle_stuff', 'slide');
}
}
I suppose this would only work for A tags and not anything else that is clickable though.

I don't really know if this would work, but try giving the link element a bigger z-index value than the toggle_section div.
something like :
#toggle_section a { z-index: 10; }

Add an onclick handler to stop event propagation.
With JQuery use:
onclick="event.stopPropagation()"
With Prototype use:
onclick="Event.stop(event)"