We Keep Coding

Close drop down menu when clicking outside menu

I have the following
function subNavToggle() {
var subNav = document.getElementById("subnav-section");
if (subNav.className === "navigation-subnav") {
subNav.className += " responsive";
} else {
subNav.className = "navigation-subnav";
}
}
I am trying to get the expanded menu to close when clicking outside of menu.
I have this, which will close the menu, but it also closes the hamburger menu - preventing the user to be able to open again.
$(document).click(function(event) {
var $target = $(event.target);
if(!$target.closest('.sub_nav_links').length &&
$('.sub_nav_links').is(":visible")) {
$('.sub_nav_links').hide();
}
});
Also thought I could get away with the following, but it actually does the opposite. Opening outside menu item.
window.onclick = subNav;

$('html').on('click, touchend', function (e) {
// Close hamburger menu when tapping outside
if ($(e.target).closest('#subnav-section').length == 0) {
var opened = $('.navigation-subnav').hasClass('responsive');
if (opened === true) {
$('.navigation-subnav').collapse('hide');
}
}
});

// to hide
$(document).click(function(){
$("#submenu").hide();
});
// you could possibly prevent to hide menu while using navigation
$("#menu").click(function(e){
e.stopPropagation();
});

jquery angularjs how to know if mouse down event is trigger by scrollbar of browser

I have a small panel which i close if mouse down button is pressed anywhere else than that panel, basically it clears the data to display and just with the help of angularjs ng-show i hide it if there is no data...application is in angularjs and jquery
please find the code below
var closeSearchResultsIfClickedOutside = function (e) {
if ($(e.target).parents('.searchResults').length === 0) {
var scope = angular.element($("#searchContainer")).scope();
scope.$apply(function () {
/*Cancels any existing search*/
if ($scope.defer != undefined) {
$scope.defer.resolve();
}
$scope.showSearchResults = false;
reinitialize();
});
$("html").off("mousedown", closeSearchResultsIfClickedOutside);
reinitializePanelsWidth();
}
};
but i dont want to close this panel if mouse down is on scrollbar of browser window or any scrollbar..please tell me how to do that

to fix the above problem i am not capturing both event, mouse down and click, if the target element on both event matches then only i am closing the panel.
/*
If mouse down and click on the same control, then only close the panel,
Click event closing is added to avoid closing panel on scrollbar click.
*/
var closeSearchResultsIfClickedOutside = function (e) {
if (e.type === 'mousedown') { /* only if mouse down is outside of search panel then only close the panel. */
if($(e.target).parents('.searchResults').length === 0)
{
isMouseDownOnSearchPanel = true;
}
else {
isMouseDownOnSearchPanel = false;
}
}
else if (e.type === 'click' && isMouseDownOnSearchPanel) { /*click event is implemented to avoid closing when mouse down is on scrollbar. you dont get click get event for scrollbar*/
var scope = angular.element($("#searchContainer")).scope();
$("html").off("mousedown", closeSearchResultsIfClickedOutside);
$("html").off("click", closeSearchResultsIfClickedOutside);
isMouseDownOnSearchPanel = false;
reinitializePanelsWidth();
}
};

jQuery dropdown div on hover dissapears when you hover on the dropdown

So I made a very simple bare-bones dropdown menu in jQuery. When you hover over the menu button, the sub-menu properly displays, but if you try to move your mouse into the submenu it rapidly dissapears.
Any ideas how to keep that submenu open but at the same time have it close if the user moves their mouse away from the opening icon and NOT into the menu?
var moreCatsHovered = false;
$(".moreCatsRight").mouseenter(function () {// show pohelp
$(".moreCatsRightMenu").fadeIn(100);
});
$(".moreCatsRightMenu").mouseenter(function () {// show pohelp
moreCatsHovered = true;
});
$(".moreCatsRightMenu").mouseleave(function(){ // hide pohelp on mouse out from pohelp
$(".moreCatsRightMenu").fadeOut(100);
moreCatsHovered = false;
});
$(".moreCatsRight").mouseleave(function(){ // hide pohelp on mouse out from pohelp
if (moreCatsHovered == false)
{
$(".moreCatsRightMenu").fadeOut(100);
}
});
Here is my fiddle: http://jsfiddle.net/c3qz0eva/
* EDIT: I cannot change the HTML structure unfortunately *

Try this
$('.moreCatsRight').on('mouseenter',function(){
$('.moreCatsRightMenu').fadeIn(300);
}).on('mouseout',function(event){
var relatedTarget = $(event.relatedTarget);
if(typeof relatedTarget != "undefined"){
if(relatedTarget.hasClass('moreCatsRightMenu')){
return false;
}
}
$('.moreCatsRightMenu').fadeOut(300);
});
$('.moreCatsRightMenu').on('mouseout',function(event){
var relatedTarget = $(event.relatedTarget);
if(typeof relatedTarget != "undefined"){
if(relatedTarget.hasClass('moreCatsRight')){
return false;
}
}
$(this).fadeOut(300);
});

