I currently have a menu that appears when a mobile button is clicked. When a user clicks off the div, I want the div to hide. Right now, I have an 'X' the user must click to hide the div. How can I accomplish what I'm trying to do? (I believe I included all necessary code - but if I missed something, let me know.)
Thank you in advance!
HTML
<div class="nav-mobile">
Menu Item 1
Menu Item 2
</div>
JS
if (nav-mobile) {
nav-mobile.addEventListener('click', () => {
nav.classList.toggle('active');
});
}
SCSS
(by default is hidden)
.nav-mobile {
visibility: hidden;
}
(when mobile navigation is active, it becomes visible)
&.active {
.nav-mobile {
visibility: visible;
opacity: 1;
h5:not(nav-mobile-title) {
margin: 0;
}
}
}
Related
I used the following code to toggle a button class in order to make a full-screen mobile menu.
HTML
button class="hamburger hamburger--slider" type="button">
<a href='#'><div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</a>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.hamburger').click(function(){
$('.hamburger--slider').toggleClass('is-active');
});
});
});
Now I would like to hide another item in my header when the toggled class .is-active is present.
The following code works to hide the item, but once the toggled class is gone, the item does not reappear but stays hidden until the page is reloaded.
jQuery(function($) {
if ($('.hamburger--slider.is-active').length) {
$('.rey-headerCart-wrapper').hide();
}
});
Appreciate any help :) !
you have to show the element again after the burger menu closes:
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.hamburger').click(function(){
$('.hamburger--slider').toggleClass('is-active');
// hide / show other element
if ($('.hamburger--slider.is-active').length) {
$('.rey-headerCart-wrapper').hide();
} else {
$('.rey-headerCart-wrapper').show();
}
});
});
});
Or in vanilla javascript:
window.addEventListener("load", () => {
document.querySelector(".hamburger").addEventListener("click", () => {
document.querySelector(".hamburger--slider").classList.toggle("is-active");
// hide / show other element
const cart = document.querySelector(".rey-headerCart-wrapper");
if (document.querySelector(".hamburger--slider.is-active")) {
cart.style.display = "none";
} else {
cart.style.display = "block";
// apply original display style
// cart.style.display = "inline-block";
// cart.style.display = "flex";
};
});
})
In order to make toggle functions like this more understandable, maintainable and extendable you need to think about your HTML structure.
In your current structure, you have a button that toggles a class on itself. Therefore any element beyond that button that has to change appearance or beaviour has to check which class that button has, or you have to extend the click-event handler in order to add these elements (that's what you did here).
This can get quite messy really fast.
A better approach could be to not toggle a class on the button but on an element that is a common parent to all elements that you want to change the behavior of.
That way anything you ever add to that wrapper already can be manipulated via CSS, without the need of changing your JS.
$('.nav-toggler').on('click', function() {
$('#nav-wrapper').toggleClass('active');
});
.menu, .cart {
padding: 1em;
margin: 2px;
}
.cart {
background: #FFF000;
}
.menu{
background: #F1F1F1;
display: none;
}
#nav-wrapper.active > .menu {
display: block;
}
#nav-wrapper.active > .cart {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav-wrapper">
<button class="nav-toggler">Toggle</button>
<div class="menu">My Menu</div>
<div class="cart">My Cart</div>
</div>
I'm refactoring pattern library components to comply with accessibility standards, and I'm dealing with an expandable header menu that is in actuality a hidden checkbox. It opens and closes on the checkbox's checked state. Because it's hidden it didn't have any labeling for ChromeVox to read, and it no longer could be activated via the spacebar, which is normally a default. I decided to add some spans that described when the menu is expanded or collapsed, and an event listener that triggers on a keystroke, and changed the display from one to the other so ChromeVox could read the spans and announce the change. The menu works completely on a click, the state changes and the reader works, but on keystroke the menu will open and the reader fails to announce the change to the spans.
This is my event listener-
function checkboxToggle() {
const el = document.querySelector('.site-header__button');
function handleCheckboxEvent(e) {
const checkbox = document.querySelector('.site-header-toggle');
if (e.keyCode === 13) {
checkbox.checked = !checkbox.checked;
}
}
el.addEventListener('keydown', handleCheckboxEvent);
}
The html is created through a Twig template-
<input hidden type="checkbox" id="site-header-toggle" class="site-header-toggle">
<header class="{{ classes|join(' ') }}">
<label tabindex="0" for="site-header-toggle" class="site-header__button icon--menu">
<span class="u-hide expanded-text">navigation menu expanded</span>
<span class="u-hide collapsed-text">navigation menu collapsed</span>
</label>
{% if menu_items %}
<nav class="site-header__menu">
{...}
</nav>
{% endif %}
</header>
With Scss I'm using an interpolation to effect everything in the .site-header parent when it's sibling, the checkbox, changes states. On keystroke all the displays change as expected, but it's just not triggering ChromeVox to read the spans as they are changing displays.
$open: '.site-header-toggle:checked + .site-header';
.site-header {
{...}
}
&__button {
font-size: 1.5rem;
.expanded-text {
display: none;
}
.collapsed-text {
display: inline;
}
&:hover { cursor: pointer; }
#{$open} & {
#include icon(close);
.expanded-text {
display: inline;
}
.collapsed-text {
display: none;
}
}
}
&__menu {
display: none;
width: 100%;
#{$open} & {
display: block;
}
}
}
I'm newish to screen readers so maybe there's something about ChromeVox that I'm just not taking into account. Any insight would be so helpful or resources I can check out to try and find a solution.
This question already has answers here:
How to prevent a click on a '#' link from jumping to top of page?
(24 answers)
Closed 7 years ago.
I've been working on a new project recently and used the fixed top menu.
In the top navigation menu I have and unnumbered inline list.
I've got an element which is clickable and after click() it shows the vertical options that are inside the div.
I'm not sure if it's just the css mistake I did or I need to add something to make this work, but every time I click on this <li> element it navigates me to the top of the page and then shows the content of the div.
It's working at least, but I want the users to be satisfied with the functions on website, so I don't want the click() function to navigate me to the top of the page, but just to show fixed <div> from navbar that is aligned to my fixed navbar. Thanks for help.
**EDIT:**I forgot to say that after the <div> show() function I can easily move with that showed div on the site and it's fixed where it should be, but once again when I click on it to collapse it, the click() function navigates me to the top.
Here's the code:
HTML:
<li class="navbar_item navbar_item_left navbar_item_actions" onclick=">
<a class="navbar_item_link navbar_item_link_for_actions refresher" href="#">Click me!</a>
<div class="actions-dropdown">
First link
Second link
Third link
</div>
</li>
CSS:
.actions-dropdown {display: none; position: fixed; background-color: rgba(154, 210, 78, 1); width: 250px;}
.actions-dropdown a {color: rgb(250, 250, 250); padding: 8px; font-size: 15px; text-decoration: none; display: block; text-align: left; float: left; width: 234px;}
JS:
$(document).ready(function(){
$(".navbar_item_actions").click(function(){
var display = $(".actions-dropdown").css('display');
if(display == 'none'){
$(".actions-dropdown").show(400);
} else {
$(".actions-dropdown").hide(400);
}
});
});
Cancel the click so the default action (following the link) will not execute.
$(".navbar_item_actions").click(function(e){
e.preventDefault();
/* rest of code */
});
Use preventDefault on the event.
$(".navbar_item_actions").click(function(event){
var display = $(".actions-dropdown").css('display');
if(display == 'none'){
$(".actions-dropdown").show(400);
} else {
$(".actions-dropdown").hide(400);
}
event.preventDefault();
});
I have a div called title, and another one called description.
I have managed to make the div description appear while hovering on title.
here is the fiddle
Now I want to make the div description stay visible while I'm hovering on it (ON THE DESCRIPTION DIV).
Once i remove the hover form the div description, it should hide.
Here is my html
<span class="title">Last</span>
<div class="description">some description</div>
Here is my JS
var cancel = false;
$("div.description").hide();
$(".title").hover(function () {
cancel = (cancel) ? false : true;
if (!cancel) {
$("div.description").hide();
} else if (cancel) {
$("div.description").show();
}
});
And this is the CSS
.title { background: red; }
.description { background: yellow; }
You may not need jQuery to do this.
Given the markup you provided, just use plain CSS and utilize the adjacent sibling combinator, +:
Example Here
.description {
display: none;
}
.title:hover + .description,
.description:hover {
display: block;
}
If you need to use jQuery, you can just include the .description element in your jQuery selector:
Updated Example
$(".title, .description").hover(function () {
// ...
});
I'm trying to change a spoiler but i have problem with javascript code
This is the spoiler:
http://nathan3000.altervista.org/Jdownloader%20Spoiler/zzzz.html
When i click the image "MAC" the spoiler opens. When i click again MAC the spoiler closes. But when i click between the text the spoiler closes again. I do not want the spoiler closes when I click in the middle of the text but only when i click image "MAC". How can i do change selector so it only show/hides when i click the image?I'm still clicking inside the .OS container
I don't understand why the table border doesn't appear on online version while on local version I can see the borders of tables.
The javascript code for spoiler is this:
<script type="text/javascript">
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
if($(this).find(".details").is(":visible"))
{
$(this).find(".details").not(":hidden").hide("slow");
return true;
}
else
{
$(this).find(".details").show("slow");
return false;
}
});
});
</script>
<style type="text/css">
<!--
.details {
display: none;
clear: both;
padding: 2px;
}
.nonjs{
cursor:pointer;
}
img {
border: 0px;
}
-->
</style>
Thanks in advance
This is working:
$(document).ready(function(){
$(".nonjs").removeAttr( "href");
//href is needed for users without JS
$('.OS').click(function(e){
if(!$(e.target).parents('.details').length){
if($(this).find('.details').is(":visible"))
{
$(this).find('.details').not(":hidden").hide("slow");
return true;
}
else
{
$(this).find('.details').show("slow");
return false;
}
}
});
});
put your spoiler/ popdown menu directly after your .OS image. right now your popdown is a child of the .OS container, so clicks on it are passed to the .OS click handler.
here is something like you want:
http://tempesthostingservices.com/t/zzzz.html