Prevent scroll bar to go up when click mobile nav - javascript

I have a mobile nav and I open it using this code in JS file:
var toggleButton = document.querySelector(".toggle-button");
var mobileNav = document.querySelector(".mobile-nav");
var closeButton = document.querySelector(".close-button");
toggleButton.addEventListener("click", function () {
mobileNav.classList.add("slide");
});
closeButton.addEventListener("click", function () {
mobileNav.classList.remove("slide");
});
.mobile-nav {
position: fixed;
transition: 0.4s ease;
transform: translateX(1400px);
}
.slide {
transform: translateX(0);
}
when I scroll down and open mobile nav using slide class the scroll bar goes up, how to fix it? i want it to remain at current place where I open slide menu.
here is project Github page for more codes:
enter link description here
and here is the online website for reprodure the issue, just make browser page smaller than 768px and scroll down then tap hamburger icon to see the issue.
enter link description here

const navSection = document.querySelector(".nav-section");
function openNav() {
navSection.classList.add("open-nav")
}
function closeNav() {
navSection.classList.remove("open-nav")
}
.nav-section{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0;
transition: 0.25s;
pointer-events: none;
}
.nav-section nav{
display: flex;
flex-direction: column;
position: relative;
transform: translateX(-100%);
width: 20rem;
height: 100%;
background: red;
}
.open-nav{
pointer-events: all;
opacity: 1;
background: rgba(0, 0, 0, 0.5);
}
.open-nav nav{
transform: translateX(0%);
}
.close-nav-btn{
position: absolute;
right: 0;
top: 0;
}
<div class="open-btn">
<button onclick="openNav()">open</button>
</div>
<section class="nav-section">
<nav>
<a>nav 0</a>
<a>nav 1</a>
<a>nav 2</a>
<a>nav 3</a>
</nav>
<button onclick="closeNav()" class="close-nav-btn">close</button>
</section>
Like this maybe?

Related

Clicking a button to initiate an animation, then clicking another button to revers that animation

I created a button where you can click it. It then initiates a CSS animation where some buttons and text flow down the screen saying are you sure you want to do this? They can then click the yes or no button and I want it to reverse the animation back up. I have completed the animation going down but I can't manage to repeat that animation going back up when they click a button.
Here is the HTML:
<button onclick="confirm()">Delete</button>
<div id="wholeshow" class="confirm-whole">
<h1 class="confirm">Delete</h1>
<p class="confirm">Are you sure you want to delete ____?</p>
<button class="confirm" onclick="reset()">Delete</button>
<button class="confirm" onclick="cancel()">Cancel</button>
</div>
Here is the JS:
function confirm() {
document.getElementById("wholeshow").classList.add("add");
}
and here is the CSS:
.confirm-whole {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: grey;
animation: slideIn 0.5s forwards;
}
#keyframes slideIn {
0% {
top: -250px;
height: 0%;
}
99% {
height: 0%;
}
100% {
top: 0px;
height: 100%;
}
}
.add {
display: block;
}
Thanks so much for the help!
The JavaScript isn't pretty but it works, perhaps a better solution would be to use CSS transitions if they are able to support your animation requirements.
function confirm() {
document.getElementById("wholeshow").classList.add("add");
}
// added
function reset() {
const wholeshow = document.getElementById("wholeshow");
const resetDir = () => { // need to reset the animation direction and remove the `add` class
wholeshow.removeEventListener("animationend", resetDir, true);
wholeshow.style.animationDirection = "normal";
wholeshow.classList.remove("add");
};
wholeshow.addEventListener("animationend", resetDir, true);
wholeshow.style.animationDirection = "reverse";
wholeshow.classList.remove("add");
void wholeshow.offsetWidth; // force rerender
wholeshow.classList.add("add");
}
.confirm-whole {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: grey;
animation: slideIn 0.5s;
}
#keyframes slideIn {
0% {
top: -250px;
height: 0%;
}
99% {
height: 0%;
}
100% {
top: 0px;
height: 100%;
}
}
.add {
display: block;
}
<button onclick="confirm()">Delete</button>
<div id="wholeshow" class="confirm-whole">
<h1 class="confirm">Delete</h1>
<p class="confirm">Are you sure you want to delete ____?</p>
<button class="confirm" onclick="reset()">Delete</button>
<button class="confirm" onclick="cancel()">Cancel</button>
</div>

Multiple actions for one button

