When in mobile view, the hamburger menu appears and the user clicks the icon it opens, when you click the close icon. its closes.
I'm attempting to allow users to click outside of the menu to close the menu. Unfortunately the JS code provided above, Allows users to click Anywhere on the site, to Open & close the menu. I Don't want this, I just want the menu to be closed when a user clicks outside of it.
How can I achieve this? Any help is appreciated.
document.querySelector('#bg-close').addEventListener('click', function() {
document.querySelector('.nav').classList.toggle('nav-container')
})
The issue I'm attempting to solve is on my website
Summary:
Hamburger menu is being activated with a click anywhere on the site.
You can implement something like below:
It uses an if statement to see if the .nav-open class is active, in case is not there, nothing will happen. In opposite case it will be removed.
$('#bg-close').on('click', function() {
let nav = $('#navElement-id');
if(nav.attr('class') == 'nav-container nav-open'){
nav.attr('class','nav-container');
}
});
*{padding:0;margin:0}
#bg-close{height:100vh;width:100vw;background-color:blue}
.nav-container{color:blue; padding:10px;position:absolute;top:10px; left:0;}
.nav-open{color:black!important;background-color:grey;width:300px;height:200px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bg-close">
</div>
<div id="navElement-id" class="nav-container nav-open">Click on the blue</div>
Related
I am new to JQuery and Javascript, and after searching for an answer to my problem I am having a difficult time resolving it. I have a Javascript function openNav that is working perfectly to open and close a sidebar that I have built on my webpage, but I have a line of JQuery inside of the function that doesn't seem to work initially.
The goal of the code is to have a glyphicon change when the menu is opened and closed, and it works fine when clicking on the glyphicon itself. There are about 12 additional "menu" buttons that will also open the side bar. The sidebar opens just fine when clicking any of these buttons, however I cannot get the glyphicon to change on the initial click.
function openNav() {
var sideNavBarElement = document.getElementById("sideNavBar");
if (sideNavBarElement.style.width == "0px")
$('#menutoggle').find('span').toggleClass('glyphicon-menu-right').toggleClass('glyphicon-menu-left');
sideNavBarElement.style.width = "250px";
document.getElementById("main-body").style.marginLeft = "285px";
}
I have added this function into the code for each of my menu buttons, and after the menu is opened the first time the glyphicon will alternate using this code, but the very first time it is clicked it does not change. Any help is appreciated. Thanks!
I'm using wordpress with visual composer and I have built this demo popup example https://www.air8cushion.com/index.php/popup-test/ when I click on "More Info" button the popup shows up. However when I scroll content inside of it, and close the modal window, and again click on "More Info" I need to reset the content to appear from the top again.
I know its possible to do it with JS but I had fails many times to make it work. Most of examples of similar things online are mostly for Bootstrap and none of them worked for me.
Thanks.
You can use this on click of the close button of your popup
this function will scroll viewport of the popup div to top when clicked
jQuery(document).on('click','.vc_general',function(){
var myDiv = document.getElementById('myNav');
myDiv.scrollTop = 0;
});
".vc_general" is one of the class in your close button. You can add an extra class if you think it will affect the other functionality.
Hi guys i'm using angular mobile framework and i had implemented the accordion. The thing is that by default when you click on it, it opens and if i click the same component again it doesn't close.
Here is the online example.
http://mobileangularui.com/demo/#/accordion.
What i need is to be able to open it and close it like most of the accordions component. I tried
is.open=""
but it did't work.
It is design to only open, because of this line of code:
ui-set="{'myAccordion': i}"
So when you click on it again, it just restates that this tab should be open.
What you need to do is check if the item clicked on is already the opened one, and if true, then just set it to some outside value.
ui-set="{ 'myAccordion': Ui.get('myAccordion') == item ? -1 : item }"
I have made a form and if you click on the Info image it drops down with more information, however if i click on the image to close. It with close but then bounce back open.
If I click just next to the image it will close properly.
Any ideas why this happens?
link:
http://www.vestedutility.com.au/home_safety_check.php
Change the line from your code:
if(jQuery(e.target).is('.active')) {
To
if(jQuery(this).is('.active')) {
When I have an email open in Gmail, I'm trying to click the "Show original" dropdown menu item programmatically. The IDs of all the elements change dynamically with each email, so that's not a reliable way to find the menu item I'm trying to click. To start, I'm just trying to make a piece of JavaScript that clicks it in Chrome's console. After loading jQuery, I've tried this:
jQuery('div[role=menuitem]:contains(Show original)').click();
While it seems to select the proper div and click it, it's not the expected behaviour and the click doesn't really do anything. Here's a piece of a fully loaded email's menu containing the menu item I'd like to click with JavaScript:
<div class="J-N" role="menuitem" aria-hidden="false" id="so" style="-webkit-user-select: none;"><div class="J-N-Jz"><div><div id=":173" class="cj" act="32"><img class="dS J-N-JX" src="images/cleardot.gif" alt="">Show original</div></div></div></div>
My intention is to use a bookmarklet, but I'm having trouble loading jQuery in a bookmarklet because of a security warning, but that's another question/issue. Also, should I try to open the dropdown before clicking the "Show original" button or is it likely that I am able to click this button without opening the menu first?
You must open menu at least once, so Gmail loads required menu elements.
To click on elements use dispatchEvent() straight on DOM elements (not jQuery collections)
Basic example might look like this:
// Create events
var mouseDownEvent = new MouseEvent('mousedown', { 'bubbles': true });
var mouseUpEvent = new MouseEvent('mouseup', { 'bubbles': true });
// Get DOM elements
var menu = jQuery("div[role='button'][aria-label='More']").get(0);
var button = jQuery("div[role='menuitem']:contains('Show original')").get(0);
// Open and close menu, to ensure button existence
menu.dispatchEvent(mouseDownEvent);
menu.dispatchEvent(mouseDownEvent);
// Click menu item
button.dispatchEvent(mouseDownEvent);
button.dispatchEvent(mouseUpEvent);
That will work only in Chrome, Firefox and Opera.