I've built a simple mobile nav which works to some extent, but once you get to the link that actually goes to a page, the JavaScript that runs the functions prevents the action from happening, does this make sense?
I have a prevent default on a tags to show the sub menus and as a result of this the page link isn't actually clickable, here's the jsfiddle
$('.mobile-nav ul.parent-level > li.has-submenu').on('click',function(e){
$('ul.level-one').css('left', 0);
e.preventDefault();
});
$('.mobile-nav ul.level-one > li').on('click',function(e){
if( !$(this).hasClass('back-title') ){
$(this).find('ul.level-two').css('left', 0);
}
e.preventDefault();
});
$('.mobile-nav li.back-title').on('click',function(e){
//alert('go back');
$(this).parent().css('left', '100vw' );
e.preventDefault();
e.stopPropagation();
});
Do you need the preventDefault()? You actually have the prevent default on the li's rather than than a tags, which actually won't do anything adverse that you need to prevent will it?
I've removed the
e.preventDefault();
lines and the links in the submenus now become clickable - seemingly with no adverse affect on the rest of the menus. Have a look see if you agree...
http://jsfiddle.net/rzvwb113/3/
Related
I'm using a Visual Composer Wordpress Shortcode to generate an Accordion. When I click on the tabpanels there is an anchor link which is linked to the panel body and opens it, however the body scrolls to the anchor link but I want to prevent the scrolling. I've already tried everything I could find such as
$('body, html').stop();
preventDefault();
return false;
stopPropagation();/stopImmediatePropagation();
However, after some trying around the only thing that is working right now, is the following code:
jQuery(document).ready(function($){
$('#product-accordion .vc_tta-panel-title a').on('click', function(){
e.preventDefault();
});
});
Well, with this "solution" I'm getting an error, of course, for undefined e, on every click. But I can't quite understand why it would work like I want that way.
Can anyone help me and find a solution which will work error-free?
You can try stopImmediatePropagation instead preventDefault.
jQuery(document).ready(function($){
$('#product-accordion .vc_tta-panel-title a').on('click', function(e){
e.stopImmediatePropagation();
});
});
I got a dropdown with a fancy scroll in it. Fancy Scroll is a really simple library that replaces the default scroll. And just by adding some HTML markup, the scroll works without even having to initialize it using javascript.
After debugging to see what was going on, I found that bootstrap is making my dropdown hide when clicking on the drag.
The event is 'hide.bs.dropdown'.
By now, I have attempted so many things, managed to make it work, but the only problem is, whenever I start dragging, due to the stopPropagation() function, it will keep scrolling nan-stap even though I released the mouse click.
These are a few things I've tried while googling, thing is, none of the solved answers involved this case scenario, having a scrollbar in it:
$('.dropdown-menu input, .dropdown-menu label, .thumb', element).click(function(e) {
e.preventDefault();
e.stopPropagation();
});
$('.thumb', element).on('mouseup', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
$('.dropdown-menu .scrollbarY', element).click(function(e) {
e.stopImmediatePropagation();
});
$(element).on("hide.bs.dropdown",function(e) {
e.preventDefault();
return false;
});
The behavior I'm looking for is, clicking on the scroll drag (.thumb) wouldn't close the dropdown, but if there's a click on one of the items or away from dropdown, it should close it.
Okay, after a few more hours of struggling, a combination of the tests I made, solved the issue.
If anyone encounters the same problem, here's what I did:
(scrollbarY is the draggy parent)
$('.scrollbarY', element).click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
Hope it works for everyone.
I've created a mobile dropdown menu for a responsive website, that essentially shows a hidden unordered list when you click on a certain element. It works great, except for the fact that I can't get the blur() function to work, so that when a user clicks anywhere on the page other than inside the menu, it hides the menu. Here's a codepen: http://codepen.io/trevanhetzel/pen/wIrkH
My javascript looks like so:
$(function() {
var pull = $('#pull');
menu = $('header ul');
$(pull).on('click', function(e) {
e.preventDefault();
$('.close-menu').toggle();
$('.mobi-nav span').toggle();
menu.slideToggle(250);
});
$(menu).blur(function() {
$(this).slideToggle();
});
});
I've struggled with blur() in the past, so would really like to figure out once and for all how exactly it works, and whether or not I'm using it in the right context here. Thanks!
You have to watch for clicks yourself. And use $.contains to see if the clicked thing is within your menu:
$(document).click(function (ev) {
if (ev.target !== menu.get(0) && !$.contains(menu.get(0), ev.target)) {
menu.slideUp();
}
});
Just be sure to call ev.stopPropagation() in your toggle click handler to prevent the handler above from immediately closing the menu when the event bubbles up.
I'm working on this site: http://dev.rjlacount.com/treinaAronson/index.php
My final to-do is to set the contact panel (which you can see if you click the top left "contact" button) to close if it's currently open and the user either clicks outside of the panel (in the "#content" area) or hits the esc key.
I figured the clicking in the #content area trigger would be the easier of the two, so I started with that. I've read a couple threads on triggering functions only if elements are visible, but what I've come up with so far isn't working at all:
$("#panel").is(":visible") {
$("#content").click(function(){
$("#panel").slideToggle("3000");
});
};
This breaks the functionality of the contact button, and I've tried several variations of this to no avail. Am I making any glaring errors here? Any advice would be greatly appreciated.
Thanks!
Bind Click and Keydown functions to the document and make sure the click function doesn't bubble up to the document when your panel or flip buttons are clicked. Like so:
$(document).bind({
keydown:function(e) {
if (e.keyCode == 27 ) {
$("#panel").slideUp("3000");
}
}, click: function(e) {
$("#panel").slideUp("3000");
}
});
$('#flip, #panel').bind('click', function(e){return false});
Why don't you add a class to the body of the page when the panel is opened and remove it when it's closed? That makes this much simpler:
$('.class #content').click(function(){
// Close the contact panel
});
Now, when the body has a class of 'class', any click on the #content div will automatically close contact.
Make sense? Great looking site, by the way.
$('#flip').bind('click', function(){
$(this).toggleClass('contactOpen');
$("#panel").slideToggle("3000");
});
$('#content').bind('click', function(){
if($('#flip').hasClass('contactOpen')){
$(this).toggleClass('contactOpen');
$("#panel").slideToggle("3000");
}
});
I have the following jQuery:
$('#account-menu').hide();
$("#account-link").click(function(e) {
e.preventDefault();
$("#account-menu").toggle();
$("#account-link").toggleClass("selected");
});
What I want to do is check if the user clicks anywhere else onscreen WHILST THE ACCOUNT MENU IS SHOWN BUT not within the account menu itself, and if so then hide the menu. Can anyone help?
Thanks
EDIT:
I had a go at doing this myself like so:
$('#account-menu').hide();
$("#account-link").click(function(e) {
e.preventDefault();
$("#account-menu").toggle('fast');
$("#account-link").toggleClass("selected");
});
$(document).mouseup(function(e) {
var $targ = $(e.target);
// if we are the link or the box, exit early
if ($targ.is('#account-link') || $targ.is('#account-menu')) return;
// if we have a parent who is either, also exit early
if ($targ.closest('#account-link, #account-menu').length) return;
// hide the box, unselect the link
$("#account-link").removeClass("selected");
$("#account-menu").hide('fast');
});
But wanted to see if there was a nicer and much smaller (code-wise) way of doing it.
Use jQuery to hide a DIV when the user clicks outside of it
Maybe something like this...
$('#account-menu').hide();
$('body').click(function(){
$("#account-menu:visible').toggle();
$("#account-link").removeClass("selected");
});
$("#account-link").click(function(e) {
e.preventDefault();
$("#account-menu:not:visible").toggle();
$("#account-link").addClass("selected");
});
UPDATE
So this won't fully work, since the body click triggers when you click the link too. This is a step in the right direction though. G/L
UPDATE #2
I finally got this working over on JSFiddle.net, using the comments from Joseph Le Brech (+1). Check out the live Demo. I could not get the $('body') selector working on there, so I am simulating the body with a div called bodyDiv. It's all commented and working 100%. Happy Coding.