I'm using Bootstrap 3 nav as something like "collapsible div" only which holds multiple level menu. but I have an issue with the nav items or its hyperlinks click event and want to disable it so my menu works the way I want.
For sure I've assigned my custom events to the nav items which open the second level but for some reason that doesn't work fine on mobiles.
I even tried javascript:void() for the hyperlinks but I think the click event of bootstrap is assigned to the <li>
Use the following to prevent the default link behavior.
$( "a" ).click(function(e) { // target any selector
e.preventDefault();
});
Related
I have created a dropdown functionality using Jquery with one event listener that allows me to close the dropdown when clicked anywhere outside the dropdown container and another event listener which handles the submenu items.
By design the dropdown should stay open even if the submenu items are clicked and should only close if the toggle button is clicked or the user clicks outside the dropdown container.
The problem
Lets say that general.js has the click event listener as follows
$('document').on('click.namespace',function(e){ // do stuff });
Now anotherscript.js has an event listener which handles the actual sub menu clicks
$('#clickbutton').on('click', function(e){
// Remove all html from inside the .dropdown container
// Recreate the html using another js function
$('.container').html(recreatedhtml);
});
The problem occurs when I try to identify who the parent of the submenu button click target is, because I want to know if the click was inside the container or outside.
Since a click on #clickbutton removes html from the container and reinserts it I believe this causes problems for the parents() function therefore the parents('.dropdown') function returns false even though the sub menu item is a descendent of the dropdown class.
Check the target of the event
$(document).on('click.namespace',function(e){
if(!$(e.target).closest(dropdownContainerSelector).length){
// click is not in dropdown container
}
});
Note that document is not a string, it is a global object within window
I've got a dropdown menu on a site I'm working on that has different classes added to it when it is activated. It's built into a WordPress theme so I'm having to build a workaround on it for iPad landscape mode. The site navigation displays the same as desktop when on landscape so I need to create some touch events to mimic the behavior.
The first thing I'm having to do is to deactivate the link on the first click and then reactivate it if it's clicked again. This works fine.
if ('ontouchstart' in document.documentElement) {
$('#masthead nav ul > li:has(.sub-menu) a').click(function(e){
e.preventDefault();
$('li.clicked_link').on('click', function(){
var this_link = $(this).find('> a').attr('href');
document.location.href=this_link;
});
$(this).parent().addClass('clicked_link');
});
}
The problem is that when you click on the li.sub-menu it adds a class of sub-hover onto it which activates a dropdown menu. It's a CSS/jQuery dropdown menu so it's based on the presence of that sub-hover class. It works fine when I first click but I then want to remove that class when you click outside of it. It deactivates it if I click another link in the dropdown but I'd like to bind a click event to the html or body elements so if you click anywhere outside of it, it will remove the sub-hover class, thus removing the dropdown.
I tried to do this:
if ('ontouchstart' in document.documentElement) {
$('#masthead nav ul > li:has(.sub-menu) a').click(function(e){
e.preventDefault();
$('li.clicked_link').on('click', function(){
var this_link = $(this).find('> a').attr('href');
document.location.href=this_link;
});
$(this).parent().addClass('clicked_link');
$('html').on('click',function(){
$('#masthead nav ul > li:has(.sub-menu)').removeClass('sub-hover').removeClass('clicked_link');
});
});
}
It doesn't work though because it seems to fire the first click function and then immediately fire the html click function. I tried to use bind as well but the same thing happened. I also tried it outside of the initial click function but, as you can guess, it fires the two click events simultaneously which doesn't work.
How do I get it to bind but not fire the click event only after the initial click event takes place?
This is not a direct fix for the problem, but something that might help you fix the problem (Too long for a comment).
You are binding click handlers inside another click handler without unbinding the previous ones, So everytime you click a matching <li> new click handlers are being added to <html> and other matching elements. I strongly believe you're not doing it on purpose and isn't aware of it.
Leaving that, You're trying to bind a click for .clicked_link using
$('li.clicked_link').on('click', function(){
This code looks for matching elements currently present in DOM, and probably finds no matching elements since you're actually adding the class clicked_link after it.
You actually need to delegate this handler to check for matching elements in future.
The events are bubbled up till the root element, in other words: you if you click an anchor, starting from the anchor, all the parents till html will receive a click event, which you can prevent using e.stopPropagation();.
Ideally you're code should look something like this:
if ('ontouchstart' in document.documentElement) {
$('#masthead nav ul > li:has(.sub-menu) a').click(function(e){
e.preventDefault();
$(this).parent().addClass('clicked_link');
});
$(document).on('click','li.clicked_link', function(){
var this_link = $(this).find('> a').attr('href');
document.location.href=this_link;
});
$('html').on('click',function(){
$('#masthead nav ul > li:has(.sub-menu)').removeClass('sub-hover').removeClass('clicked_link');
});
}
(Can't go any further with the currently available info. Minimal code such as respective html structure or a demo would be helpful)
I am using Bootstrap dropdown menu. See the below code:
$(document).ready(function(){
$("#a-primary-occasion").mouseover(function(){
$(".dropdown-menu_occasion").css("display", "block");
});
$('#submenu-birthday_occasion').mouseover();
});
This script is in main menu's phtml file which works fine when the page is loaded. But after clicking outside menu (on other content of the page.) it doesn't fire the mouseover() event.
You can check it here: http://jshri.com
After loading the page just hover on the first menu (Occasion). It will open the submenu of "Birthday Gifts".
click on anywhere outside the menu (e.g above "Occasion" menu)
hover on Occasion menu it won't open the first menu. Also hovering on the first submenu (i.e. Birthday Gifts) won't it. But after hovering on the second submenu (i.e. Anniversary Gifts) will open the submenu also the hover even for the first submenu will work fine afterwards.
Note: If I add an alert in document.ready() it fires every time.
I am not sure why is this happening. Does anyone have any idea? How can I solve this?
I found it myself!
As I said I am using Bootstrap menu, by default menu was opening on click events. Which I changed to hover event. But I didn't remove the jQuery which was hiding the current opened menu on document.click event. This is the code I commented:
$(document).click(function() {
// Simply hide the submenu on any click. Again, this is just a hacked
// together menu/submenu structure to show the use of jQuery-menu-aim.
$(".popover_relation").css("display", "none");
$("a.maintainHover_relation").removeClass("maintainHover_relation");
});
I am working on a popup menu in my web page. currently, I can successfully display the menu. What I want to do is hiding the menu when I click outside of the menu. I know one way to do this is bind the click event to the document:
$(document).on('click', function(event) {
// here I can hide the menu
});
but I don't want to do that way, because binding an click event to the document looks very ugly and make the code difficult to maintain.
many many thanks.:)
You can wrap your popup menu like this:
<div class="overlay">
<div class="popup">...</div>
<div>
And then
$(".overlay").click(function(){
// hide your popup
})
It would be good to make the overlay position:fixed
I am trying to create a dropdown javascript menu with jquery. I am using hide() and show(). I made it so that when you click on a menu item it shows but I cannot figure out how to make it so that when you click on anything other than the menu it will hide. I have seen it done on multiple sites before. How do you do it?
The gist of it:
// variable menu is your jquery menu ref.
var outsideMenu= function(){
menu.hide();
// clean up listener
$(document).unbind('click', outsideMenu);
}
$(menu).mouseout(function(){
// cursor is off the menu so attach listener
$(document).click(outsideMenu);
}).mouseover(function(){
// back to menu, so remove listener
$(document).unbind('click', outsideMenu);
});
I assume you can take it from there ;)
This may be what you're looking for.