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.
Related
I've exhausted most of the options I found here on Stack... I've created a full width (horizontal) dropdown menu using Bootstrap 3. The nav contains multiple dropdowns within itself and they are activated (displayed) by the mouseenter event:
$('.dropdown').mouseenter(function(){
if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
if(!$(this).hasClass('open')) { // Keeps it open when hover it again
$('.dropdown-toggle', this).trigger('click');
}
}
});
I've tried disabling the "outside" click by using:
$('#myDropdown').on('hide.bs.dropdown', function () {
return false;
});
which works, however, it also disables the "mouseenter" event.... How can I resolve this issue? Any feedback would be great! Thanks!
you meant like this? http://codepen.io/saeedsalam/full/ZpgzQv/
i have added following code in addition with yours -
$(document).on('click','.dropdown.open a', function(){
$(this).parent().removeClass('open');
});
hope that helps!
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/
I have a simple dropdown menu but I am having trouble with the JS.
Every time I click on "li" the dropdown menu (Which is inside the "li") appears which is great but the issue is when I want to dropdown to disappear I click on the "li" again but ".slideToggle()" does not appear to be turning it off.
However if I double click the "li" really fast it gets rid of the dropdown as intended but obviously this is very bad UX.
Please can someone check my code?
$('.dropdown-li').click(function(){
$('.navigation-dropdown').removeClass('enabled');
$(this).toggleClass('enabled');
$('.dropdown-li').addClass('enabled');
if ($(this).hasClass('enabled')) {
$('.navigation-dropdown').stop().hide();
$('.navigation-dropdown', this).slideToggle();
} else{
$('.navigation-dropdown', this).slideToggle();
}
return false;
});
Thanks,
Jordan
This is completely different jQuery from what you're currently using, but it worked for me in a previous project:
$(document).ready(function(){
$(".showhide").click(function(e){
e.preventDefault();
$(this).find('ul').slideToggle(1);
$(this).toggleClass("active");
return false;
});
});
Here's a JSFiddle example. I hope this is what you're looking for! http://jsfiddle.net/4zdjn262/
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 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.