$(document).click(function (event) {
if ($("#sidenav").width() != 0) {
$("#sidenav").css({ 'width': '0' });
}
});
$("#sidenav").click(function (e) {
e.stopPropagation();
return false;
});
$("#navHome").click(function () {
$("#navHome").attr("href", "/public/templates/default/index.html");
$("#sidenav").css({ 'width': '0' });
});
1) The $(document).click(function (event) function closes the nav bar if user click anywhere outside the navbar
2) The $("#sidenav").click(function (e) function prevents nav bar from closing if user click anywhere inside the navbar
3) Now because of the e.stopPropagation(); in the second function, when I click on the navHome it did close the navBar but didn't take me to the index page. In other words, $("#navHome").attr("href","/public/templates/default/index.html"); doesn't work.
Is there a work around for this? Thanks!
Do not cancel the click if the target is a link
$("#sidenav").click(function (e) {
if(!$(e.target).closest("a").length) {
e.stopPropagation();
return false;
}
});
Related
I have a div which should be visible, whenever a button is clicked. It's like a menu. Afterwards, it should disappear (toggle), when the button is clicked again or when the user clicks somewhere else on the page (whole body).
In my current approach, the menu constantly toggles, so both functions (see below) are being triggered.
$("#b1").click(function() {
$("#menu").toggle("slide");
});
$("body").click(function() {
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
});
How should I improve my code, so that the menu only disappears when the button is clicked again or when the user clicks somewhere else?
Here is a fiddle.
Use $(window) to attach the event, then you can close the menu anywhere.
$("#b1").click(function() {
$("#menu").toggle("slide");
return false;
});
$(window).click(function() {
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
});
Check demo: https://jsfiddle.net/wru8mvxt/5/
You can use e.target and check whenever it's not the menu or the button which got clicked. Otherwise the menu closed even on the button click or on a click inside.
$("#b1").click(function() {
$("#menu").slideDown();
});
$("body").click(function(e) {
if (!$(e.target).is("#b1") && $("#menu").is(":visible")) {
$("#menu").slideUp();
} else {
e.preventDefault();
}
});
If you want the menu to stay even on click inside, just add && !$(e.target).is("#menu") to the if condition.
Working example.
I think your code looks good.. I see one problem when you click on menu it will be hide.
$("#b1").click(function() {
$("#menu").toggle("slide");
return false; // prevent to pass click event to body
});
$("body").click(function() {
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
});
$("#menu").click(function(e){
e.preventDefault();
return false;
});
Use something like this:
$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
Try this.
$("#b1").click(function() {
event.stopPropagation();
$("#menu").toggle("slide");
});
$("body").click(function() {
if(!$(event.target).closest('#menu').length){
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
}
});
I think this code will solve your issue. You can use e.target property to find whether user clicked on button or outside button. When user click on button b1 it enters both b1 click event and body click event. So if in order to find where the user is clicked you can use event.target property.
Clicking the button will toggle the menu visibility.
Clicking outside the button will close the menu if it is opened.
$("#b1").click(function() {
$("#menu").toggle("slide");
$("#b1").text() == "hide menu" ? $("#b1").text("show menu") : $("#b1").text("hide menu");
});
$("body").click(function(e) {
if (!$(e.target).is("#b1") && $("#menu").is(":visible")) {
$("#menu").slideUp();
}
else {
e.preventDefault();
}
});
Working fiddle
You have to do following changes.
$(document).ready(function() {
$("#b1").click(function(e) {
$("#menu").slideToggle();
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('#menu, #menu *')) {
$("#menu").slideUp();
}
});
});
I'm using this script to control open/collapse menu items:
$('.dropdown').on({
"click": function(event) {
if ($(event.target).closest('.dropdown-toggle').length && $(this).parents('.dropdown').length === ($(event.target).parents('.dropdown').length - 1)) {
$(this).data('closable', true);
} else {
$(this).data('closable', false);
}
},
"hide.bs.dropdown": function(event) {
hide = $(this).data('closable');
$(this).data('closable', true);
return hide;
}
});
But I need to create a conditional that if user click outside the menu, the open item not close.
This question involves Bootstrap specificities. Just using:
$(document).on('click', function(event)
Not answer my question completely.
Try this to detect if you are out of the menu.
$(document).on('click', function(event) {
if (!$(event.target).closest('.dropdown-toggle').length) {
return false;
}
});
I have made a nav that opens when you click at the .products link and closes if you click anywhere on the screen. But it seems that if you click on the .product link when it is already open, it will not close. How can I do this?
$('#subnav').hide();
$(document).on('click', function(e) {
if ( $(e.target).closest('.products').length ) {
$("#subnav").show();
}else if ( ! $(e.target).closest('#subnav').length ) {
$('#subnav').hide();
}
});
Demo
js
$("#subnav").hide();
$(".products").click(function (e) { //the usual behavior on click on .prducts
$("#subnav").toggle();
e.stopPropagation();
});
$("#subnav").click(function (e) { //ensures the #subnav will not hide on click on it
e.stopPropagation();
});
$(document).click(function () { //ensures the #subnav will hide on click on document
$("#subnav").hide();
});
You need a click event on the document to hide the block and a click event on the button to show the block. And in the event of the button, you need to stop the propagation of the document's event.
Like that :
$("div").hide();
$("button").bind("click",function(e){
e.stopPropagation();
$("div").toggle(200);
});
$(document).bind("click",function(){
$("div").hide(200);
});
Assuming your code looks like that :
<div></div>
<button>open</button>
See example : http://jsfiddle.net/oqgpceod/1/
Aditionnaly you may add this code to prevent the block from hiding when you click on it :
$("div").bind("click",function(e){
e.stopPropagation();
});
Fiddle: http://jsfiddle.net/r2h57jhu/
$(document).ready(function () {
$('#subnav').hide();
$(document).click(function(e) {
$('#subnav:visible').hide();
});
$('.products').click( function (e) {
$('#subnav:not(:visible)').show();
e.stopPropagation();
});
});
If element is expanded or collapsed whenever you are scrolled down the page, the page is abruptly reset and focus is moved to the top of the page.
Any way to prevent the page from shifting or make this less abrupt?
$(document).ready(function () {
$(".flip").click(function () {
var panel = $(this).next('.panel');
$('.panel').not(panel).slideUp('slow');
$(this).next('.panel').slideToggle("slow");
});
});
http://jsfiddle.net/chaddly/5FNTX/
Try This add "e.preventDefault();"
$(document).ready(function () {
$(".flip").click(function (e) {
e.preventDefault();
var panel = $(this).next('.panel');
$('.panel').not(panel).slideUp('slow');
$(this).next('.panel').slideToggle("slow");
});
});
Because the element you are clicking on contains a link with # it is navigating to that which is causing it to move to the top of the page.
Add a call to preventDefault() will stop this:
$(".flip").click(function (e) {
e.preventDefault();
var panel = $(this).next('.panel');
$('.panel').not(panel).slideUp('slow');
$(this).next('.panel').slideToggle("slow");
});
http://jsfiddle.net/5FNTX/1/
you can put return false after last toggle.
$(document).ready(function () {
$(".flip").click(function () {
var panel = $(this).next('.panel');
$('.panel').not(panel).slideUp('slow');
$(this).next('.panel').slideToggle("slow");
return false;
});
});
At the moment it shows the divs instead of hiding them and on click it hides just so you can see the movement. Should be .show instead of .hide. On clicking the link, li should slide down and on mouseleave slide back up.
Working example http://jsfiddle.net/DTqDD/3/
jQuery:
$(function() {
var toggleMenu = function(e) {
var self = $(this),
elemType = self[0].tagName.toLowerCase(),
//get caller
menu = null;
if (elemType === 'a') {
//anchor clicked, nav back to containing ul
menu = self.parents('ul').not('ul#mainmenu');
} else if (elemType === 'ul') {
//mouseleft ul, ergo menu is this.
menu = self;
}
if (menu) {
menu.hide('medium');
}
e.preventDefault();
return false;
};
$(document).ready(function() {
$('a.drop').click(function(e) {
$('li#mainmenudrop').show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li#mainmenudrop a').click(toggleMenu);
$('li#mainmenudrop').mouseleave(toggleMenu);
});
});
On li tags change id="mainmenudrop" to class="mainmenudrop" since it ain't valid HTML. Then use the following jQuery code.
$(document).ready(function() {
$('a.drop').click(function(e) {
$(this).next("div").show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li.mainmenudrop').mouseleave(function() {
$(this).children("div").hide('medium');
});
});
Could this possibly be what you are trying to accomplish?
EDIT:
If you want the divs hidden at the beginning, just add this CSS:
.mainmenudrop div {
display: none;
}