We Keep Coding

hide menu when click anywhere in page

I have a left menu and when I click it appears and there is a cross button with id close-button when I clicked on it, menu disappears, I need to close also when click anywhere except menu.
site link
(function() {
var bodyEl = document.body,
content = document.querySelector( '.content-wrap' ),
openbtn = document.getElementById( 'open-button' ),
closebtn = document.getElementById( 'close-button' ),
isOpen = false;
function init() {
initEvents();
}
function initEvents() {
openbtn.addEventListener( 'click', toggleMenu );
//bodyEl.addEventListener( 'click', toggleMenu ); //
if( closebtn ) {
closebtn.addEventListener( 'click', toggleMenu );
}
// close the menu element if the target it´s not the menu element or one of its descendants..
/**content.addEventListener( 'click', function(ev) {
var target = ev.target;
if( isOpen && target !== openbtn ) {
toggleMenu();
}
} ); */
}
function toggleMenu() {
if( isOpen ) {
classie.remove( bodyEl, 'show-menu' );
}
else {
classie.add( bodyEl, 'show-menu' );
}
isOpen = !isOpen;
}
init();
})();

You'd better go with something like this. Just give an id to the div which you want to hide and make a function like this.Call this function by adding onclick event on document.
document.onClick=myFunction(event) {
if(event.target.id!="popupDiv_id" || event.target.id=="closeButton_Id")
{
document.getElementById("popupDiv_id").style.display="none";
}
}

If I understand the problem correct you can use the onblur="toggleMenu();" to run the javascript function when the element looses focus. It is the opposite of the onfocus()event.
<div class="menu-element" onblur="toggleMenu();"/>
Can also add the eventlistner in the javascript:
var x = document.getElementById("menu-wrap");
x.addEventListener("blur", toggleMenu, true);
There is some examples of it here: https://www.w3schools.com/jsref/event_onblur.asp

code look like this
$('body').on('click', function (e) {
// hide any open popovers when the anywhere else in the body is clicked
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.menu-element').has(e.target).length === 0 && $(this).is(":visible")) {
var target=$("#popupDiv_id").hide();
}
});

Simply bind a click event to the body to close the menu. Then use event.stopPropagation(); on click of the menu.

Jquery click function not working correctly

Let me start this off with I'm working with someone else's code and am still relatively new to jquery/javascript. I am also using classie.js from another file. If any of this code can be improved please let me know - I am still learning.
I would post html but it's rather long. If it's an issue let me know and I will try and get a live version of my site up.
I'm trying to toggle a mobile menu with two different open buttons: sticky-open-button and open-button.
It works fine right up until I go to close the menu element if the target is not the menu element or one of its descendants. Then it will ONLY let openbtn open the menu.
Problem Code:
// close the menu element if the target is not the menu element or one of its descendants..
content.addEventListener( 'click', function(ev) {
var target = ev.target;
if( isOpen && target !== ( openbtn || stickyopenbtn ) ) {
toggleMenu();
}
} );
}
All code:
(function() {
var bodyEl = document.body,
content = document.querySelector( '.content-wrap' ),
stickyopenbtn = document.getElementById( 'sticky-open-button' ),
closebtn = document.getElementById( 'close-button' ),
openbtn = document.getElementById( 'open-button' ),
isOpen = false;
function init() {
initEvents();
}
function initEvents() {
openbtn.addEventListener( 'click', toggleMenu );
stickyopenbtn.addEventListener( 'click', toggleMenu );
if( closebtn ) {
closebtn.addEventListener( 'click', toggleMenu );
}
// close the menu element if the target is not the menu element or one of its descendants..
content.addEventListener( 'click', function(ev) {
var target = ev.target;
if( isOpen && target !== ( openbtn || stickyopenbtn ) ) {
toggleMenu();
}
} );
}
function toggleMenu() {
if( isOpen ) {
classie.remove( bodyEl, 'show-menu' );
}
else {
classie.add( bodyEl, 'show-menu' );
}
isOpen = !isOpen;
}
init(); //make onclick talk to menu
})();

