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.

manage multiple messages from content-script to a vue js popup page in google-chrome-extension [duplicate]

Hello i am learning vuejs and was converting one of my projects into vuejs i wanted to know that i can write my custom functions in methods and call those in mounted hook i wanted to know how do i use listeners in vuejs.
also can i used my jquery by importing in vue project
The event listener documentation on vue website states only v-on and click example but no examples are for windows listeners
jQuery(document).ready(function(){
//cache DOM elements
var mainContent = $('.cd-main-content'),
header = $('.cd-main-header'),
sidebar = $('.cd-side-nav'),
sidebarTrigger = $('.cd-nav-trigger'),
topNavigation = $('.cd-top-nav'),
searchForm = $('.cd-search'),
accountInfo = $('.account');
//on resize, move search and top nav position according to window width
var resizing = false;
moveNavigation();
$(window).on('resize', function(){
if( !resizing ) {
(!window.requestAnimationFrame) ? setTimeout(moveNavigation, 300) : window.requestAnimationFrame(moveNavigation);
resizing = true;
}
});
//on window scrolling - fix sidebar nav
var scrolling = false;
checkScrollbarPosition();
$(window).on('scroll', function(){
if( !scrolling ) {
(!window.requestAnimationFrame) ? setTimeout(checkScrollbarPosition, 300) : window.requestAnimationFrame(checkScrollbarPosition);
scrolling = true;
}
});
//mobile only - open sidebar when user clicks the hamburger menu
sidebarTrigger.on('click', function(event){
event.preventDefault();
$([sidebar, sidebarTrigger]).toggleClass('nav-is-visible');
});
//click on item and show submenu
$('.has-children > a').on('click', function(event){
var mq = checkMQ(),
selectedItem = $(this);
if( mq == 'mobile' || mq == 'tablet' ) {
event.preventDefault();
if( selectedItem.parent('li').hasClass('selected')) {
selectedItem.parent('li').removeClass('selected');
} else {
sidebar.find('.has-children.selected').removeClass('selected');
accountInfo.removeClass('selected');
selectedItem.parent('li').addClass('selected');
}
}
});
//click on account and show submenu - desktop version only
accountInfo.children('a').on('click', function(event){
var mq = checkMQ(),
selectedItem = $(this);
if( mq == 'desktop') {
event.preventDefault();
accountInfo.toggleClass('selected');
sidebar.find('.has-children.selected').removeClass('selected');
}
});
$(document).on('click', function(event){
if( !$(event.target).is('.has-children a') ) {
sidebar.find('.has-children.selected').removeClass('selected');
accountInfo.removeClass('selected');
}
});
//on desktop - differentiate between a user trying to hover over a dropdown item vs trying to navigate into a submenu's contents
sidebar.children('ul').menuAim({
activate: function(row) {
$(row).addClass('hover');
},
deactivate: function(row) {
$(row).removeClass('hover');
},
exitMenu: function() {
sidebar.find('.hover').removeClass('hover');
return true;
},
submenuSelector: ".has-children",
});
function checkMQ() {
//check if mobile or desktop device
return window.getComputedStyle(document.querySelector('.cd-main-content'), '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, "");
}
function moveNavigation(){
var mq = checkMQ();
if ( mq == 'mobile' && topNavigation.parents('.cd-side-nav').length == 0 ) {
detachElements();
topNavigation.appendTo(sidebar);
searchForm.removeClass('is-hidden').prependTo(sidebar);
} else if ( ( mq == 'tablet' || mq == 'desktop') && topNavigation.parents('.cd-side-nav').length > 0 ) {
detachElements();
searchForm.insertAfter(header.find('.cd-logo'));
topNavigation.appendTo(header.find('.cd-nav'));
}
checkSelected(mq);
resizing = false;
}
function detachElements() {
topNavigation.detach();
searchForm.detach();
}
function checkSelected(mq) {
//on desktop, remove selected class from items selected on mobile/tablet version
if( mq == 'desktop' ) $('.has-children.selected').removeClass('selected');
}
function checkScrollbarPosition() {
var mq = checkMQ();
if( mq != 'mobile' ) {
var sidebarHeight = sidebar.outerHeight(),
windowHeight = $(window).height(),
mainContentHeight = mainContent.outerHeight(),
scrollTop = $(window).scrollTop();
( ( scrollTop + windowHeight > sidebarHeight ) && ( mainContentHeight - sidebarHeight != 0 ) ) ? sidebar.addClass('is-fixed').css('bottom', 0) : sidebar.removeClass('is-fixed').attr('style', '');
}
scrolling = false;
}
});

You can listen for a window event in Vue like this:
methods: {
onResize(event) {
console.log('window has been resized', event)
}
},
mounted() {
// Register an event listener when the Vue component is ready
window.addEventListener('resize', this.onResize)
},
beforeDestroy() {
// Unregister the event listener before destroying this Vue instance
window.removeEventListener('resize', this.onResize)
}

You will have to add the listeners for your events in created hook.
For example:
window.addEventListener('scroll', this.handleScroll);
You can add your logic in handleScroll method next.
Note: Don't forget to remove listener on destroyed hook!

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

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