Develop Reference

Hide mobile menu on click anywhere on a website [duplicate]

This question already has answers here:
Mobile Menu - Click outside menu to close menu
(2 answers)
Closed 6 months ago.
I have one problem, I want to hide the menu on click anywhere on the website, but nothing works for me :(
Here is my code for closing button:
$('.menu-toggle').on('click',function(e){
e.preventDefault();
if ( $('.lang-mobile').hasClass('is-open') ){
$('.lang-mobile a').trigger('click')
}
if ( !$('header').hasClass('is-open')){
$('header').addClass('is-open');
$('#navbar-main').fadeIn();
}
else {
$('header').removeClass('is-open');
$('#navbar-main').fadeOut();
}
Here is some of my HTML structure
<header class="header clear is-open" role="banner">
<div class="navbar" id="navbar-main" style="display: block;">
<div class="navbar-container" style="height: 797px;">
<div class="navbar-item">
I've tried something like this
$(document).click(function() {
var container = $("#navbar-main");
if (!container.is(event.target) && !container.has(event.target).length) {
container.hide();
}
});
and it's not working, could you please help me? What is incorrect here?

This snippet handles two cases.
Every time there's a click on the page it'll check if the header is open and close it
Every time there's a click on the .menu-toggle item it'll open or close the header
<script>
$(document).on('click', function() {
var header = $(".header");
if ( header.hasClass('is-open') ) {
header.fadeOut();
header.removeClass('is-open');
}
});
$('.menu-toggle').on('click', function() {
var header = $(".header");
if ( !header.hasClass('is-open') ) {
header.fadeIn();
header.addClass('is-open');
} else if ( header.hasClass('is-open') ) {
header.fadeOut();
header.removeClass('is-open');
}
});
</script>

Thank you yousoumar
for sharing this link as an answer - Mobile Menu - Click outside menu to close menu this the only thing that worked for me! I only added some needed parts to this code, so here you go if anyone noob like me and needs more details :D
$(document).mouseup(function(e){
var header = $ (".header, .lang-mobile"); //I have two toggle menus with class that collapse navbars, I also have animation on toggle button that's why I need them also to work
var menu = $(".navbar, .dropdown");//this is to hide menus
if (!menu.is(e.target) // The target of the click isn't the container.
&& menu.has(e.target).length === 0) // Nor a child element of the container
{
header.removeClass('is-open');
menu.hide();
}
});

adding and removing a class upon slidetoggle

I have created a 3 x 2 grid of squareish buttons that are monotone in colour. I have a slidetoggle div that pops down inbetween both rows of 3 and as it does so it pushes the content down of the rest of hte page, this is all working perfectly so far.
But i have made a class (.active) thats css is the same as the :hover state so that when i hover over a button the coloured version replaces the monotone version, however i have tried to add some js to make the colour (.active) stay on once i have clicked on a certain button so that you can see which button (product) the slidedown div relates to and the rest are still in monotone around it...
The .active code below works perfectly to turn the bottons colour on and off when you click that one button, but i have set it up so that if one button's div is open and you click on a different one, the open one closes and then the new one opens. This feature however throws off the balance of the code i have for the .active state here. When you have say button 1 open and you click button 1 to close, this works fine, the color goes on and then off, but if yo uhave button 1 open and click on button 2, button 1's div closes and opens button 2's div but then botton 1 stays in colour as button 2 turns to colour. the order is thrown off...
I need to add some js to say, that only one button can be in color (.active) at a time, or that if one is .active it must be turned off before the new one is turned on... Please help :)
$(document).ready(function(){
$("a.active").removeClass('active'); //<<this .active code &
$("#product1").click(function(){
if($(this).parent('a').hasClass('active')){ //<<<this .active code
$(this).parent('a').removeClass('active'); //<<
}else{ //<<
$(this).parent('a').addClass('active'); //<<
} //<<
$("#product2box").slideUp('slow', function() {
$("#product3box").slideUp('slow', function() {
$("#product4box").slideUp('slow', function() {
$("#product5box").slideUp('slow', function() {
$("#product6box").slideUp('slow', function() {
$("#product1box").stop().slideToggle(1000);
//do i need
//something here??
});
});
});
});
});
});
And here is the HTML
<div id="row1">
<a href="#!" class="active"><span id="product1">
<div id="productblueheader">
<div id="productlogosblue1"></div>
</div>
<div id="productstitle">Stops all spam and unwanted email.</div>
<div id="producttext">With over 8 million users ******* is the leading in anit-spam software on the market today! Sort all your spam issues in one place now!</div>
</span></a>
<a href="#!" class="active"><span id="product2">
<div id="productblueheader">
<div id="productlogosblue2"></div>
</div>
<div id="productstitle">The easiest email encryption ever.</div>
<div id="producttext">In todays world, we won’t enter personal details in to untrusted websites, but we send personal information via regular (insecure) email all the time.</div>
</span></a>
<a href="#!" class="active"><span id="product3">
<div id="productblueheader">
<div id="productlogosblue3"></div>
</div>
<div id="productstitle">The easiest email encryption ever.</div>
<div id="producttext">****** is a revelation in security and ease of use. Get the best protection against viruses, spyware, scam websites and other threats.</div>
</span></a>
</div>
(then the same for row2 products 4-6)

you use .each() method of jquery and find .active class to remove it,
and then add .active class.
$(this).parent('a').each(function(){
$(this).removeClass('active');
});
$(this).parent('a').addClass('active');

This ought to work, but I couldn't test it without the relevant HTML:
$(document).ready(function () {
$("#product1").click(function () {
$("a.active").removeClass('active');
$(this).parent('a').toggleClass('active'));
$("#product2box").slideUp('slow', function () {
$("#product3box").slideUp('slow', function () {
$("#product4box").slideUp('slow', function () {
$("#product5box").slideUp('slow', function () {
$("#product6box").slideUp('slow', function () {
$("#product1box").stop().slideToggle(1000);
});
});
});
});
});
});
});
Also, there would probably be a better way to write all those sliding up functions. Do they really need to go on by one by the way?

$(document).ready(function() {
$(".producthandler").click(function() {
var ctx = $(this);
var productboxId = ctx.children().eq(0).attr("id");
ctx.toggleClass('active');
$("#" + productboxId + "box").stop().slideToggle(1000);
$(".producthandler").each(function() {
var ctx = $(this);
var producthandlerId = ctx.children().eq(0).attr('id');
if (productboxId !== producthandlerId) {
ctx.removeClass('active');
$("#" + producthandlerId + "box").slideUp(1000);
}
});
});
});

Show div once clicked and hide when clicking outside

I'm trying to show the #subscribe-pop div once a link is clicked and hide it when clicking anywhere outside it. I can get it to show and hide if I change the:
$('document').click(function() {
TO
$('#SomeOtherRandomDiv').click(function() {
HTML:
<div id="footleft">
Click here to show div
<div id="subscribe-pop"><p>my content</p></div>
</div>
Script:
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById("subscribe-pop");
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
}
$('document').click(function() {
$('#subscribe-pop').hide(); //Hide the menus if visible
});
$('#subscribe-pop').click(function(e){
e.stopPropagation();
});
</script>

You have to stop the event propagation in your container ('footleft' in this case), so the parent element don't notice the event was triggered.
Something like this:
HTML
<div id="footleft">
<a href="#" id='link'>Click here to show div</a>
<div id="subscribe-pop"><p>my content</p></div>
</div>
JS
$('html').click(function() {
$('#subscribe-pop').hide();
})
$('#footleft').click(function(e){
e.stopPropagation();
});
$('#link').click(function(e) {
$('#subscribe-pop').toggle();
});
See it working here.

I reckon that the asker is trying to accomplish a jquery modal type of display of a div.
Should you like to check this link out, the page upon load displays a modal div that drives your eye into the center of the screen because it dims the background.
Moreover, I compiled a short jsFiddle for you to check on. if you are allowed to use jquery with your requirements, you can also check out their site.
Here is the code for showing or hiding your pop-up div
var toggleVisibility = function (){
if($('#subscribe-pop').is(":not(:visible)") ){
$('#subscribe-pop').show();
}else{
$('#subscribe-pop').hide();
}
}

Changing $(document).click() to $('html').click() should solve the main problem.
Secondly, you do not need the toggle_visibility() function at all, you can simply do:
$('#subscribe-pop').toggle();
Ref: changed body to html as per this answer: How do I detect a click outside an element?

jquery animations happen randomly

I have a kind of splash screen, where you press one of the logo's and it animates the logo to the center, then loads the content for it. Then when you press the main top logo, it hides the content and goes back to the splash screen. However I am having problems with this.
Such as, the container hides, then comes back.
Look for yourself: http://dan.roguedraco.net/SpyroDev/
If happens if you click the top logo before the content has fully appeared, but I want to allow for all these occurences. Because it is possible a user may do the same.
Javascript:
$(document).ready(function() {
var inPage = false;
$('.ajax-loader').click(function() {
if(inPage == false) {
inPage = true;
var Obj = this;
$(Obj).siblings("a").fadeOut(500,function() {
if($(Obj).hasClass('left') || $(Obj).hasClass('right')) {
$(Obj).animate({left:'300px'},'slow','easeOutBack',function() {
$('#pageContent').fadeIn(500,function() {
$("#tabs").tab();
});
});
}
else {
$('#pageContent').fadeIn(500,function() {
$("#tabs").tab();
});
}
$(Obj).addClass('current-project');
});
}
});
$('#rootLogo').click(function() {
var Obj = $('.current-project');
if(inPage == true) {
inPage = false;
$('#pageContent').fadeOut(500,function() {
$(this).hide();
if($(Obj).hasClass('left')) {
$(Obj).animate({left:'0px'},'slow','easeOutBack',function() {
$(Obj).siblings("a").fadeIn(500);
});
}
else if($(Obj).hasClass('right')) {
$(Obj).animate({left: '600px'},'slow','easeOutBack',function() {
$(Obj).siblings("a").fadeIn(500);
});
}
else {
$(Obj).siblings("a").fadeIn(500);
}
$(Obj).removeClass('current-project');
});
}
});
});
Html:
<div id="thumbnails">
<div class="row-fluid">
<div class="span12" style="text-align: center;color:#fafafa;">
Click a plugin title for more information and downloads.
</div>
</div>
<div class="row-fluid">
<div class="span12" id='thumbnails'>
<img src="projects/JumpPorts/thumb.png" alt="JumpPorts" />
<img src="projects/RankUpOnKills/thumb.png" alt="RankUpOnKills" />
<img src="projects/InfoButton/thumb.png" alt="InfoButton" />
</div>
</div>
</div>
<div id="pageContent" style="display:none;">
<div class="row-fluid">
...

.stop()
have you tried to use .stop() before your .animate() and .fadeIn() and other animate methods? like: $(Obj).stop().animate({left:

Have you consider to not make the "" of the logo itself clickable? I mean, you're making your event ready whenever it's clicked.
Try this:
In the event of .ajaxloader add on the logo image a sorrounding it at the end of the code of the event.
Then you switch:
$('#rootLogo').click(function() {
var Obj = $('.current-project');
....
}
for this:
$('#click-event').click(function() {
// Assuming #click-event is the name of the span you placed
var Obj = $('.current-project');
.....
}
and in the end you delete the span created on the .ajaxloader.click event
It's an idea, you can use it, tell me if it worked

Problems with the animation queue deforming my divs

So, I have an animated drop down menu that slides down when your mouse is over it, then fades away when it isn't. Simple enough. But if the use moves the mouse before the animation is complete moving down, then it will either jump to the end of the queue exposing the entire menu and then fading, or it deforms the menu by making it shorter depending on what parameters I pass to stop().
How do I fix this?
EDIT::
Here's pictures of what I'm talking about:
Before:
http://img192.imageshack.us/i/beforetc.jpg/
After:
http://img682.imageshack.us/i/afterr.jpg/
$('.menu')
.mouseover( function() {
var subMenu = [];
$(this).next().children().each( function() {
subMenu.push( $(this) );
});
slideMenu(subMenu);
});
$('.menuItem').parent()
.mouseleave( function() {
$(this).find('.menuItem').children().stop(true,false).fadeOut(200);
});
function slideMenu(menu) {
var subMenu = $.makeArray(menu);
if ( subMenu.length == 0 )
return true;
else {
var menuItem = subMenu.shift();
$(menuItem).slideDown(50, function() { slideMenu(subMenu); });
}
}
<div class='box'>
<div>
<div class='menu'>Resources</div>
<div class='menuItem'>
<div>Library</div>
<div>Internet</div>
<div>Your mom</div>
</div>
</div>
</div>

Well I made another recursive method that checks if the element is animated, and then stops and hides it. The key here is separating each child and then using the stop()'s second parameter which jumps to the end of the animation queue. This will render the child fully visible and slid down so that is not truncated. Before when I was using the [...].children().each( function() {} ), it would jump the end of the entire animation queue effecting all children. Maybe this'll help someone else in my predicament.
$('.menuItem').parent()
.mouseleave( function() {
var subMenu = [];
$(this).find('.menuItem').children().each( function() {
subMenu.push( $(this) );
});
hideMenu(subMenu);
});
function hideMenu(menu) {
var subMenu = $.makeArray(menu);
if ( subMenu.length == 0 )
return false;
else {
var menuItem = subMenu.shift();
$(menuItem).is(':animated') ? $(menuItem).stop(false,true).hide() :
$(menuItem).fadeOut(300);
hideMenu(subMenu);
}
}