Develop Reference

click outside bootstrap menu to close it

I tried to find solution to close bootstrap menu when clicking outside of it(in mobile window size), but cant get it to work, I get it to work when clicking one of the 'a' links by this code:
// menu buttons collapses when clicking a link
$('document').ready(function()
{
if ($('a').on('click', function()
{
$('.collapse, #mainContainer').removeClass('in');
$('.navbar-toggle').toggleClass('collapsed'); // button
}));
});
but how to close menu by clicking outside the menu navbar?
here's my page that shows the problem
iwebdesign.se
and yes i tried this already, not working:
similar question

Assuming you want to do something different when clicking outside of the menu (i.e. collapse the menu) than what happens when you click inside the menu, you probably want something like this to determine if you're clicking inside or outside of the menu:
$('body').click(function(event){
// check if the clicked element is a descendent of navigation
if ($(event.target).closest('.navigation').length) {
return; //do nothing if event target is within the navigation
} else {
// do something if the event target is outside the navigation
// code for collapsing menu here...
}
});
https://jsfiddle.net/L3qg4pa8/5/ shows the concept, roughly.
Of course, you will need to replace '.navigation' in the .closest() statement with the appropriate selector for the container of your navigation.

$(document).on('click',function(){
$('.collapse').collapse('hide');
});
Just copy the code and past your custome script or index.html
thank's Remy
click outside to hide bootstrap toggle menu close(hide) it

Here the answer :
(document).on('click',function(){
$('.collapse').collapse('hide');
})
Hope it's help :)
Remy

First dropdown menu not closing after hovering second menu

I get some issue when opening the menu1 dropdown and directly after mouseover the menu2 to open it without closing de menu1.
If I open the menu1 and move the cursor out from the nav to close the dropdown and then mouseover the menu2 it works fine.
If I go directly from menu1 to menu2 or inversely, the menu2 dropdown appear under the menu1 dropdown.
I thinks that I have a mistake in my html or it can be fix with a jquery function but I don't know how to solve this. I wish to add more menu, in the actually there are only two.
I hope that you understand my problem,
Any help would be appreciated
$(document).ready(function () {
var menu = $('.menu')
menu.hide();
$("#mainbutton").mouseenter(function(){
$(".menu").stop().slideDown("fast");
});
$("#nav").mouseleave(function(){
$(".menu").stop().slideUp("fast");
});
var menu2 = $('.menu2')
menu2.hide();
$("#secondboutton").mouseenter(function(){
$(".menu2").stop().slideDown("fast");
});
$("#nav").mouseleave(function(){
$(".menu2").stop().slideUp("fast");
});
});
Here the JSFiddle

I would suggest to add a general class name to all menus .menu and a specific selector for each individual menu (#menu1 or .menu1) as well as an indicator for the active state .active. this way you can simply close all .menu.active
see the following fiddle as a simple proof of concept:
https://jsfiddle.net/ad3a5qyw/2/
EDIT:
I've abstracted the fiddle so you can add data-menu attributes to the nav-items to indicate the associated menu.

I see what's going on here:
It's easy with jQuery and the code you've written already, and here's an example with a new menu item to show how easy it is: https://jsfiddle.net/xyqoj24m/2/
What's going on is that the mouseleave functions are only run when the mouse leaves the entire #nav element. So what needs to be done is handle the hiding/showing of the menus like so:
When the mouse hovers over a menu item, close all other dropdowns and show the correct one.
When the mouse leaves the dropdown or the menu item, close the dropdown.
Take a look at this Javascript and see what that means:
$("#mainbutton").mouseenter(function(){
$(".menu").stop().slideDown("fast");
$(".menu2").stop().slideUp("fast");
$(".menu3").stop().slideUp("fast");
});
$("#secondbutton").mouseenter(function(){
$(".menu2").stop().slideDown("fast");
$(".menu").stop().slideUp("fast");
$(".menu3").stop().slideUp("fast");
});
// leave the first menu dropdown
$("#mainbutton, .menu").mouseleave(function() {
$(".menu").stop().slideUp("fast");
});
// leave the second menu dropdown
$("#secondbutton, .menu2").mouseleave(function() {
$(".menu2").stop().slideUp("fast");
});
Feel free to ask questions!

Leaflet popup close button

I'm making a leaflet map for my own website, I'm not good at javascript html and css, so that's why I going to ask this question here..
Is there anybody who know how to add a X (Close button) to the right corner?
The code I am using can be found over here:
http://jsfiddle.net/z1nw3pt4/2/
layer.on('click', function (e) {
document.getElementById("info").innerHTML = feature.properties.name;
$("#feature_infos").stop();
$("#feature_infos").fadeIn("1000");
console.log(feature.properties.name);
});
The code above her is for opening the popup.

When you click any of the dots, the info box is shown using
$("#feature_infos").fadeIn("fast");
You can add an extra element inside the box that does the opposite (.fadeOut("fast")) when you click it:
HTML:
<span class="close">X</span>
JS:
$('.close').click(function() {
$('#feature_infos').fadeOut('fast');
});
Working demo: jsFiddle
The only styling I added is to position the X in the top right, but obviously you can do whatever you want with it. All that matters is binding the fadeOut method to the click event to close the popup again.

onclick dropdown menu with a form, click outside to close

ive got a drop down menu with form elements. the menu element gets set to
display:none
when anything outside the element is clicked ... or at least so i thought.
Here's my little function
$(function(){
$('#loginAcc').click( function(event){
event.stopPropagation();
//show
$('#auth-menu').css('display', 'block');
});
$(document).click( function(){
//hide when click anywhere out the menu
$('#auth-menu').hide();
});
})
the problem i have is that it also closes when i click inside the element, which makes it very difficult, pretty much impossible to complete a form.
#loginAcc
is a horizontal list item that gets clicked, and
#auth-menu
is
if i were to hazard a guess, i would like to think that .toggle() is the culprit, but that's a sheer guess and i wouldn't even know where to start if i were to reimplement it (a little bird told me that it's getting taken out of the spec anyway).
what i would like to happen is that when you click on the #loginAcc list item, the #auth-menu gets set to display:block, and can only be closed if you reclick #loginAcc or anywhere else outside of #auth-menu.
any help would be amazing. thanks

Use a not() selector to exclude the menu:
$(document).not('#auth-menu').click( function(){
//hide when click anywhere out the menu
$('#auth-menu').hide();
});

jquery show/hide content based on button

I have a product page and i would like to add a tech spec button to the page which will open and close a show hide that is to be situated below the product description. I need the user to be taken down to the tech spec when the show hide opens.
I think i need to use jquery but when the show/hide is hidden, i.e nobody has pressed the button the footer should come up, so there shouldnt be any white space.
any examples links that i could refer too?
could anyone be kind to make me a little jsfiddle?
Thanks

Really simple with jQuery slideToggle:
http://jsfiddle.net/r7Qf7/12/ (example with new scrolling on button click).
Scrolling to the tech specs section once the button is clicked can be accomplished with the animate function in jQuery, like so.
$('html,body').animate({
scrollTop: $("#techspecs").offset().top
}, 'slow');

First, you've got to add the click event to the button, after the document is ready:
$(document).ready(function(){
$("#Button_ID").click(function(){
$('#Tech_Spec').toggle();
});
});
jsfiddle: http://jsfiddle.net/YEtBy/