$(".moreCatsRight").mouseleave(function(){ // hide pohelp on mouse out from pohelp
if (moreCatsHovered == true)
{
$(".moreCatsRightMenu").fadeOut(100);
}
});
Your logic is wrong. notice the change I made on the if statement. I think this is what you're trying to do unless I'm misunderstanding the question.

Close an Element on Touch Device Using jQuery

I have the following code which opens a div element on a touch screen device when the main nav menu link (.nav-landing > li) has been tapped. If the nav menu link is tapped for the second time the link becomes active and loads the page link. This all works fine but I can't figure out how to close the div element (.touch-device) if the user stays on the page and no longer needs to see the content within the div element.
(function ($) {
var landingLink = '.nav-landing > li';
// BROWSER WITH EITHER TOUCH EVENTS OR POINTER EVENTS RUNNING ON TOUCH-CAPABLE DEVICE
if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)) {
// DISPLAY LANDING PAGE MEGA NAV ON TOUCH
$(landingLink).live('touchstart', function (e) {
'use strict';
var link = $(this);
var megaDiv = $(this).find('div');
// REMOVE touch-device CLASS IF NAV LINK HASN'T BEEN TAPPED
if (!megaDiv.hasClass('touch-device')) {
$('.touch-device').removeClass('touch-device');
}
if (link.hasClass('hover')) {
// SECOND TOUCH
return true;
} else {
// FIRST TOUCH
link.addClass('hover');
megaDiv.addClass('touch-device');
$(landingLink).not(this).removeClass('hover');
e.preventDefault();
return false;
}
});
$('.close-div').click(function () {
//alert('clicked');
});
} else { // STANDARD DESKTOP BROWSERS WITH MOUSE HOVER
// DISPLAY LANDING PAGE MEGA NAV ON HOVER
$(landingLink).has('div').hover(function () {
$(this).addClass('hover').find('div').show();
}, function () {
$(this).removeClass('hover').find('div').hide();
});
}
})(jQuery);
I've also setup a JSFiddle to show the full example:
JSFiddle

jQuery button toggle

I have a button that toggles a menu popup. I have can make the menu disappear if you click outside of the menu but now my button toggle does not work. If I click the button again the menu stays up. How can I make the menu disappear if you toggle the button or if you click off the container?
jsFiddle: http://jsfiddle.net/PPcfN/
$('.quicklinks-rollover').click(function () {
$('.quicklinks').toggle();
});
$(document).mouseup(function (e) {
var container = $(".quicklinks");
if (container.has(e.target).length === 0) {
container.hide();
}
});

The mouseup function has to take care of the click on the button (quicklinks-rollover).
If fixed the whole thing here:
http://jsfiddle.net/8VUnq/1/
$(document).mouseup(function (e) {
var popup = $('#quickLinksPopup'),
button = $('#quickLinksToggle');
if (popup.is(':visible')
&& !popup.is(e.target)
&& !button.is(e.target)
&& popup.has(e.target).length === 0
&& button.has(e.target).length === 0) {
popup.toggle();
}
});
Keep in mind those two things:
Use IDs to refer to the items quicker and prevent multiple popup conflicts
Using a mouse event on the whole page is not recommended as the event will get triggered very frequently, try using an alternative method such as adding a close button in the popup, or to be more effective, think about adding the mouseup listener on the show of the popup and removing it on the hide.
You can determine the state of the popup with: $(popup).is(':visible') or is(':hidden').

Try :
var $quicklinks = $('.quicklinks');
var msOverLinks = false;
$('.quicklinks-rollover').click(function () {
$quicklinks.toggle();
});
$quicklinks.mouseenter(function() {
msOverLinks = true;
}).mouseleave(function() {
msOverLinks = false;
});
$(document).mouseup(function (e) {
if( ! msOverLinks ) {
$quicklinks.toggle();
}
});

You can do this Normal hide and show method. Because mostly toggle() function wont works in proper manner...
put your HTML button with attribute p="closed" by default:
<button class="quicklinks-rollover" p="closed" title="Quick Links">toggle</button>
Change Your Jquery:
$('.quicklinks-rollover').click(function () {
var a = $(this).attr("p");
var container = $(".quicklinks");
if(a=="closed"){
container.show();
$(this).attr("p","open");
}else{
container.hide();
$(this).attr("p","closed");
}
});
$(document).mouseup(function (e) {
var container = $(".quicklinks");
if (container.has(e.target).length === 0) {
container.hide();
}
});

The reason for this behavior, the mouseup() is binded when I perform the click() on the div. You can check this behavior by adding console.log message in .mouseup event.
So instead try like below.
$('.quicklinks-rollover').on('click', function (e) {
$('.quicklinks').toggle();
e.stopImmediatePropagation();
});
$(document).click(function (e) {
var container = $(".quicklinks");
console.log(container.has(e.target).length);
if (container.has(e.target).length === 0) {
container.hide();
}
});
Working Fiddle