Your OR condition is wrong as openbtn || stickyopenbtn will always return openbtn instance so the click of stickyopenbtn won't be evaluated.
content.addEventListener('click', function (ev) {
var target = ev.target;
if (isOpen && (target !== openbtn && target !== stickyopenbtn)) {
toggleMenu();
}
});

jQuery separate dblclick events inside and outside of a div element

I'm developing a local site for content creation, and I'd like to use javascript's double click functionality.
I'd like to rotate through full screen background images when the user double clicks outside of the divs with names/ids bigwrapper or bigwrapper2. When the user clicks #bigwrapper or #bigwrapper2, I'd like it to .toggle(); each one to hide/show one or the other.
Here's my updated code (thanks lordvlad):
$(function() {
$( "#bigwrapper" ).draggable();
$( "#bigwrapper2" ).draggable();
var SacramentoBG = ['nightcap.jpg','Tower_Bridge_Sacramento_edit.jpg'],
counter =0;
$('html').dblclick(function (event) {
if (event.target.id != "bigwrapper" && event.target.id != "bigwrapper2") {
counter = (counter+1) % SacramentoBG.length;
$('html').css('background-image', "url("+SacramentoBG[counter]+")");
} else {
$("#bigwrapper").toggle();
$("#bigwrapper2").toggle();
}
});
});
UPDATE: The solution below to add 'event' inside the function partially helped, as the backgrounds rotate properly, however the #bigwrappers aren't toggling as intended (the else condition). See: http://artfuladvection.com/project/NOAA/ndfdGraph/bloom.php Ideas?
Thanks!

that's because the dblclick function doesn't know about the event variable. try this
$('html').dblclick(function (event) {

The complete answer that worked for me was that I needed to stop excluding specific classnames/ids and instead exclude entire element tags. Alternatively, I could just use if (event.target.TagName == 'BODY') {}
$('body').dblclick(function (event) {
if (event.target.tagName != 'DIV' && event.target.tagName != 'IMG' && event.target.tagName != 'TABLE' && event.target.tagName != 'HR' && event.target.tagName != 'SMALL' ) {
counter = (counter+1) % SacramentoBG.length;
$('html').css('background-image', "url("+SacramentoBG[counter]+")");
} else {
$("#bigwrapper").toggle();
$("#bigwrapper2").toggle();
}
});

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

Can I toggle popup after a click event with a mouseout event?

I'm using twitter bootstrap to display popovers with a click event. I'm requesting the info with the click event but I want to hide the popover after it looses focus so the user isn't required to click it again. Is this possible?
Basically I want to show the popover with a click event but then when the launch point looses focus from the mouse the popover is hidden.
Here is a link to the popover doc from twitter-bootstrap: http://twitter.github.com/bootstrap/javascript.html#popovers
This is what I'm currently doing:
jQuery:
$('.knownissue').on('click', function() {
var el = $(this);
if (el.data('showissue') == 'true') {
el.popover('toggle');
el.data('showissue', 'false');
return;
}
$.post('functions/get_known_issues.php', function(data) {
if (data.st) {
el.attr('data-content', data.issue);
el.popover('toggle');
el.data('showissue', 'true');
}
}, "json");
});
Any thoughts?

The following should work.
$('.knownissue').mouseleave(function() {
$(this).popover('hide');
});

Here is a custom jQuery event I call 'clickoutside'. It gets fired if and only if you click the mouse outside of the target element. It could easily be adapted for other event types (mousemove, keydown, etc). In your case, when fired it could close your modal.
(function ($) {
var count = 0;
$.fn.clickoutside = function (handler) {
// If the source element does not have an ID, give it one, so we can reference it
var self = $(this);
var id = self.attr('id');
if (id === '') {
id = 'clickoutside' + count++;
self.attr('id', id);
}
// Watch for the event everywhere
$('html').click(function (e) {
var source = $(e.target);
// ... but, stop it from propagating if it is inside the target
// element. The result being only events outside the target
// propagate to the top.
if (source.attr('id') == id || source.parents('#' + id).length > 0) {
return;
}
handler.call(this, e);
})
};
})(jQuery);
$('#targetElement').clickoutside(function(){
});
EDIT: Example JSFiddle.