We Keep Coding

Underscores navigation - close nav when menu item clicked

When I click a menu item on Underscores that takes me to another page, then use the browser back button, the navigation is shown. I want to remove the active state from the navigation when an item is clicked. I've pasted what I've tried, but I get:
Uncaught TypeError: links.addEventListener is not a function
JS
( function() {
const siteNavigation = document.getElementById( 'navigation-outer' ); //changed from 'site-navigation' in default Underscores
// Return early if the navigation doesn't exist.
if ( ! siteNavigation ) {
return;
}
const button = siteNavigation.getElementsByTagName( 'button' )[ 0 ];
// Return early if the button doesn't exist.
if ( 'undefined' === typeof button ) {
return;
}
const menu = siteNavigation.getElementsByTagName( 'ul' )[ 0 ];
// Hide menu toggle button if menu is empty and return early.
if ( 'undefined' === typeof menu ) {
button.style.display = 'none';
return;
}
if ( ! menu.classList.contains( 'nav-menu' ) ) {
menu.classList.add( 'nav-menu' );
}
// Toggle the .toggled class and the aria-expanded value each time the button is clicked.
button.addEventListener( 'click', function() {
siteNavigation.classList.toggle( 'toggled' );
if ( button.getAttribute( 'aria-expanded' ) === 'true' ) {
button.setAttribute( 'aria-expanded', 'false' );
body.className = body.className.replace( ' noscroll', '' ); // My modification
} else {
button.setAttribute( 'aria-expanded', 'true' );
body.className += ' noscroll'; // My modification
}
} );
// Remove the .toggled class and set aria-expanded to false when the user clicks outside the navigation.
document.addEventListener( 'click', function( event ) {
const isClickInside = siteNavigation.contains( event.target );
if ( ! isClickInside ) {
siteNavigation.classList.remove( 'toggled' );
button.setAttribute( 'aria-expanded', 'false' );
}
} );
// Get all the link elements within the menu.
const links = menu.getElementsByTagName( 'a' );
// Close menu on item click.
links.addEventListener( 'click', function( event ) {
siteNavigation.classList.remove( 'toggled' );
button.setAttribute( 'aria-expanded', 'false' );
body.className = body.className.replace( ' noscroll', '' );
} );
// Get all the link elements with children within the menu.
const linksWithChildren = menu.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
// Toggle focus each time a menu link is focused or blurred.
for ( const link of links ) {
link.addEventListener( 'focus', toggleFocus, true );
link.addEventListener( 'blur', toggleFocus, true );
}
// Toggle focus each time a menu link with children receive a touch event.
for ( const link of linksWithChildren ) {
link.addEventListener( 'touchstart', toggleFocus, false );
}
/**
* Sets or removes .focus class on an element.
*/
function toggleFocus() {
if ( event.type === 'focus' || event.type === 'blur' ) {
let self = this;
// Move up through the ancestors of the current link until we hit .nav-menu.
while ( ! self.classList.contains( 'nav-menu' ) ) {
// On li elements toggle the class .focus.
if ( 'li' === self.tagName.toLowerCase() ) {
self.classList.toggle( 'focus' );
}
self = self.parentNode;
}
}
if ( event.type === 'touchstart' ) {
const menuItem = this.parentNode;
event.preventDefault();
for ( const link of menuItem.parentNode.children ) {
if ( menuItem !== link ) {
link.classList.remove( 'focus' );
}
}
menuItem.classList.toggle( 'focus' );
}
}
}() );

Try catching elements by id with getElementById instead of getElementsByTagName.

hide menu when click anywhere in page

I have a left menu and when I click it appears and there is a cross button with id close-button when I clicked on it, menu disappears, I need to close also when click anywhere except menu.
site link
(function() {
var bodyEl = document.body,
content = document.querySelector( '.content-wrap' ),
openbtn = document.getElementById( 'open-button' ),
closebtn = document.getElementById( 'close-button' ),
isOpen = false;
function init() {
initEvents();
}
function initEvents() {
openbtn.addEventListener( 'click', toggleMenu );
//bodyEl.addEventListener( 'click', toggleMenu ); //
if( closebtn ) {
closebtn.addEventListener( 'click', toggleMenu );
}
// close the menu element if the target it´s not the menu element or one of its descendants..
/**content.addEventListener( 'click', function(ev) {
var target = ev.target;
if( isOpen && target !== openbtn ) {
toggleMenu();
}
} ); */
}
function toggleMenu() {
if( isOpen ) {
classie.remove( bodyEl, 'show-menu' );
}
else {
classie.add( bodyEl, 'show-menu' );
}
isOpen = !isOpen;
}
init();
})();

You'd better go with something like this. Just give an id to the div which you want to hide and make a function like this.Call this function by adding onclick event on document.
document.onClick=myFunction(event) {
if(event.target.id!="popupDiv_id" || event.target.id=="closeButton_Id")
{
document.getElementById("popupDiv_id").style.display="none";
}
}

If I understand the problem correct you can use the onblur="toggleMenu();" to run the javascript function when the element looses focus. It is the opposite of the onfocus()event.
<div class="menu-element" onblur="toggleMenu();"/>
Can also add the eventlistner in the javascript:
var x = document.getElementById("menu-wrap");
x.addEventListener("blur", toggleMenu, true);
There is some examples of it here: https://www.w3schools.com/jsref/event_onblur.asp

code look like this
$('body').on('click', function (e) {
// hide any open popovers when the anywhere else in the body is clicked
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.menu-element').has(e.target).length === 0 && $(this).is(":visible")) {
var target=$("#popupDiv_id").hide();
}
});

Simply bind a click event to the body to close the menu. Then use event.stopPropagation(); on click of the menu.

Where to insert preventDefault in jquery code

