Ok i have this drop down menu script. It works fine when all the clicking takes place on the menu itself but when i click off of the menu the drop down does not close. I want the menus to close if the user clicks somewhere on the screen that is not the actual menu.
I have tried adding the code:
document.onclick = ddMenu_close;
But then this makes the menu never open because it is calling "open" through the function but then closing it right away because it then calls the onclick ddMenu_close. My script is below:
<script type="text/javascript">
function ddMenu() {
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function ddMenu_open(e)
{
ddMenu_close();
var submenu = $(this).find('ul');
if(submenu){
ddmenuitem = submenu.css('visibility', 'visible');
}
}
function ddMenu_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden'); }
function ddMenu_timer()
{ closetimer = window.setTimeout(ddMenu_close, timeout); }
function ddMenu_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#ddMenu > li').bind('click', ddMenu_open);
$('#ddMenu li ul').bind('click', ddMenu_timer);
});
}
</script>
So i need to add something to this script that will close the drop down when the ducument or window is clicked but not interferer with the clicking on the menu or the drop down. Thank you for any help.
In ddMenu_open () for $(document) binding click event trigger ddMenu_close ().
In ddMenu_close () cancel $(document) of the click event.
this is the example:
http://jsfiddle.net/bEPvP/
Related
This is basically a menu toggle feature which I want to repeat but can't achieve the intended unless I refresh the page. Clicking on .fa-bars adds class .animate to body which slides in the menu from the left, when the menu is visible clicking anywhere outside the menu area, it hides the menu as well as removes the class.animate from body.
This only works once then I refresh the page.
Any help in this regard will be appreciated
jQuery code
$(document).ready(function()
{
$(document).on('click', function()
{
if($('body').hasClass('animate'))
{
$('body.animate').on('click', function()
{
$(this).removeClass('animate');
});
}
else
{
$('.fa-bars').on('click', function()
{
$('body').addClass('animate');
});
}
});
});
I think he want to close menu when click on body only. This code may help:
$(document).ready(function () {
$('.fa-bars').on('click', function (evt) {
$('body').addClass('animate');
evt.stopPropagation();
});
$('body').on('click', function () {
if ($('body').hasClass('animate')) {
$('body').removeClass('animate');
}
});
});
Click on fb-bars to open menu
Click on body to close menu if already opened
This is the code and this is the result: you can see test the menu by clicking inside.
$(document).ready(function () {
var $links = $('#menu-menu-1 .menu-item a').click(function () {
var submenu = $(this).next();
$subs.not(submenu).hide()
submenu.toggle(500);
$("#menu-2").slideToggle(300);
});
var $subs = $links.next(); });
The problem is that if I click on the menu it appears the submenu, but if I don't close the submenu that I have open and I open another voice in the menu it doesn't work properly.
If I click another .menu-item a when #menu-2 is open what happens? The script close and open another submenu correctly but my #menu-2 close only close. And then if I close .menu-item a so... #menu-2 open. How can I do to fix?
Try
$(document).ready(function () {
var $menu2 = $("#menu-2");
var $links = $('#menu-menu-1 .menu-item a').click(function () {
var submenu = $(this).next();
$subs.not(submenu).hide();
var isVisible = submenu.stop(true, true).is(':visible');
$menu2.stop(true, true);
if (isVisible) {
submenu.hide(500);
$menu2.slideUp(300);
} else {
$menu2.slideUp(300, function () {
$menu2.slideDown(300);
submenu.show(500);
});
}
});
var $subs = $links.next();
});
I think you could simplify what you're trying to do with something along these lines (untested):
$(function () {
var menuItems = $('#menu-menu-1 > li');
var submenus = $('ul', menuItems)
menuItems.click(function () {
submenus.slideUp(); // Hide all menus to their default hidden state
var submenu = $('ul', $(this)); // Show the child menu for the clicked menu
submenu.toggle(500);
});
});
I'm having a problem with my dropdown after in the midst of calling onResize. On a fresh page load the drop-down nav acts correctly but if you resize the browser and click the drop-down for the sub nav, it moves fast and doesn't stay open.
Here's a Live Demo.
Here's just the JS:
var res;
onResize = function() {
var responsive_viewport = $(window).width();
var mobile_menu = $('nav div span');
var mobile_list = $('nav div #main-nav');
if (res){ clearTimeout(res)};
res = setTimeout(function(){
console.log("resize triggered");
if (responsive_viewport <= 1024) {
mobile_menu.add(mobile_list).click(function(event) {
mobile_list.slideToggle('fast', 'swing', function() {
mobile_list.toggleClass('active');
});
event.stopPropagation();
});
$(document).click(function() {
if (mobile_list.hasClass('active')) {
mobile_list.slideToggle('fast', 'swing', function() {
mobile_list.removeClass('active');
});
}
});
}
if (responsive_viewport <= 768) {
console.log('on mobile');
nextvid.addClass('mobile');
} else {
nextvid.removeClass('mobile');
}
},200);
}
$(document).ready(onResize);
$(window).bind('resize', onResize);
Thanks!
What's happening is every time you resize the window (and I guess counting pageload) you bind to the event of clicking on the item. So when you resize the window once, the event fires twice and the dropdown opens then closes. If you resize the window again, the drop down now opens, closes, then opens again. So long story short you should bind only once! If you then want to change the binding (like if they switch to mobile view) you should then unbind then rebind a different way.
Best of luck!
At the moment it shows the divs instead of hiding them and on click it hides just so you can see the movement. Should be .show instead of .hide. On clicking the link, li should slide down and on mouseleave slide back up.
Working example http://jsfiddle.net/DTqDD/3/
jQuery:
$(function() {
var toggleMenu = function(e) {
var self = $(this),
elemType = self[0].tagName.toLowerCase(),
//get caller
menu = null;
if (elemType === 'a') {
//anchor clicked, nav back to containing ul
menu = self.parents('ul').not('ul#mainmenu');
} else if (elemType === 'ul') {
//mouseleft ul, ergo menu is this.
menu = self;
}
if (menu) {
menu.hide('medium');
}
e.preventDefault();
return false;
};
$(document).ready(function() {
$('a.drop').click(function(e) {
$('li#mainmenudrop').show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li#mainmenudrop a').click(toggleMenu);
$('li#mainmenudrop').mouseleave(toggleMenu);
});
});
On li tags change id="mainmenudrop" to class="mainmenudrop" since it ain't valid HTML. Then use the following jQuery code.
$(document).ready(function() {
$('a.drop').click(function(e) {
$(this).next("div").show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li.mainmenudrop').mouseleave(function() {
$(this).children("div").hide('medium');
});
});
Could this possibly be what you are trying to accomplish?
EDIT:
If you want the divs hidden at the beginning, just add this CSS:
.mainmenudrop div {
display: none;
}
My document click function isn't hiding my menu when I click the document outside of my menu. When I click the img it shows the menu and when I click the img again it hides it but when I document click I want it to hide the menu does any one know what I'm doing wrong and how to make it work.
var visible = false;
var id = $(this).attr('id');
$(document).not('#' + id + ' div:eq(1)').click(function () {
if (visible) {
$('.dropdownlist .menu').hide();
visible = false;
}
});
$(this).find('div:eq(1)').click(function (e) {
var menu = $(this).parent().find('.menu');
if (!visible) {
menu.show();
visible = true;
} else if (visible) {
menu.hide();
visible = false;
}
menu.css({ 'left': $(this).position().left + $(this).width() - menu.find('ul').width(),
'top': $(this).position().top + $(this).height() });
})
I had a similar problem and solved it with the following code:
$("body").mouseup(function(){
if (visible) {
$('.dropdownlist .menu').hide();
visible = false;
}
});
instead of your $(document).not(.. code.
//add event.stopPropagation() when the user clicks on a .menu element
$('.menu').on('click', function (event) {
//.stopPropagation() will stop the event from bubbling up to the document
event.stopPropagation();
});
//add the click event handler to the image that will open/close .menu elements
$('img').on('click', function (event) {
//we call .stopPropagation() again here so the document won't receive this event
event.stopPropagation();
//cache .menu element
var $div = $('.menu');
//this if statement determines if the .menu should be shown or hidden, in my example I'm animating its top property
if ($div.css('top') == '-50px') {
$div.stop().animate({top : 0}, 250);
} else {
$div.stop().animate({top : '-50px'}, 150);
}
});
//add click event handler to the document to close the .menu
$(document).on('click', function () {
$('div').stop().animate({top : '-50px'}, 150);
});
jsfiddle: http://jsfiddle.net/jasper/n5C9w/1/