Add/Remove Class in JQuery - javascript

I have a button cart on opencart.
I have this code:
/* Ajax Cart */
$('#cart > .heading a').live('click', function() {
$('#cart').addClass('active');
$('#cart').load('index.php?route=module/cart #cart > *');
$('#cart').live('mouseleave', function() {
$(this).removeClass('active');
});
});
On desktop work well, when I click on button open cart window, when I leave mouse it dissapear.
But on mobile when I click, it open cart window, but dont dissapear anymore.
So on mobile I would like to dissapear when I click in any place outside that cart.
Something like that (but I know it doesnt work):
$('#cart').live('clickoutside', function() {
$(this).removeClass('active');
});
Hope you can understand me. Thank you!

This is a very common problem. You'll find it easily been dealt with on dropdown menus.
I cannot test the code at the moment but I'm pretty sure this will work for you:
$(document).on("click", function() {
if ($(this).closest("#cart").length === 0) {
$('#cart').removeClass("active");
}
});
Let me explain why this works. On every click on the page, check if the click's target is inside #cart (i.e. check if any of the ancestor matches #cart selector).
If it's not, remove the cart's active class. This will allow clicks inside the cart and not close it.
Here's the documentation for it. jQuery.closest

Related

automatic close function for selection

I have a button which creates a pulldown in which you can select several categories.
Now i want this to close automatically when i click outside the pulldown.
Something like a lightbox or modal popup which closes if you click anywhere else on the page.
Now i have to click the button again to close it. If i dont and go elsewhere on the page, the dropdown stays visible (until i click it)
This is the code of the button:
$(function(){
$('#browse-btn').click(function(){
$('#browse-content').toggle('1000');
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
});
$(".scroll-top").scrollToTop();
$("#category_id").selectbox();
});
Is this possible?
thanks
Using jquery this is the code I used for a similar case scenario sometime ago:
$(document).click(function(event) {
if(!$(event.target).closest('.pulldown').length) {
if($('.pulldown').is(":visible")) {
$('.pulldown').slideUp()
}
}
})
You can read more about this in the original post How to detect a click outside an element? submitted by Art.
I'm not exactly sure of the elements you want to hide as you don't have a demo, so I cannot provide a fully working code, however you should do something like this:
$("body").click(function(event) {
if (event.target.id != "browse-btn") {
// Do something when there's a click outside of #browse-btn
// and the element you want to hide is currently visible
}
});
You can attach a click event to all chidren of the body tag that removes that active class, but you would want to make sure to unbind that event so it doesn't run every time a click takes place that doesn't have some sort of prevent default on it. Something like this:
$(function(){
var hidePulldown = function(){
$('#browse-btn').removeClass('active');
$('body *').unbind("click", hidePulldown);
}
$('#browse-btn').click(function(){
$('#browse-content').toggle('1000');
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else {
$(this).find('span').html('▼');
$(document).on('click', 'body *', hidePulldown);
}
});
$(".scroll-top").scrollToTop();
$("#category_id").selectbox();
});
Also, the
$(document).on('click', element, function(){function body})
is the preferred way to attach click events i believe: $(document).on('click', '#id', function() {}) vs $('#id').on('click', function(){})
This is what worked flawlessly for me after reading some of the answers here:
$(document).click(function(event) {
if(!$(event.target).closest('#menucontainer').length &&
!$(event.target).is('#menucontainer')) {
if($('#menucontainer').is(":visible")) {
$('#menucontainer').hide();
}
}
})
Thanks for pointing me in the right way!

How to hide jQuery toggle() when I click outside of the menu?

I have found a couple topics regarding to this issue, but none of them unfortunately worked out for me.
I am using this jQuery method like this:
//jQuery
$('.menu_user').click(function(){
$(".top_menu").toggle();
});
// HTML
<div class="menu_user">MENU</div>
<nav class="top_menu">
...
</nav>
Basically, when I click on the MENU div, the menu is rolled down, when I click on it again, then the menu is rolled up = hidden.
The problem is that when the menu is rolled down and I click outside the Menu div, the menu stays displayed - and I would like to hide it.
I went through some tutorials, but I didn't find a solution that would solve this issue.
I'll be glad for every help regarding to this issue.
Thanks!
You can do a click event, and inside it check if the click was inside the menu_user div.
If not, then you can hide the dropdown.
$("body > div").click(function() {
if ($(this).attr("class") != "menu_user") {
$(".top_menu").hide();
}
});
You could use
$(document).on( "click", function() {
if ($('.top_menu:hover').length === 0) {
//hide the stuff
//roll up menu
$(".top_menu").hide();
} else if ($('.menu_user:hover').length === 0) {
$(".top_menu").toggle();
}
});
so that when the menu is rolled down and the user clicked outside .top_menu it will roll up .top_menu
Remember that the above code will fire every time a user clicks on the page.

jQuery blur()....How exactly does it work?

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.

jQuery - Toggle a panel closed on click of outside element, only if panel is visible

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");
}
});

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.

Categories

Resources