I'm trying to make full screen menu like a modal.
Everything is fine except fadeOut animation.
Can someone explain what is wrong with my scripts/codes?
I want to make this content fades in when click the button but fades out when its clicked again. My script sets the value of "display" but in animation only fade in effect works fine. In reverse fade out do effect instantly (without 0.5s animation duration). Button has got z-index = 101 and menu-content = 100 so the button stay at the same place all the time.
Thanks
function myMenu() {
var x = document.getElementById("menu-content");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
if (x.style.animation === "fadeIn 0.5s ease-in-out") {
x.style.animation = "fadeOut 0.5s ease-in-out";
} else {
x.style.animation = "fadeIn 0.5s ease-in-out";
}
}
#menu-content {
display: none;
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(-25deg, #c0a0ae, #6f448a);
z-index: 100;
top: 0;
left: 0;
animation: fadeOut 0.5s ease-in-out;
}
.menu-content-properties {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: auto;
background: #000000;
opacity: 0.5;
}
#keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
<button id="menu-button" style="z-index: 101; position: absolute; top: 0;
left: 0;" onclick="myMenu();">Menu</button>
<div id="menu-content"></div>
<div id="menu-content">
<div class="menu-content-properties">
<div>1</div>
<div></div>
<div>2</div>
</div>
</div>
Okay, so there are a couple of issues.
Firstly, in your HTML, there are 2 elements with the same ID (menu-content) which will cause a couple of problems, so remove one of those.
Secondly, when you set display: none in your myMenu function, it will immediately be hidden, so that's why the animation is not shown.
You have a couple of options:
Put that code within a setTimeout so that it isnt set to display: none until the animation has finished, OR
Don't use display: none
Personally, I think you're better off not using display: none, otherwise you need to amend your javascript whenever you change the duration of the animation.
I've managed to get it working without the need for display none, and using CSS transitions which works quite nicely
function myMenu() {
var x = document.getElementById("menu-content");
if (x.classList.contains("open")) {
x.classList.remove("open");
} else {
x.classList.add("open");
}
}
#menu-content {
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(-25deg, #c0a0ae, #6f448a);
z-index: 100;
top: 0;
left: 0;
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
#menu-content.open {
opacity: 1;
}
.menu-content-properties {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: auto;
background: #000000;
opacity: 0.5;
}
<button id="menu-button" style="z-index: 101; position: absolute; top: 0;
left: 0;" onclick="myMenu();">Menu</button>
<div id="menu-content">
<div class="menu-content-properties">
<div>1</div>
<div></div>
<div>2</div>
</div>
</div>

Using Javascript if else to trigger css transition when Navbar is open

I have a hamburger menu button that transforms into a 'X' when clicked using css and javascript. Because my Navbar closes when a selection is made, not just when the menu button is clicked, the menu button stays as a 'X'.
I assume that I will need to use an 'if else' statement to tell the menu button to change instead of on click but I am not sure how to code this.
I have included the css code for the style of the button as well as the javascript that is currently used to make it transform and the javascript for the navbar.
The button code is from this site:
http://callmenick.com/post/animating-css-only-hamburger-menu-icons
And the navbar is from here:
https://www.w3schools.com/howto/howto_js_sidenav.asp
Button CSS Code:
.c-hamburger {
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
width: 96px;
height: 96px;
font-size: 0;
text-indent: -9999px;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
transition: background 0.3s;
}
.c-hamburger:focus {
outline: none;
}
.c-hamburger span {
display: block;
position: absolute;
top: 44px;
left: 18px;
right: 18px;
height: 8px;
background: white;
}
.c-hamburger span::before,
.c-hamburger span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 8px;
background-color: #fff;
content: "";
}
.c-hamburger span::before {
top: -20px;
}
.c-hamburger span::after {
bottom: -20px;
}
.c-hamburger {
background-color: #ff3264;
}
.c-hamburger span {
transition: background 0s 0.3s;
}
.c-hamburger span::before,
.c-hamburger span::after {
transition-duration: 0.3s, 0.3s;
transition-delay: 0.3s, 0s;
}
.c-hamburger span::before {
transition-property: top, transform;
}
.c-hamburger span::after {
transition-property: bottom, transform;
}
/* active state, i.e. menu open */
.c-hamburger.is-active {
background-color: #cb0032;
}
.c-hamburger.is-active span {
background: none;
}
.c-hamburger.is-active span::before {
top: 0;
transform: rotate(45deg);
}
.c-hamburger.is-active span::after {
bottom: 0;
transform: rotate(-45deg);
}
.c-hamburger.is-active span::before,
.c-hamburger.is-active span::after {
transition-delay: 0s, 0.3s;
}
Button Javascript:
(function() {
"use strict";
var toggles = document.querySelectorAll(".c-hamburger");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
});
}
})();
Navbar Javascript:
/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
function openNav() {
document.getElementById("mySidenav").style.width = "200px";
open = true;
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
open = false;
}
If someone can help me find the correct code to do this, or has a better idea, I would really appreciate it. I'm quite new to Javascript if you can't already tell.
Thanks!
I didn't quite get what you were up to. Did you mean that you wanted your NavBar to be closed when you click on a button not just only when clicking on the 'X'?
If it was so, in the HTML code, you simply need to add the onclick="closeNav();" to every button. Something like this
<button onclick = "closeNav();"> My Button </button>
Ok. Since you want the button to change into 'X' when the NavBar is open, you need to give your button an ID, then I think we could use the following Javascript condition.
HTML
<button id="myButton" class="c-hamburger c-hamburger--htx">
<span>
::before
"toggle menu"
::after
</span>
</button><!--I copied from the site you provided-->
Javascript
I have edited your sidenav.js
function decide(){
if(open == true){
closeNav();
}else{
openNav();
}
}
/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
function openNav() {
document.getElementById("mySidenav").style.width = "200px";
document.getElementById("myButton").classList.add("is-active");
open = true;
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("myButton").classList.remove("is-active");
open = false;
}

