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>
Related
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.
In my application I have a button which is represented by -
<div id="hamburgerIconId" class="hamburgerIcon"></div>
When I click on this button, it opens a side navigation box which is not visible initially. Clicking on the same button closes the side navigation box. The HTML of side navigation looks like this -
<div id="pdAppSidenav" class="sidenav show-xs hidden-lg">
Life Insurance
<section id="cd-timeline" class="cd-container">
BLAH BLAH BLAH
</section>
<!-- cd-timeline -->
<div class="pd-content-bottom">
<h3>HELP DESK </h3>
<p>Open 7am-5pm </p>
</div>
</div>
Also, I have set up a masking layer that becomes visible when the side navigation box is opened. This layer's is sandwiched between the side navigation box and the webpage. It basically is used to darken and disable the background when the sidenav is opened. Clicking anywhere on the screen should also close the sidenav
The masking layer -
<div id="left-nav-mask">
</div>
Below is my Javascript/Jquery code -
function leftnav() {
var collapse_sidebar_modal = document.getElementById('pdAppSidenav');
var collapse_sidebar_icon = document.getElementById("hamburgerIconId");
var left_nav_mask = document.getElementById("left-nav-mask");
var isOpen = false;
collapse_sidebar_icon.onclick = function() {
if (isOpen == false) {
console.log(event.target);
collapse_sidebar_modal.style.display = "block";
collapse_sidebar_modal.style.width = "250px";
left_nav_mask.style.display = "block";
isOpen = true;
} else {
console.log(event.target);
collapse_sidebar_modal.style.display = "none";
collapse_sidebar_modal.style.width = "0px";
isOpen = false;
}
}
$(window).bind("click touchstart", function(event) {
if (event.target == left_nav_mask && isOpen == true) {
console.log(event.target);
left_nav_mask.style.display = "none";
collapse_sidebar_modal.style.display = "none";
collapse_sidebar_modal.style.width = "0px";
isOpen = false;
}
});
}
When I click on the button, it opens the sidenav, clicking it again closes the sidenav. Also, when the sidenav is open, clicking anywhere outside the sidenav closes it.
Now, when I use the mobile emulator provided in Chrome's dev tools, clicking on the button while the sidenav is open does not close it. What happens is that the window.onclick fires and immediately after that the onclick function of the button fires.
Does anyone know the solution to this issue?
I have menu which is open on click and close automatically. I'm not very much into .js and don't know how exactly work.
What I want is this menu to not close automatically. When is open to stay open.
This is the .js
var current_item = 0;
// few settings
var section_hide_time = 400;
var section_show_time = 400;
// jQuery stuff
jQuery(document).ready(function($) {
// Switch section
$("a", '.mainmenu').click(function()
{
if( ! $(this).hasClass('active') ) {
current_item = this;
// close all visible divs with the class of .section
$('.section:visible').fadeOut( section_hide_time, function() {
$('a', '.mainmenu').removeClass( 'active' );
$(current_item).addClass( 'active' );
var new_section = $( $(current_item).attr('href') );
new_section.fadeIn( section_show_time );
} );
}
return false;
});
});
I suppose the part for open/close is in switch section but I'm not sure.
Try using Toggle();, then it won't close until you click the button again.
The "section_show_time" is what is making the menu close automatically. If you take that out of the javascript it should stay open when opened. You might want to take out the "section_hide_time" as well if you don't want it to do anything with out a users click.
I would recommend using completely different javascript to make a open and close toggle button:
In the HTML file:
<button onclick="toggleMenu()"> </button>
<div id="toggleMenu" style="display:none;">
<"menu content here">
</div>
JS:
<script>
function toggleMenu() {
if (document.getElementById("toggleMenu").style.display == "none"){
document.getElementById("toggleMenu").style.display = "block";
} else {
document.getElementById("toggleMenu").style.display = "none";
}
}
</script>
In js you could change out "block" to what ever you want the display to be when the menu is to be visible.
I'm working on a responsive website that has a clickable drop down menu for mobile size screens. It works on small laptop screens on a mouse click but I'm having trouble figuring out how to have it react in the same way to a touch for mobile. Either plain Javascript or Jquery methods welcome. The class to_nav is the button that should reveal the menu.
$(window).ready(function() {
$(window).on('resize', function(){
var win = $(this);
if (win.width() >= 600) { document.getElementById('menu').style.display='inline'; }
});
});
displaynav= function () {
var nav = document.getElementById("menu");
if (nav.style.display == 'none'){
nav.style.display = "block";
}
else { nav.style.display = 'none';}
}
$(document).on("ready",function(){
$('.to_nav').click(function(){
displaynav();
})
});
I'm using this code to create an overlay and a overlaid box:
// GENERAL OVERLAY BOX
var isOpen = false; // STATUS OF OVERLAY BOX
function showOverlayBox() { // DISPLAY BOX
if( isOpen == false ) return; // DO NOTHING IF NOT SET TO OPEN
var activeTab = $(this).attr("class");
$('.overlayBox').css({ // OVERLAY BOX POSITION
display:'block',
left:( $(window).width() - $('.overlayBox').width() )/2,
top:( $(window).height() - $('.overlayBox').height() )/2 -20,
position:'absolute'
});
$('.bgCover').css({ // DARK BG
display:'block',
width: $(window).width(),
height:$(window).height()
});
}
function doOverlayOpen() { // OPEN
isOpen = true; // SET STATUS TO OPEN
showOverlayBox();
$('.bgCover').css({opacity:0}).animate( {opacity:0.8, backgroundColor:'#000'} );
return false;
}
function doOverlayClose() { // CLOSE OVERLAY
isOpen = false; //SET STATUS TO CLOSED
$('.overlayBox').css( 'display', 'none' );
//$('.bgCover').animate( {opacity:0}, null, null, function() { $(this).hide(); } ); WON'T WORK IN IE7
$('.bgCover').hide();
}
$(window).bind('resize',showOverlayBox);// IF WINDOW IS RESIZED, REPOSITION OVERLAY
$('.launchLink').click( doOverlayOpen ); // OPEN OVERLAY WHEN a.launchLink CLICKED
$('a.closeLink').click( doOverlayClose ); // CLOSE OVERLAY WHEN a.closeLink CLICKED
In IE7, I have no problems opening and closing the content box -- the problem is with the .bgCover . It will animate in, but will not animate out using $('.bgCover').animate( {opacity:0}, null, null, function() { $(this).hide(); } ); It will hide with: $('.bgCover').hide();, but then won't re-appear if the box overlay is brought up again. (No problems in other browsers)
Any ideas about what's going on?
Try
$('.bgCover').remove();
I found that using hide() can be troublesome with overlays.