We Keep Coding

Open & Close Menu with the same button (Closing not working)

I'm trying to make an overlay menu that opens and close with the click of the same menu. I've tried using some solutions I've seen on this forum but the code I currently have only opens the menu and doesn't close it?
document.getElementById("botaomenu").addEventListener("click", toggleNav);
function toggleNav(){
navSize = document.getElementById("myNav").style.width;
if (navSize == 20) {
return close();
}
return open();
}
function open() {
document.getElementById("myNav").style.width = "20%";
}
function close() {
document.getElementById("myNav").style.width = "0";
}
Here is the fiddle: https://jsfiddle.net/Santos1600/j2L7yga5/1/
I've already got the menu working while using a different button to close the menu, but I would prefer it, from a design point of view, if the same button did both actions on click.

there is an error in width calculation
function toggleNav() {
navSize = document.getElementById("myNav").offsetWidth;
if (navSize > 0) {
return close();
}
return open();
}
If you need it to close after clicking on the different entries
you have 2 options:
1) you can close the menu if you click in any link by just adding
onclick="toggleNav();"
to the specific links.
2) Or in a more generic way, add a class on links ex "mylink"
and
document.body.addEventListener('click', function (evt) {
if (evt.target.className === 'mylink') {
toggleNav();
}
}, false);
in your code

Try this: https://jsfiddle.net/reyq2064/
// document.getElementById("botaomenu").addEventListener("click", toggleNav);
function toggleNav() {
navSize = document.getElementById("myNav").style.width;
if (navSize == '20%') {
return close();
}
return open();
}

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