Develop Reference

Closing toggle menu not working properly with JQuery code

I am working on closing toggle menu for mobiles and having a small problem. So what i want is when the toggle menu is active, user to be able to close it by touching somewhere on the screen on his device. I almost got it working, but when closed the basket in the header disappears and the menu doesn't retrieve to a hamburger icon. I am working on Wordpress website, just to notice.
I guess the problem comes from this: aria-expanded="true" , because the default value should be false after the user has closed it.
So my website is:
https://www.ngraveme.com/bg
my JQuery code is:
jQuery(document).ready(function($) {
var $menu = $('.menu');
$('.menu-toggle').click(function() {
$menu.toggle();
});
$(document).mouseup(function(e) {
if (!$menu.is(e.target) // if the target of the click isn't the container...
&&
$menu.has(e.target).length === 0) // ... nor a descendant of the container
{
$menu.hide();
}
});
});
and the original js code written from the theme i am using in wordpress is:
/**
* navigation.js
*
* Handles toggling the navigation menu for small screens.
* Also adds a focus class to parent li's for accessibility.
* Finally adds a class required to reveal the search in the handheld footer bar.
*/
(function() {
// Wait for DOM to be ready.
document.addEventListener('DOMContentLoaded', function() {
var container = document.getElementById('site-navigation');
if (!container) {
return;
}
var button = container.querySelector('button');
if (!button) {
return;
}
var menu = container.querySelector('ul');
// Hide menu toggle button if menu is empty and return early.
if (!menu) {
button.style.display = 'none';
return;
}
button.setAttribute('aria-expanded', 'false');
menu.setAttribute('aria-expanded', 'false');
menu.classList.add('nav-menu');
button.addEventListener('click', function() {
container.classList.toggle('toggled');
var expanded = container.classList.contains('toggled') ? 'true' : 'false';
button.setAttribute('aria-expanded', expanded);
menu.setAttribute('aria-expanded', expanded);
});
// Add class to footer search when clicked.
document.querySelectorAll('.storefront-handheld-footer-bar .search > a').forEach(function(anchor) {
anchor.addEventListener('click', function(event) {
anchor.parentElement.classList.toggle('active');
event.preventDefault();
});
});
// Add focus class to parents of sub-menu anchors.
document.querySelectorAll('.site-header .menu-item > a, .site-header .page_item > a, .site-header-cart a').forEach(function(anchor) {
var li = anchor.parentNode;
anchor.addEventListener('focus', function() {
li.classList.add('focus');
});
anchor.addEventListener('blur', function() {
li.classList.remove('focus');
});
});
// Add an identifying class to dropdowns when on a touch device
// This is required to switch the dropdown hiding method from a negative `left` value to `display: none`.
if (('ontouchstart' in window || navigator.maxTouchPoints) && window.innerWidth > 767) {
document.querySelectorAll('.site-header ul ul, .site-header-cart .widget_shopping_cart').forEach(function(element) {
element.classList.add('sub-menu--is-touch-device');
});
}
});
})();

Try replacing your jQuery code with this:
jQuery(document).ready(function($) {
$(document).mouseup(function(e) {
var $menuContainer = $('.menu');
var $menu = $menu.find('ul');
var $container = $('.site-navigation');
var $button = $container.find('button')
if (!$menuContainer.is(e.target) && $menuContainer.has(e.target).length === 0) {
if ($container.hasClass('toggled')) {
$button.attr('aria-expanded', false);
$menu.attr('aria-expanded', false);
}
}
});
});
It uses the vanilla-js code from the template for hiding/showing the menu, but with jQuery synthax.

Toggle Show/Hide Div Onclick