I am using the snippet found at to http://tympanus.net/Development/MorphingSearch/ enlarge a search box when it is clicked..
<script>
(function() {
var morphSearch = document.getElementById( 'morphsearch' ),
searchlink = document.getElementById( 'mybtn' ),
input = morphSearch.querySelector( 'input.morphsearch-input' ),
ctrlClose = morphSearch.querySelector( 'span.morphsearch-close' ),
isOpen = isAnimating = false,
// show/hide search area
toggleSearch = function(evt) {
// return if open and the input gets focused
if( evt.type.toLowerCase() === 'focus' && isOpen ) return false;
if( isOpen ) {
classie.remove( morphSearch, 'open' );
// trick to hide input text once the search overlay closes
// todo: hardcoded times, should be done after transition ends
if( input.value !== '' ) {
setTimeout(function() {
classie.add( morphSearch, 'hideInput' );
setTimeout(function() {
classie.remove( morphSearch, 'hideInput' );
input.value = '';
}, 300 );
}, 500);
}
input.blur();
}
else {
classie.add( morphSearch, 'open' );
}
isOpen = !isOpen;
};
// events
searchlink.addEventListener( 'click', toggleSearch );
ctrlClose.addEventListener( 'click', toggleSearch );
// esc key closes search overlay
// keyboard navigation events
document.addEventListener( 'keydown', function( ev ) {
var keyCode = ev.keyCode || ev.which;
if( keyCode === 27 && isOpen ) {
toggleSearch(ev);
}
} );
/***** for demo purposes only: don't allow to submit the form *****/
morphSearch.querySelector( 'button[type="submit"]' ).addEventListener( 'click', function(ev) { ev.preventDefault(); } );
})();
</script>
All works great but as the search box is in a fixed header the page content jumps to the top when the link is clicked.
Previously when this has happened i have inserted the following...
event.preventDefault();
I can't work out where to insert this in this code though, can anyone help?

You insert it in the function that is called by the click event handlers
toggleSearch = function(evt) {
if (evt.type === 'click') {
evt.preventDefault();
}
// rest of code
}
searchlink.addEventListener( 'click', toggleSearch );
ctrlClose.addEventListener( 'click', toggleSearch );
Note the condition, it's to make sure the default action isn't prevented when the keydown handler is calling the same function

Jquery click function not working correctly

Let me start this off with I'm working with someone else's code and am still relatively new to jquery/javascript. I am also using classie.js from another file. If any of this code can be improved please let me know - I am still learning.
I would post html but it's rather long. If it's an issue let me know and I will try and get a live version of my site up.
I'm trying to toggle a mobile menu with two different open buttons: sticky-open-button and open-button.
It works fine right up until I go to close the menu element if the target is not the menu element or one of its descendants. Then it will ONLY let openbtn open the menu.
Problem Code:
// close the menu element if the target is not the menu element or one of its descendants..
content.addEventListener( 'click', function(ev) {
var target = ev.target;
if( isOpen && target !== ( openbtn || stickyopenbtn ) ) {
toggleMenu();
}
} );
}
All code:
(function() {
var bodyEl = document.body,
content = document.querySelector( '.content-wrap' ),
stickyopenbtn = document.getElementById( 'sticky-open-button' ),
closebtn = document.getElementById( 'close-button' ),
openbtn = document.getElementById( 'open-button' ),
isOpen = false;
function init() {
initEvents();
}
function initEvents() {
openbtn.addEventListener( 'click', toggleMenu );
stickyopenbtn.addEventListener( 'click', toggleMenu );
if( closebtn ) {
closebtn.addEventListener( 'click', toggleMenu );
}
// close the menu element if the target is not the menu element or one of its descendants..
content.addEventListener( 'click', function(ev) {
var target = ev.target;
if( isOpen && target !== ( openbtn || stickyopenbtn ) ) {
toggleMenu();
}
} );
}
function toggleMenu() {
if( isOpen ) {
classie.remove( bodyEl, 'show-menu' );
}
else {
classie.add( bodyEl, 'show-menu' );
}
isOpen = !isOpen;
}
init(); //make onclick talk to menu
})();

Your OR condition is wrong as openbtn || stickyopenbtn will always return openbtn instance so the click of stickyopenbtn won't be evaluated.
content.addEventListener('click', function (ev) {
var target = ev.target;
if (isOpen && (target !== openbtn && target !== stickyopenbtn)) {
toggleMenu();
}
});

Hide an element when a user clicks outside of it

$( document ).on('click', '.toggle_comments', function( event ){
event.preventDefault();
var container = $('div[name="comments"]');
if ( container.css('display') == 'block' ) {
container.hide();
return;
}
container.fadeIn(500);
});
When .toggle_comments is clicked, the container fades in. Is there a way to do something, ie fadeout, if anything outside the container is clicked WHILE it's display block? Bearing in mind, obviously, that .toggle_comments is outside of it in the first place. So it needs to be a live event, something that only fires while the container is in the state if display:block.

You can bind a mousedown event to document and check if the element clicked on is not div[name="comments"] like so:
$(document).mousedown(function(event)
{
var commentSection = $('div[name="comments"]');
if(!$(commentSection).is($(event.target)) && !$(event.target).closest($(commentSection)).length)
$(commentSection).fadeOut();
});

Just do different things if different elements are clicked
$( document ).on('click', function( event ){
event.preventDefault();
var target = $(event.target);
var container = $('div[name="comments"]');
if ( target.closest('.toggle_comments').length > 0 ) {
if ( container.is(':visible') ) {
container.hide();
} else {
container.fadeIn(500);
}
} else if (target.closest(container).length === 0 && container.is(':visible')) {
container.fadeOut(500);
}
});
FIDDLE