Develop Reference

show overlayer on click on dropdown menu

I have a dropdown menu that on click needs to trigger an overlayer to bring the focus on the dropdown menu.
I have 2 dropdown menus, for this reason i can't use a normal toggleClass(), so I found a solution and I do an if condition to find if the overlay is already showed
everything works fine, but I have a problem, if the user double click on the li.dropdown, this solution doesn't work anymore :(
how can I hide the overlayer if the user double click on the li.dropdown?
this is my codepen > https://codepen.io/mp1985/pen/KrBOdB
$('li.dropdown').click(function() {
if (!$('.full-overlayer').hasClass('show')){
$(".full-overlayer").toggleClass("show");
}
});
$('.full-overlayer, .dropdown-menu a').click(function() {
$('.full-overlayer').removeClass('show');
});
I am not sure if this was the best solution to approach to this task.
any suggestion or advice?

maybe I found a solution that works.
I added another if condition to check if this has class "open"
if ($(this).hasClass('open')) {
$(".full-overlayer").removeClass("show");
}
I am testing now, but it seems work, or at least I hope
here the codepen if somebody need for the future > https://codepen.io/mp1985/pen/kXjOAN

WORKING CODEPEN -> https://codepen.io/anon/pen/grdgva]
$('li.dropdown').on('click',function() {
if (!$(this).hasClass('open'))
{
$(".full-overlayer").addClass("show");
} else
{
$(".full-overlayer").removeClass("show");
}
});
$('.full-overlayer, .dropdown-menu a').click(function() {
$('.full-overlayer').removeClass('show');
});
Maybe it helps...

Prevent bootstrap dropdown from closing when clicked on drag

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.

onclick dropdown menu with a form, click outside to close

ive got a drop down menu with form elements. the menu element gets set to
display:none
when anything outside the element is clicked ... or at least so i thought.
Here's my little function
$(function(){
$('#loginAcc').click( function(event){
event.stopPropagation();
//show
$('#auth-menu').css('display', 'block');
});
$(document).click( function(){
//hide when click anywhere out the menu
$('#auth-menu').hide();
});
})
the problem i have is that it also closes when i click inside the element, which makes it very difficult, pretty much impossible to complete a form.
#loginAcc
is a horizontal list item that gets clicked, and
#auth-menu
is
if i were to hazard a guess, i would like to think that .toggle() is the culprit, but that's a sheer guess and i wouldn't even know where to start if i were to reimplement it (a little bird told me that it's getting taken out of the spec anyway).
what i would like to happen is that when you click on the #loginAcc list item, the #auth-menu gets set to display:block, and can only be closed if you reclick #loginAcc or anywhere else outside of #auth-menu.
any help would be amazing. thanks

Use a not() selector to exclude the menu:
$(document).not('#auth-menu').click( function(){
//hide when click anywhere out the menu
$('#auth-menu').hide();
});

javascript mouseover/out combined with click behavior

I am very new in programming, please give me a mercy. Below is my code:
$(function(){
document.getElementById("custom_link").addEventListener("mouseover",function(){
document.getElementById("siteContent").contentDocument.getElementById("custom_div").classList.toggle('highlightDiv');
},false)})
$(function(){
document.getElementById("custom_link").addEventListener("click",function(){
document.getElementById("siteContent").contentDocument.getElementById("custom_div").classList.add('highlightDiv');
},false)})
What I want to do is:
when the user hovers mouse on "custom_link", the "custom_div" is being highlighted.
when the user moves mouse out off "custom_link", the highlight at "custom_div" is eliminated.
when the user clicks at "custom_link", "custom_div" is being highlight again. However, when the user moves mouse out, the 'highlightDiv' is still being added to "custom_div".
According to my code, it does not work properly because the behavior when hovering is strange. It would be very nice if you can explain me with full code structure or jsfiddle example. Thank you for your advance help.

http://jsfiddle.net/ETrjA/2/
$('#custom_link').hover(function () {
$('#custom_div').toggleClass('highlighted');
});
$('#custom_link').click(function (e) {
$('#custom_div').addClass('highlighted');
$(e.currentTarget).unbind('mouseenter mouseleave');
});
You only need one class highlighted and you can access the link element directly within the click event callback via e.currentTarget.

You are mixing Javascript with its framework jQuery. Stick with jQuery for this.
// CSS: Create the highlight accessible with two classnames.
.highlight, .highlight_stay{
background:yellow;
}
Jquery
$(function(){
$('.custom_link').hover(function(){
$(this).addClass('highlight');
}, function(){
$(this).removeClass('highlight');
});
$('.custom_link').click(function(){
$(this).addClass('highlight_stay');
});
});

here is a link http://jsfiddle.net/8GV7B/2/
$(function(){
mouse_is_clicked = false;
$(".custom_link").hover(function(){
$("#container").addClass("highlight");
}, function(){
if(!mouse_is_clicked){
$("#container").removeClass("highlight");
}else{
mouse_is_clicked = false;
}
});
$(".custom_link").click(function(){
$("#container").addClass("highlight");
mouse_is_clicked = true;
});
});

jQuery Toggle on mouseup

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.