I have a problem with my positioning on a mobile navigation element layout of my design.
Because I have used various Z-index’s and positioning’s when you click on the Nav button to displays mobile navigational links, part of my design is still visible and it obscures the 'return back to normal' nav button.
What I would like to do is add some more JavaScript to the code that it will remove/hide the part of my normal design that is obscuring the Nav button when clicked and then toggle back to display normally when it’s clicked again.
Here is the JS I am using:
jQuery(document).ready(function($){
//move nav element position according to window width
moveNavigation();
$(window).on('resize', function(){
(!window.requestAnimationFrame) ? setTimeout(moveNavigation, 300) : window.requestAnimationFrame(moveNavigation);
});
//mobile version - open/close navigation
$('.cd-nav-trigger').on('click', function(event){
event.preventDefault();
if($('header').hasClass('nav-is-visible')) $('.moves-out').removeClass('moves-out');
$('header').toggleClass('nav-is-visible');
$('.cd-main-nav').toggleClass('nav-is-visible');
$('.cd-main-content').toggleClass('nav-is-visible');
});
//mobile version - go back to main navigation
$('.go-back').on('click', function(event){
event.preventDefault();
$('.cd-main-nav').removeClass('moves-out');
});
//open sub-navigation
$('.cd-subnav-trigger').on('click', function(event){
event.preventDefault();
$('.cd-main-nav').toggleClass('moves-out');
});
function moveNavigation(){
var navigation = $('.cd-main-nav-wrapper');
var screenSize = checkWindowWidth();
if ( screenSize ) {
//desktop screen - insert navigation inside header element
navigation.detach();
navigation.insertBefore('.cd-nav-trigger');
} else {
//mobile screen - insert navigation after .cd-main-content element
navigation.detach();
navigation.insertAfter('.cd-main-content');
}
}
function checkWindowWidth() {
var mq = window.getComputedStyle(document.querySelector('header'), '::before').getPropertyValue('content').replace(/"/g, '').replace(/'/g, "");
return ( mq == 'mobile' ) ? false : true;
}
});
So what I would like to do is add to this a function the removes the div: “#bar_bg_default” onclick and then displays it again when its clicked again.
Something like this would work, but how would I fit it into my Nav JS code?
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
Click here to toggle visibility of element #bar_bg_default
<div id="bar_bg_default">This is foo</div>

Stop div appearing after FadeIn upon scroll

I am using fadeIn on a div
$(document).scroll(function() {
$('.bottomMenu_alert').fadeIn();
});
The user can close the div by clicking anywhere outside the div by using
$(document).click(function(event) {
if ( !$(event.target).hasClass('.bottomMenu_alert')) {
$(".bottomMenu_alert").hide();
}
});
But when the user scrolls again the div reappears.
How can I stop the div reappearing?

You can set a simple flag variable to lock the div and only fade it in if it is not locked. See this:
var divLocked = false;
$(document).scroll(function() {
if (!divLocked) { // show only if not locked
$('.bottomMenu_alert').fadeIn();
}
});
$(document).click(function(event) {
if ( !$(event.target).hasClass('.bottomMenu_alert')) {
$(".bottomMenu_alert").hide();
divLocked = true; // lock it after the first click
}
});

Isotope Internet Explorer scroll issue when selected using function click

Firstly, apologies for including the below 'dev' URL, but this shows the functionality much better than me wripping it out into a jsfiddle.
I use isotope on the below page:
http://orchards.t3.ext.starberry.com/property-sales/properties-for-sale-in-london
The functionality
When you scroll down the page to the bottom & click one of the properties, it auto scrolls back to the top to show the selected property details.
When you close the selected property, by clicking the 'X', it scrolls back down to the position that you previously selected/clicked.
The Issue
This works great in Chrome & Safari, but I have to make this work in IE9 & IE10 which it doesn't.
Can anyone advise or see what is wrong with the below JavaScript, stopping this from works in IE9 & 10?
var oldScroll = 0;
jQuery(window).load(function(){
$(function(){
var $container = jQuery('#startekContainer');
$items = jQuery('.quick-view');
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 50
//layoutMode: 'fitColumns'
},
getSortData : {
selected : function( $item ){
// sort by selected first, then by original order
return ($item.hasClass('selected') ? -1000 : 0 ) + $item.index();
}
},
sortBy : 'selected'
});
jQuery('.close-image').click(function(event){
var $this = jQuery(this).parent().parent();
$this.prev().trigger('click', event, this);
});
$items.click(function(event, origEvent){
//event.preventDefault();
var $this = jQuery(this).parent();
if ( $this.hasClass('selected') && !origEvent ) {
// only allow the close button to close
return true;
}
curScroll = $('body').scrollTop();
$('body').scrollTop( 0 );
// don't proceed if already selected
var $previousSelected = jQuery('.selected');
if ( !$this.hasClass('selected') ) {
$this.addClass('selected');
$this.find('.results-image').addClass('hidden');
$this.find('.swiper').removeClass('hidden');
var thisSwiper = $this.find('.swiper .ImageSlider').data('swiper');
thisSwiper.reInit();
thisSwiper.swipeTo(0);
thisSwiper.startAutoplay();
}
else {
$('body').scrollTop(oldScroll);
}
$previousSelected.removeClass('selected');
$previousSelected.find('.results-image').removeClass('hidden');
$previousSelected.find('.swiper').addClass('hidden');
oldScroll = curScroll;
// update sortData for new items size
$container
.isotope( 'updateSortData', $this )
.isotope( 'updateSortData', $previousSelected )
.isotope();
});
});
});
Answering my own question here:
$(document)
instead of either $('body') or $('html,body')

Adding a hide function to jquery dropdown script on click

I'm currently using this following script to operate my dropdown menu so that when a user clicks the menu item the drop appears and they can currently click anywhere outside the screen to make the menu disappear but i was wondering how id go about adding functionality to make the dropdown disappear by clicking the menu item again (while keeping the option to click anywhere outside the item). Is this hard to implement?
$(document).ready(function() {
/* for keeping track of what's "open" */
var activeClass = 'dropdown-active', showingDropdown, showingMenu, showingParent;
/* hides the current menu */
var hideMenu = function() {
if(showingDropdown) {
showingDropdown.removeClass(activeClass);
showingMenu.hide();
}
};
/* recurse through dropdown menus */
$('.dropdown').each(function() {
/* track elements: menu, parent */
var dropdown = $(this);
var menu = dropdown.next('div.dropdown-menu'), parent = dropdown.parent();
/* function that shows THIS menu */
var showMenu = function() {
hideMenu();
showingDropdown = dropdown.addClass('dropdown-active');
showingMenu = menu.show();
showingParent = parent;
};
/* function to show menu when clicked */
dropdown.bind('click',function(e) {
if(e) e.stopPropagation();
if(e) e.preventDefault();
showMenu();
});
/* function to show menu when someone tabs to the box */
dropdown.bind('focus',function() {
showMenu();
});
});
/* hide when clicked outside */
$(document.body).bind('click',function(e) {
if(showingParent) {
var parentElement = showingParent[0];
if(!$.contains(parentElement,e.target) || !parentElement == e.target) {
hideMenu();
}
}
});
});
Here is my attempt based on the answer below:
/* function to show menu when clicked */
dropdown.bind('click',function(e) {
if (!dropdown.data('open')) {
dropdown.data'(open', true);
// open menu
} else {
dropdown.data('open', false);
// close menu
}
});
Although im getting errors so i assume ive played it in incorrectly or perhaps overwritten something? This is just a section from the code above as it's the only section ive edited with this answer.
Thanks

What you can do is use jQuery.data() and have a variable called open for example which is true or false depending on the state. So you could be something like this.
if (!dropdown.data('open')) {
dropdown.data'(open', true);
// open menu
} else {
dropdown.data('open', false);
// close menu
}