Why my class toggle is strict without any transition effect even though I added transition: 0.5s? It doesn't work on my bootstrap website. Whenever I try to test it on custom div on jsfiddle site then it works fine.
https://jsfiddle.net/dawid1798/5goyjwx0/3/
window.addEventListener('scroll', function() {
var header = document.getElementById("navbar");
header.classList.toggle("fixednav", window.scrollY > 100);
});
.fixednav {
transition: 0.5s;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 9999;
}
When nav loses class .fixednav it also loses the transition property.
Put it on .nav:
.nav {
width: 100%;
height: 250px;
background: red;
transition: 0.5s;
}
Also check if bootstrap is loaded into the project and that you aren't disabling the transition with your css.
Related
In this stackblitz, I am not able to add animation while closing, I tried it using transform, but it didnt seem to work
HTML
Blocker is used to covering the full screen in a half-transparent mode in mobile devices
const sidebar = document.querySelector('.sidebar');
sidebar.querySelector('.blocker').onclick = hide;
function show() { // swipe right
sidebar.classList.add('visible');
document.body.style.overflow = 'hidden';
}
function hide() { // by blocker click, swipe left, or url change
sidebar.classList.remove('visible');
document.body.style.overflow = '';
}
function toggle() {
sidebar.classList.contains('visible') ? hide() : show();
}
.sidebar {
/* it's a mobile sidebar, blocker and content */
position: fixed;
top: 0;
left: 0;
width: 100vw;
/* to cover the whole screen */
height: 100vh;
padding: 0;
/* to override the default padding */
background: rgba(0, 0, 0, .5);
/* half transparent background */
display: none;
z-index: 99999;
/* to be on top of any other elements */
}
.sidebar.visible {
display: block;
}
/*cover the whole screen and to detect user click on background */
.sidebar .blocker {
position: absolute;
width: 100%;
height: 100%;
}
/* user content */
.sidebar .content {
position: absolute;
top: 0;
left: 0;
background: #FFF;
height: 100%;
width: 250px;
left: -50%;
/* will be animated to left: 0, by animation */
animation: slide 0.5s forwards;
}
#keyframes slide {
100% {
left: 0;
}
}
<div class="sidebar">
<div class="blocker"></div>
<div class="content">
Sidebar Content
</div>
</div>
With the above code, you can have a working sidebar.
Check the working code from stackblitz
https://allenhwkim.medium.com/mobile-friendly-sidebar-in-few-minutes-7817b5c5239f
https://stackblitz.com/edit/medium-sidebar-1-eevvax?file=style.css,index.js
You can't animate between display:block (when .sidebar has .visible applied to it) and display:none (when .visible is removed from .sidebar).
display:none turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements (i.e. .blocker and .content) also have their display turned off.
The reason you get an animation upon adding .visible is that .sidebar now "exists" and so .sidebar-content also exists and as such animates. As soon as you remove .visible, .sidebar ceases to exist again and so it and its descendants disappear instantaneously.
You are along the right lines using transforms but you need to remove display:none as the method for hiding the sidebar. Something like the below is a good starting point. You may need to change some values to get it looking exactly as you wish. I have added a working codepen to show the result.
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
padding: 0;
background: rgba(0, 0, 0, .5);
z-index: 99999;
transform: translateX(-100%); // new property - will move the element off the left hand side of the screen
transition: transform .5s ease-in-out; // new property - will make the sidebar slide in in a similar manner to your animation
}
.sidebar.visible {
transform: translateX(0); // new property - makes sidebar sit in its natural position (i.e. taking up the whole viewport)
}
.sidebar .blocker {
position: absolute;
width: 100%;
height: 100%;
}
.sidebar .content {
position: absolute;
top: 0;
left: 0;
background: #FFF;
height: 100%;
width: 250px;
}
I have a navigation div with a height of 0px, when I click a hamburger icon I want a class with 250px height to be added. I'm using an event listener to detect the click which is tested with an alert and working. ToggleClass() is then being used to add the class.
In the developer console I can see the class ebing added however the height of the div isn't changing and you can also see that the height rule isn't being detected/displayed in the console, even with a strikethrough.
Here is an image of the relevent info from dev console: https://gyazo.com/900f858cbfc41e9e8bfe00eb9fd8f1cb
styles.css:
#responsiveNav {
position: absolute;
right: 0;
width: 200px;
height: 0px;
text-align: center;
background-color: rgba(28, 28, 27, 0.8);
color: #009641;
margin-top: 100px;
overflow: hidden;
z-index: 1500;
transition: all 0.8s ease;
}
.mobNavHeight {
height: 250px;
}
JS:
$(document).ready(function () {
var hamburgerBtn = document.getElementById("hamburgerBtn");
//DISPLAY MOBILE NAVIGATION ON HAMBURGER CLICK
function displayMobNav() {
alert("working");
$('#responsiveNav').toggleClass("mobNavHeight");
}
//EVENT LISTENERS
hamburgerBtn.addEventListener("click", displayMobNav);
}); //Doc Ready
It's a CSS specificity issue. An id has a higher specificity than a class. Use this in your CSS instead.
#responsiveNav.mobNavHeight {
height: 250px;
}
But if I were you, I wouldn't use an id to target an element via CSS in the first place. Only use the id to target in javascript, but in CSS just use a class like .responsiveNav, move all of the #responsiveNav styles to that, then use .mobNavHeight to overwrite it. Like this.
<nav id="responsiveNav" class="responsiveNav">nav</nav>
.responsiveNav {
position: absolute;
right: 0;
width: 200px;
height: 0px;
text-align: center;
background-color: rgba(28, 28, 27, 0.8);
color: #009641;
margin-top: 100px;
overflow: hidden;
z-index: 1500;
transition: all 0.8s ease;
}
.mobNavHeight {
height: 250px;
}
I have a div with position fixed (my dialog) which i give a higher z-index to takeover my page when a certain action is performed. Am trying to hide my scrollbar by doing overflow:hidden;without affecting the width of the page when the div takes over the page. Any suggestion how this would be performed??
html, body {
background: #FFFFFF;
font-family: "Avenir Medium";
height: 100%;
transition: overflow 0.37s easein-out
}
.div-dialog{
display: none;
opacity: 0;
position: fixed;
width: 0;
left: 0;
top: 0;
z-index: 0;
overflow: hidden;
background: white;
-webkit-transition: opacity 0.30s ease-in-out;
transition: opacity 0.30s easein-out;
}
Jfiddle trying to replicate my result.The implementation am trying to realize is that of myspace when you click the search icon at the top left
Was finally able to fix my problem, by doing the following
html,body{
height: 100%;
overflow: hidden;
}
body{
overflow: auto;
}
By doing this all my content stays within the body, so when an element has a position of fixed, it covers the scrollbar and its not affected by any change to its overflow,overflow:hidden or overflow:auto
I'm trying to create a Side menu for my responsive website. I'm not that good with JavaScript but it is working! (so far)
My problem is that, I'm toggling the <nav> class to make it appear and dissapear from the left side. The button to click is outside the <nav> content and the button to close is a simple text inside the <nav> content.
So, my HTML looks like this:
<nav id="nav-slide" class="nav-slide">
Side Content <br>
Close
</nav>
That's the nav that I'm trying to Toggle. The button to open should be this image:
<img id="menu-icon" src="images/menu-icon.svg"/>
CSS:
.nav-slide {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
max-width: 100%;
background-color: #3f3f3f;
z-index: 99;
box-sizing: border-box;
padding: 20px;
color:#fff;
margin-left: -100%;
transition: margin 200ms ease-in-out;
}
.nav-open {
margin-left: 0px;
transition: margin 200ms ease-in-out;
}
and my JAVASCRIPT:
$("#menu-icon").click(function(){
$("#nav-slide").toggleClass("nav-open");
});
$("#close-button").click(function(){
$("#nav-slide").toggleClass("nav-slide");
});
Is working so far! But when I click on Close text, and after closing the <nav> it keeps displaying <nav> content like this image:
Image with example of problem
Any way to solve this?
JQuerys toggleClass does add a new class to an item. If it already has that class, it will remove it from that item. So while your nav's base class is nav-slide, toggle nav-open only (not both). Here's a slightly different, basic example of an animated side-nav:
$('button').on('click', function (e) {
$('.menu').toggleClass('open');
});
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 20%;
background-color: tomato;
transform: translate(-100%, 0);
transition: transform 1s;
}
.menu.open {
transform: translate(0, 0);
}
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<button>menu</button>
<div class="menu">
<button>close</button>
</div>
Edit: Here is a pen of your example:
http://codepen.io/wilmaknattern/pen/xZXMaW
I am planning a two-tier fixed position navigation at the top of my design.
As the user scrolls down the page, I would like the navigation to slide up until the first tier is mostly hidden.
If the user then hovers over the navigation, the container should slide down revealing the first tier again.
This hover effect should not fire if the user is at the very top of the browser window.
Additionally, when the user scrolls back to the very top of the page, the full two-tier navigation should again be fully visible as it is on the initial load.
I'm having trouble chaining these events together using javascript and have had to resort to a combination of CSS3 transitions and jQuery addClass/removeClass calls.
Additionally, I can only get the whole mish-mash to fire once. So once the user has scrolled down and back up there is no more animation.
My current code is viewable at this fiddle
Hopefully this gives an idea of what I'm trying to do.
Can anyone help me bring this monstrosity to life?
Code is as follows:
HTML
<div id="nav_wrap">
<div id="nav_one">
<h2>Nav One</h2>
</div>
<div id="nav_two">
<h3>Nav Two</h3>
</div>
</div>
<p>blah blah blah etc...</p>
CSS
#nav_wrap {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 120px;
z-index: 100;
}
#nav_one,
#nav_two {
float: left;
width: 100%;
height: 48px;
background: #111;
}
#nav_two {
background: #1f4c6b;
height: 72px;
}
h2, h3 {
color: #fff;
}
#nav_wrap.fixed {
margin-top: -42px;
-webkit-transition: margin-top .5s ease-in-out;
box-shadow: 0 0 24px #111;
}
#nav_wrap.down {
margin-top: 0px;
-webkit-transition: margin-top .5s ease-in-out;
}
#nav_wrap.drop {
top: 42px;
-webkit-transition: top .5s ease-in-out;
}
#nav_wrap.up {
top: 0;
-webkit-transition: top .5s ease-in-out;
}
Javascript
var top = $('#nav_wrap').offset()
.top - parseFloat($('#nav_wrap')
.css('marginTop')
.replace(/auto/, 0));
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y > top) {
$('#nav_wrap').addClass('fixed');
$("#nav_wrap").hover(
function () {
$(this).addClass('drop');
},
function () {
$(this).addClass('up');
}
);
} else if (y == 0) {
$('#nav_wrap').addClass('down');
}
});
You're overcomplicating your approach. All you actually need to do is toggle one class on scroll in your JavaScript. This CSS will do the rest.
Note: The code will need prefixes added for other browsers (-moz, -o, -ms) and I would look at improving the performance of the addClass part of the call in scroll as the event will be getting called a lot.
An example fiddle can be found here.
CSS
#nav_wrap {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 120px;
z-index: 100;
}
#nav_one,
#nav_two {
width: 100%;
height: 48px;
background: #111;
}
#nav_two {
background: #1f4c6b;
height: 72px;
}
h2, h3 {
color: #fff;
}
#nav_wrap{
-webkit-transition: margin-top .5s ease-in-out;
}
#nav_wrap.scroll {
margin-top: -42px;
box-shadow: 0 0 24px #111;
}
#nav_wrap.scroll:hover{
margin-top: 0px;
}
JS
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y > 0) {
$('#nav_wrap').addClass('scroll');
}
else{
$('#nav_wrap').removeClass('scroll');
}
});