What I'm trying to achieve is toggling the sidemenu on click anywhere in the body except inside sidemenu div itself. I currently can toggle the sidemenu from its toggle link (comment out line 13-14 in js fiddle) but not by clicking anywhere on body. This is the concerned code:
$('body').bind('click', function (e) {
var opened = $('body').hasClass('sidemenu-open');
if (opened === true) {
$('.sidemenu').removeClass('is-visible');
$('body').removeClass('sidemenu-open');
}
});
JSFIDDLE
I know I can add a wrapper for the content but I don't have much flexibility in the HTML structure.
There are two problems. First, when you click on the link, the click is bubbling out to the body. So the menu toggles open, then it toggles closed again, so nothing happens. Use event.stopPropagation() to prevent that.
Second, when the side menu is closed, <body> is just the one line containing the link. If you want to be able to click anywhere in the window, use $(document) rather than $('body').
$(function () {
$('.sidemenu-toggle').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
$('.sidemenu').toggleClass('is-visible');
$('body.sidemenu-enabled').toggleClass('sidemenu-open');
$('.sidemenu').toggleClass('sidemenu-open');
});
});
$(document).on('click', function (e) {
var opened = $('body').hasClass('sidemenu-open');
if (opened === true) {
$('.sidemenu').removeClass('is-visible');
$('body').removeClass('sidemenu-open');
}
});
DEMO
Your click on the side menu is propagating down to the body and activating that handler as well - preventDefault isn't what you're after, you need to return false as well. Try this click handler instead.
$(function () {
$('.sidemenu-toggle').on('click', function (event) {
$('.sidemenu').toggleClass('is-visible');
$('body.sidemenu-enabled').toggleClass('sidemenu-open');
$('.sidemenu').toggleClass('sidemenu-open');
return false;
});
});
You can get the target element in click event by which you can have further conditions.
$('body').click(function(evt){
if(evt.target.id == "your_sidemenu_id"){
//do nothing
}
else{
//do the toggle here as this will be implemented whenever any element is clicked other than your sidemenu
}
});
Related
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!
I'm having some issues with my javascript - trying to get this to work.
To begin with, here is what I am wanting this to do:
1.) Add/Remove 'active' class to parent element on click
2.) When on child element, any clicking inside child element makes it close - Need help to make it NOT do that...if any clicking is going on inside the child element, it needs to stay open and not close up...
3.) Besides clicking on the parent element to open/close the child element, is there a way to allow clicking anywhere on the page to close the child element rather than only clicking on the parent element to close the child element up?
JS:
$(document).ready(function () {
$("#logsterIn_profile").click(function () {
$(".logsterIn_profile").slideToggle('200');
$("#logsterIn_profile").addClass('active');
});
});
To see what i currently have in action, FIDDLE ME DEMO
Any help would be much appreciated!
Here's the answer to all three points:
http://jsfiddle.net/vnny7/
$(document).ready(function () {
$("html").click(function () {
$(".logsterIn_profile").slideToggle('200');
$("#logsterIn_profile").toggleClass('active');
});
$(".logsterIn_profile").click(function( event ) {
event.stopPropagation();
});
});
use toggleClass to go between "active" and ""
use stopPropagation on the child element to put the click event on it, and stop it from "propagating" the event up to its parent
to get a click anywhere on the page to open/close the child, just have the click event tied to "html"
Do you want the div to open AND close when the user clicks outside the parent div, or just close?
By your description, you sound like you only want the div to close, but not open if the user clicks outside. If that's the case, you need to check if the child is open or closed when the user clicks outside of the parent, as follows:
$(document).ready(function () {
$("html").click(function(e) {
if (e.target == document.getElementById("logsterIn_profile")){
$(".logsterIn_profile").slideToggle('200');
$("#logsterIn_profile").toggleClass('active');
}else{
if($("#logsterIn_profile").hasClass('active')){
$(".logsterIn_profile").slideToggle('200');
$("#logsterIn_profile").toggleClass('active');
}
}
});
$(".logsterIn_profile").click(function( event ) {
event.stopPropagation();
});
});
You can check it out at this fiddle
http://jsfiddle.net/AzSXL/8/
$(document).ready(function () {
$("#logsterIn_profile").click(function () {
$("#logsterIn_profile").toggleClass('active');
$(".logsterIn_profile").slideToggle('200');
});
$(".logsterIn_profile").bind('click',function(e) {
e.stopPropagation();
});
$("html").click(function () {
$("#logsterIn_profile").toggleClass('active');
$(".logsterIn_profile").slideToggle('200');
}
});
I have an overlay div that fades in when I click on a DOM element. I would like to be able to close it when I click anywhere on the page ( except the div itself) but it does not work..
Here is my code:
//Script for showing the DIV called overlay.
<script>
$(function() {
$('#loginfooter').click(function(){
$('#overlay').fadeIn(200,function(){
$('#box').animate({'top':'20px'},'slow');
});
return false;
});
$('#boxclose').click(function(){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
//Script for hiding the div after clicking anywhere..
<script>
$(document).ready(function(){
$('#overlay').on('click',function(ev){
var myID = ev.target.id;
if(myID!=='overlay'){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
}
});
});
</script>
Just replace this:
$('#overlay').on('click', function (ev) {
with this
$(document).on('click', function (ev) {
and try again....
Actually, when you are clicking on the overlay element, the myID variable value is always == 'overlay'. Hence, it never goes inside the if statement.
DEMO 1
$(document).on('click',function(e){
if(!$(e.target).closest('#overlay').length)
$('#overlay').hide();
});
Other possibility without using any delegate event:
DEMO 2
$('#overlay').on('blur', function (e) {
$(this).hide();
});
Even you'll see most people using the first method, using the second one will avoid to have to use any delegate event which is better IMO. You just have to set focus on overlay when open it or when added to DOM, depending your specific case.
Would this work for you: jsfiddle?
I changed this:
if(myID!=='overlay'){
to this
if(myID=='overlay'){
so that you target the overlay instead of the box.
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 a script here that if i click on it drops down, as well on if i clickoutside it drops down. But i want to make it so that if i click on bottom it scrolls up. For some reason it doesnt work here. It only scrolls up if i click outside the box.
Heres an example. http://jsfiddle.net/w8mfx/
If i click on bottom it wont scroll up only if i click on outside. But i want it to work both ways.
$(document).ready(function() {
$('#bottom').click(function(event) {
event.stopPropagation();
$('#content').slideDown();
});
$('html').click(function(e) {
//alert(1);
if (e.target.id != 'bottom') {
$('#content').slideUp();
}
});
});
http://jsfiddle.net/w8mfx/7/
I added:
$('#content').click(function (event) {
event.stopPropagation();
});
so the user can click on the #content element and not trigger the slide function. That also means that the event handler for the html element can be simpler:
$('html').click(function(e) {
$('#content').slideUp();
});
In the jsfiddle you may notice I cached the $('#content') selector in a variable since it was being used in more than one place.
Use slideToggle(). http://jsfiddle.net/w8mfx/5/