automatic cookie bar pure css works fine but need delay

I added this pure css cookie bar to my website and all works fine, the only problem is that when you enter in the site, you can see FIRST the cookie bar, AND the cookie bar go up and go down at the end.
How can see my cookie bar only go down when i enter in my site, i thought to change de thenimation delay, add set time out .... but nothing change !!
here is the original codepen and you can see what i want to change in it
www.codepen.io/natewiley/pen/uGtcD
HERE IS MY CODE
<input class="checkbox-cb" id="checkbox-cb" type="checkbox" />
<div class="cookie-bar">
<div class="message">
This website uses cookies to give you an incredible experience. By using
this website you agree to the
<div class="buttoncookies-container">
<a style="letter-spacing: 1px;" class="buttoncookies" id="modalcookieslinken" onclick="toggleOverlay()">terms</a>
</div>
</div>
<div class="mobile">
This website uses cookies,
<div class="buttoncookies-container">
<a style="letter-spacing: 1px;" class="buttoncookies" id="modalcookiesshortlink" onclick="toggleOverlay()">
learn more
</a>
</div>
</div>
<label for="checkbox-cb" class="close-cb">X</label>
</div>
</div>
HERE IS MY CSS
.cookie-bar { z-index:9996; position: fixed; width: 100%; top: 0; right: 0; left: 0; height: auto; padding: 20px; line-height:20px; text-align: center; background: #d2c6af; transition: .8s; animation: slideIn .8s; animation-delay: .8s; display: inline-block; }
.mobile { display: none; }
#keyframes slideIn { 0% { transform: translateY(-1000px); } 100% { transform: translateY(0); } }
.close-cb { border: none; background: none; position: absolute; display: inline-block; right: 20px; top: 10px; cursor: pointer; }
.close-cb:hover { color:#fff;; }
.checkbox-cb { display: none;}
#checkbox-cb:checked + .cookie-bar { transform: translateY(-1000px); }
Removing the line in css
animation-delay: .8s;
will give you the result
Make the animation last longer.
animation: slideIn 4s;
Plus add some trick to animation flow:
0% {
transform: translateY(-50px);
}
50% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}

transition with position absolute

I have a div that is positioned absolute to my header-Tag. All is okay. With JavaScript I toggle the classes display_block and display_none, when I click on my button.
All works fine.
The div that gets display: none and display: block with the toggle, gets the position right: -100% when it's display:none, and right: 0 when its display: block.
Also works fine. But there is one problem.
The div got transition: all 1s ease-in-out but I don't get that flow-motion. It's only here or gone. But no effect. Why?
header {
position: relative;
}
#ware_cart {
position: absolute;
top: 80px;
width: 35%;
transition: all 1s ease-in-out;
}
.display_none {
display: none;
right: -100%;
}
.display_block {
display: block;
right: 0;
}
<header>
<div id="ware_cart" class="display_none">
<!-- stuff i like to show -->
</div>
</header>
As Paulie D said, you can not transition display.
Also, if the element starts at right: 100% there is no need to hide it.
Try this snippet:
$('#toggle').click( function() {
$('#ware_cart').toggleClass('move_right');
});
header {
position: relative;
}
#ware_cart {
position: absolute;
width: 35%;
top: 80px;
right: 100%;
transition: right 1s ease-in-out;
}
#ware_cart.move_right {
right: 0%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="ware_cart">
stuff i like to show
</div>
<div id="toggle">
Toggle it!
</div>
</header>

Categories