I'm trying to make an overlay menu that opens and close with the click of the same menu. I've tried using some solutions I've seen on this forum but the code I currently have only opens the menu and doesn't close it?
document.getElementById("botaomenu").addEventListener("click", toggleNav);
function toggleNav(){
navSize = document.getElementById("myNav").style.width;
if (navSize == 20) {
return close();
}
return open();
}
function open() {
document.getElementById("myNav").style.width = "20%";
}
function close() {
document.getElementById("myNav").style.width = "0";
}
Here is the fiddle: https://jsfiddle.net/Santos1600/j2L7yga5/1/
I've already got the menu working while using a different button to close the menu, but I would prefer it, from a design point of view, if the same button did both actions on click.
there is an error in width calculation
function toggleNav() {
navSize = document.getElementById("myNav").offsetWidth;
if (navSize > 0) {
return close();
}
return open();
}
If you need it to close after clicking on the different entries
you have 2 options:
1) you can close the menu if you click in any link by just adding
onclick="toggleNav();"
to the specific links.
2) Or in a more generic way, add a class on links ex "mylink"
and
document.body.addEventListener('click', function (evt) {
if (evt.target.className === 'mylink') {
toggleNav();
}
}, false);
in your code
Try this: https://jsfiddle.net/reyq2064/
// document.getElementById("botaomenu").addEventListener("click", toggleNav);
function toggleNav() {
navSize = document.getElementById("myNav").style.width;
if (navSize == '20%') {
return close();
}
return open();
}
Related
I have the following
function subNavToggle() {
var subNav = document.getElementById("subnav-section");
if (subNav.className === "navigation-subnav") {
subNav.className += " responsive";
} else {
subNav.className = "navigation-subnav";
}
}
I am trying to get the expanded menu to close when clicking outside of menu.
I have this, which will close the menu, but it also closes the hamburger menu - preventing the user to be able to open again.
$(document).click(function(event) {
var $target = $(event.target);
if(!$target.closest('.sub_nav_links').length &&
$('.sub_nav_links').is(":visible")) {
$('.sub_nav_links').hide();
}
});
Also thought I could get away with the following, but it actually does the opposite. Opening outside menu item.
window.onclick = subNav;
$('html').on('click, touchend', function (e) {
// Close hamburger menu when tapping outside
if ($(e.target).closest('#subnav-section').length == 0) {
var opened = $('.navigation-subnav').hasClass('responsive');
if (opened === true) {
$('.navigation-subnav').collapse('hide');
}
}
});
// to hide
$(document).click(function(){
$("#submenu").hide();
});
// you could possibly prevent to hide menu while using navigation
$("#menu").click(function(e){
e.stopPropagation();
});
I created a side menu, which displays and hides when clicking the menu button. Now, I would like that the menu closes when I click outside the menu, but I cannot figure out how to do it.
I have tried adding a clicklistener to the body, but this disables the menu completely. I also thougt about getting the ID of the clicked element anywhere in the body and close the menu if clickedElement != sideBar && sideBar.style = "200px", but I cannot get it to work. Can someone help me out here? I would like to find a solution without JQuery.
menuBtn.addEventListener("click", function () {
if (sideBar.style.width == "200px") {
sideBar.style.width = "0px";
setTimeout(function () {
menuItems.style.display = "none";
}, 1000);
} else {
sideBar.style.width = "200px";
menuItems.style.display = "block";
}
});
You can add an event listener to the parent container and check if the click's target is inside the element or not, something like:
document.addEventListener("click", (e) => {
if (box.contains(e.target)) {
result.innerHTML = "inside";
} else {
result.innerHTML = "outside";
}
});
#box {
width: 100px;
height: 100px;
background-color: dodgerblue;
}
<div id="box"></div>
<div id="result"></div>
I'm using a simple jQuery content panel switcher that I am trying to add a close button to. The close button is working but then after using the close button I can't re-open a panel again. The code for the panel switcher plugin is below:
jcps.fader = function(speed, target, panel) {
jcps.show(target, panel);
if (panel == null) {panel = ''};
$('.switcher' + panel).click(function() {
var _contentId = '#' + $(this).attr('id') + '-content';
var _content = $(_contentId).html();
if (speed == 0) {
$(target).html(_content);
}
else {
$(target).fadeToggle(speed, function(){$(this).html(_content);}).fadeToggle(speed);
}
});
};
And here is the call in my HTML page that I have added the click event to:
$(document).ready(function() {
jcps.fader(300, '#switcher-panel');
$(".close").live('click',function(){
$(".content").fadeOut("slow");
});
});
This all works fine for closing the content panel but I am unable to open a panel again after clicking close.
Create a variable outside the scope of both of these functions.
Set it to false by default. Set it to true on close
Create an If condition for true/false (inside your onClick code), and have it operate close/open code in each of these branches
Does this apply/make sense?
edit--
$(document).ready(function() {
jcps.fader(300, '#switcher-panel');
$(".close").live('click',function(){
if (Clicked == true){
//run jquery code to hide
} else {
//run jquery code to show
}
});
I have a button that toggles a menu popup. I have can make the menu disappear if you click outside of the menu but now my button toggle does not work. If I click the button again the menu stays up. How can I make the menu disappear if you toggle the button or if you click off the container?
jsFiddle: http://jsfiddle.net/PPcfN/
$('.quicklinks-rollover').click(function () {
$('.quicklinks').toggle();
});
$(document).mouseup(function (e) {
var container = $(".quicklinks");
if (container.has(e.target).length === 0) {
container.hide();
}
});
The mouseup function has to take care of the click on the button (quicklinks-rollover).
If fixed the whole thing here:
http://jsfiddle.net/8VUnq/1/
$(document).mouseup(function (e) {
var popup = $('#quickLinksPopup'),
button = $('#quickLinksToggle');
if (popup.is(':visible')
&& !popup.is(e.target)
&& !button.is(e.target)
&& popup.has(e.target).length === 0
&& button.has(e.target).length === 0) {
popup.toggle();
}
});
Keep in mind those two things:
Use IDs to refer to the items quicker and prevent multiple popup conflicts
Using a mouse event on the whole page is not recommended as the event will get triggered very frequently, try using an alternative method such as adding a close button in the popup, or to be more effective, think about adding the mouseup listener on the show of the popup and removing it on the hide.
You can determine the state of the popup with: $(popup).is(':visible') or is(':hidden').
Try :
var $quicklinks = $('.quicklinks');
var msOverLinks = false;
$('.quicklinks-rollover').click(function () {
$quicklinks.toggle();
});
$quicklinks.mouseenter(function() {
msOverLinks = true;
}).mouseleave(function() {
msOverLinks = false;
});
$(document).mouseup(function (e) {
if( ! msOverLinks ) {
$quicklinks.toggle();
}
});
You can do this Normal hide and show method. Because mostly toggle() function wont works in proper manner...
put your HTML button with attribute p="closed" by default:
<button class="quicklinks-rollover" p="closed" title="Quick Links">toggle</button>
Change Your Jquery:
$('.quicklinks-rollover').click(function () {
var a = $(this).attr("p");
var container = $(".quicklinks");
if(a=="closed"){
container.show();
$(this).attr("p","open");
}else{
container.hide();
$(this).attr("p","closed");
}
});
$(document).mouseup(function (e) {
var container = $(".quicklinks");
if (container.has(e.target).length === 0) {
container.hide();
}
});
The reason for this behavior, the mouseup() is binded when I perform the click() on the div. You can check this behavior by adding console.log message in .mouseup event.
So instead try like below.
$('.quicklinks-rollover').on('click', function (e) {
$('.quicklinks').toggle();
e.stopImmediatePropagation();
});
$(document).click(function (e) {
var container = $(".quicklinks");
console.log(container.has(e.target).length);
if (container.has(e.target).length === 0) {
container.hide();
}
});
Working Fiddle
Ok so i have a javascript drop down menu. The drop down menu works fine but when i click one of the drop down links the link does not work. I think it has something to do with my "return false/true" set up.
Javascript:
function ddMenu_open(event)
{
ddMenu_close();
var submenu = $(this).find('ul');
if(submenu){
ddmenuitem = submenu.css('visibility', 'visible');
return false;
}
return true;
}
function ddMenu_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden'); }
function ddMenu_timer()
{ closetimer = window.setTimeout(ddMenu_close, timeout); }
function ddMenu_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#ddMenu > li').bind('click', ddMenu_open);
$('#ddMenu li ul').bind('click', ddMenu_timer);
});
document.onclick = ddMenu_timer;
}
</script>
So when i remove the "return false" statement my links work but then my drop down menu doesn't stay open. When i remove the return false statement, the drop down menu will open real quick and then shut (barely giving the user time to click an item). What do i need to change in this code so that when i click on the drop down it stays open and then when one of the drop down items/links are click the link actually works.
Again, right now the drop down functionality works fine (when it is click it stays open until there is another click) but when i click on the drop down item the link does not work, new page doesn't load. Thank you for your help.
thanks for the responses but it's still not working for me. Here is my entire code:
<script type="text/javascript">
function ddMenu() {
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function ddMenu_open(e)
{
ddMenu_close();
var submenu = $(this).find('ul');
if(submenu){
ddmenuitem = submenu.css('visibility', 'visible');
}
}
function ddMenu_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden'); }
function ddMenu_timer()
{ closetimer = window.setTimeout(ddMenu_close, timeout); }
function ddMenu_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#ddMenu > li').bind('click', ddMenu_open);
$('#ddMenu li ul').bind('click', ddMenu_timer);
});
document.onclick = function(ev){
if(ev.target.nodeName !== 'ul') {
ddMenu_close();
}
};
}
</script>
again i want the drop down menues to close when the document is click except for when the menu itself is clicked. Thanks.
Instead of returning false you could try to just prevent the default behaviour of the pulldown menu like this:
function ddMenu_open(event)
{
ddMenu_close(e);
var submenu = $(this).find('ul');
if(submenu){
ddmenuitem = submenu.css('visibility', 'visible');
return false;
e.preventDefault();
}
return true;
}
Note: You don't need to declare an argument in ddMenu_open and you don't need to return true at the end of ddMenu_open. But I understand where you are coming from. This book by the way will get you up to speed: http://eloquentjavascript.net/