Develop Reference

hide toggle content, if a user didnt click inside a specific box

I have this code for toggling menus on my site. It will open a menu on click, close others open when you click another and close them all if you click outside.
The issue is, I'm now using this for my search bar to appear too, but if you click inside the search box it vanishes - woops. Would it be possible to amend the hiding code to detect if the user wasn't clicking inside a specific area of the code?
// navbar toggle menu
$(document).on('click', ".toggle-nav > a", function(event) {
event.preventDefault();
event.stopPropagation();
var $toggle = $(this).closest('.toggle-nav').children('.toggle-content');
if ($toggle.hasClass('toggle-active'))
{
$($toggle).removeClass('toggle-active');
}
else
{
$(".toggle-content").removeClass('toggle-active');
$($toggle).addClass('toggle-active');
}
});
// hide the toggle-nav if you click outside of it
$(document).on("click", function ()
{
$(".toggle-content").removeClass('toggle-active');
});

Instead of using click, this uses mouseup. If the target is, for example #search-bar, it won't remove toggle-active from toggle-content elements.
$(document).mouseup(function(e) {
if (!$(e.target).is('#search-bar')) {
$(".toggle-content").removeClass('toggle-active');
}
});
You can see it in action with this jsFiddle.
Hopefully this helps.

How to disable default right click menu of browser

In my Application,in particular div,I want to show custom right click menu with options instead of default browser menu.
I tried with following code.
events: {
"contextmenu #navContainer":"rightClickTest"
},
rightClickTest:function(event){
if (event.button == 2){
alert("Right Click is not possible Here !")
}
}
we am using backbone.js for my Application.Event is working fine but the problem is after completion of event logic,default right click menu appearing as usually.
Note:
I want to disable default right click menu at particular div(navContainer) of my App.
How can I fix this.

This should do it..
rightClickTest:function(event){
if (event.button == 2){
event.preventDefault();
alert("Right Click is not possible Here !")
}
}

Detecting when a user clicks outside a div

I'm showing the user a modal/lightbox. The modal shows up and the rest of the page goes dim when the user clicks a button. Usual stuff.
However I want to do this. If the user clicks any element outside of the modal, I want the modal to go away and the page to return to normal.
How can this be done? I know I can set an onclick event for body, and then check if event target is my modal, but what if the user clicks on a link/textbox/button within the modal? In that case, target won't be the modal. How can I solve this?
Is there a way to check if the event target is contained with <div id="modal"></div>, so if it is, I won't close the modal, and if not, that means user clicked outside the modal and I can close it?

jsBin demo
$(document).mouseup(function(e){
if(e.target.id !== 'modal' ){
$('#modal').hide();
}
});
$('#modal').mouseup(function(e){
e.stopPropagation(); // prevent mouseup propagate to underneath layers
});

You could put a div under the modal that fills the entire space and attach your click handler to it.

$("body").click(function(e){
if( ! $(e.target).closest("#modal").length ){
$('#modal').hide();
}
});
demo

Another one approach:
var mouseOverModal = false;
$(document).click(function(e){
if ( ! mouseOverModal ){
// close modal
}
});
$('#modal').bind("mouseenter mouseleave", function(e){
mouseOverModal = ( "mouseenter" == e.type );
})
$('#open-modal-handler').click(function(){
// open modal
return false; // <- IMPORTANT
})

JavaScript Hide Element When Clicking Anywhere on Page

I have a sliding JS menu that opens when you click the noty_menu link, then closes when you click that link again. Is there a way to set it so that the menu closes when you click ANYWHERE on the page?
Here's the relevant code:
$('.noty_menu').click(function () {
$('ul.the_menu').slideToggle('medium');
});

You could catch a click on the body:
$('body').click(function() {
/* close menu */
});
But then in your menu click you have to prevent propagation of the click up to body. Otherwise the menu will open, the click will propagate up, and the menu will immediately close. return false; should suffice here:
$('.noty_menu').click(function () {
$('ul.the_menu').slideToggle('medium');
return false;
});
(You could also read in the event argument to the handler function like function(ev) { ... } and call ev.stopPropagation()).
You may also want to prevent clicks inside the menu from closing it:
$('ul.the_menu').click(function () {
return false;
});
Note that this solution comes with a caveat that any other click event that stops propagation will also prevent the menu close.

u can use
$('body').click(function(){
//ur code
});
to do this

You can check the entire document, however that includes clicks on the menu (if you have any spacing, this could annoy the user) by something like this:
var menu=$('ul.the_menu');
$(document).on('click',function(){
if(menu.height>0) {
menu.slideToggle('medium');
}
});

Jquery Close menu div on a click event

I have a div which opens when I click a menu button, I am trying to close it if the user clicks anywhere after it is open. The issue I am having is that with my code the show div and the close div when a user clicks I guess are firing at the same time for some reason. The code for the click event is below. How can I make it so they do not fire at the same time and when I open the div that does not fire the click function. Thanks!
//if user clicks and menu is open then hide menu div
$(document).click(function() {
if($("menu").hasClass("menu_closed") == false ) {
//will hide the menu div
closeMenu();
}
}

I think what you want actually is to stop propagation in the other click handler, something like:
$("your_menu_selector").bind("click", function(e){
//your code to open the menu
e.stopPropagation();
return false;
})

You might want to consider adding the event handler to close the menu in the handler that opens the menu. Have it execute only once using the one method. In the handler that opens the menu, simply check to see if it is open already and do a no-op if it is.
$('.openButton').click( function() {
var $menu = $('#menu').
if ($menu.hasClass('menu_closed')) {
$menu.removeClass('menu_closed').addClass('menu_open');
$(document).one( function() {
$menu.removeClass('menu_open').addClass('menu_closed');
});
}
});