How to lock sidebar menu hidden when refresh page - javascript

I have a sidebar menu that has been successfully hidden and shown. When the sidebar menu is hidden and I refresh the page or browser, the hidden sidebar menu will return to its original appearance, not in the position when it was hidden. The question is how to lock so that the sidebar menu display remains in a hidden position. I've tried several times using javascript but it still fails. Please help thank you.
.sidebar {
height: 100%;
width: 250px;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
background-color: var(--sidebar-color);
color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition: all 0.5s ease;
overflow-y: auto;
/* hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none;
scrollbar-width: none;
}
.sidebar.expand {
width: 65px;
}
var btnToggle = document.querySelector("#btnToggle");
var sidebar = document.querySelector(".sidebar");
btnToggle.onclick = function() {
sidebar.classList.toggle("expand");
}

If you want it to be persistent, you need to use localStorage to store the state of the sidebar. Then, when the page reloads, you can read the state from localStorage, and set the class to the sidebar accordingly.
Untested code below:
var btnToggle = document.querySelector("#btnToggle");
var sidebar = document.querySelector(".sidebar");
// When the page loads, use localStorage to set the initial class
if(localStorage.getItem("expand") && localStorage.getItem("expand") == "true"){
sidebar.classList.add("expand");
}
btnToggle.onclick = function() {
sidebar.classList.toggle("expand");
localStorage.setItem("expand", sidebar.classList.contains("expand"));
}
I created a minimal code pen to illustrate how it works. I also included the slide-in-out animation you mentioned in the comments.

Related

Mobile header issue on iphone when scroll up

On my website, I have added the fixed position to the header, and its working fine in desktop version and android os phones. but in iPhone when the user scrolls down it works fine but as fast the user starts to scroll up an unknown part of the div appears in the back of the header and it overlaps all the content on the website. I have tried to find that part of div but it's not working. please help.
here is my header code:
#header.header-fixed {
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 9997;
background: rgba(0, 0, 0, 0.98);
height: 70px;
padding: 15px 0 0;
transition: all 0.5s;
border-bottom: 2px solid #13aafe;
}

Firefox ignoring CSS3 transition?

So I've been trying to get a transition working properly in firefox, This is what I have at the moment:
index.html:
<button type="button" id="pushButton">Push Me!</button>
<div id="loginBackground" class="login-background">
<div id="loginBox" class="login-box-inactive">
</div>
</div>
global_style.css:
.login-background {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, 0.4);
}
.login-box-inactive, .login-box-active {
display: flex;
flex-flow: column nowrap;
min-width: 150px;
min-height: 150px;
background: #fff;
margin: auto;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
}
.login-box-active {
min-width: 350px;
min-height: 350px;
transition: width 2s, height 2s, ease-in-out, 0.5s;
}
finally, login.js:
"use strict";
var pushButton = document.getElementById("pushButton");
var loginBackground = document.getElementById("loginBackground");
var loginBox = document.getElementById("loginBox");
pushButton.onclick = function() {
loginBackground.style.display = "flex";
loginBox.className = "login-box-active";
}
window.onclick = function(event) {
if(event.target == loginBackground) {
loginBackground.style.display = "none";
loginBox.className = "login-box-inactive";
}
}
AFAIK, pretty much every modern browser to date has standardised the transition tag so why is it that firefox is ignoring the transition tag entirely?
Thanks!
EDIT:
So I now have the following within my CSS file:
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;
Chrome plays well and displays this as should. Firefox still continues to ignore them. I even prefixed -moz- on them and it still ignored them.
EDIT 2:
I would like the following to happen once the button is pressed:
1) User presses Press Me! button.
2) loginBackground then overlays any content below (imagine the button is not the only content on page), rendering none of it clickable.
3) User will then have a choice of filling form out within loginBox or clicking a closeButton or loginBackground, both of which have the following outcome:
3.1) Upon user clicking either closeButton or loginBackground the loginBox and loginBackground disappears, leaving content underneath usable.
The problem is both of these browsers handle the display property kind of differently. The execution of your transition depends on the display property of the loginBackground which is "display:none" initially. The box that is changing the dimension is a child of this division. Now, the interesting thing that is happening is:
Firefox is removing the child of the parent which has display:none set
Here's what firefox's mdn doc on display says:
In addition to the many different display box types, the value none lets you turn off the display of an element; when you use none, all descendant elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.
That's why when you are toggling display value on firefox the transition's don't occur since it's kind of removed and reinserted; essentially making it have no previous value to start of the transition from.
If you apply the "login-box-active" class with a slight delay, everything starts working as expected
"use strict";
var pushButton = document.getElementById("pushButton");
var loginBackground = document.getElementById("loginBackground");
var loginBox = document.getElementById("loginBox");
pushButton.onclick = function() {
loginBackground.style.display = "flex";
setTimeout(function() {
loginBox.className = "login-box-active";
}, 400)
}
window.onclick = function(event) {
if(event.target == loginBackground) {
loginBackground.style.display = "none";
loginBox.className = "login-box-inactive";
}
}
.login-background {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, 0.4);
}
.login-box-inactive, .login-box-active {
display: flex;
flex-flow: column nowrap;
min-width: 150px;
min-height: 150px;
background: #fff;
margin: auto;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
}
.login-box-active {
min-width: 350px;
min-height: 350px;
transition: width 2s, height 2s, ease-in-out 0.5s;
}
<button type="button" id="pushButton">Push Me!</button>
<div id="loginBackground" class="login-background">
<div id="loginBox" class="login-box-inactive">
</div>
</div>
In the curious case of Chrome, it kind of does not remove the child of "display:none". That's why the transition works as usual on it.
Although, I would suggest to use simple opacity to achieve such effect instead of playing with display. Something, like this:
"use strict";
var pushButton = document.getElementById("pushButton");
var loginBackground = document.getElementById("loginBackground");
var loginBox = document.getElementById("loginBox");
pushButton.onclick = function() {
loginBackground.style.opacity = "1";
loginBox.className = "login-box-active";
}
window.onclick = function(event) {
if(event.target == loginBackground) {
loginBox.className = "login-box-inactive";
loginBackground.style.opacity = "0";
}
}
.login-background {
opacity: 0;
position: fixed;
display: flex;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: rgba(0, 0, 0, 0.4);
transition: opacity 2s;
}
.login-box-inactive, .login-box-active {
display: flex;
flex-flow: column nowrap;
background: #fff;
width: 150px;
height: 150px;
margin: auto;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
transition: width 2s, height 2s, ease-in-out 0.5s;
}
.login-box-active {
width: 350px;
height: 350px;
}
<button type="button" id="pushButton">Push Me!</button>
<div id="loginBackground" class="login-background">
<div id="loginBox" class="login-box-inactive">
</div>
</div>
transition: width 2s, height 2s, ease-in-out, 0.5s;
This line seems to be incorrect.
Try to remove last value and move timing function to a separate property.

Why does the animation reset on slideToggle()? (jQuery)

I've positioned a div (fixed) at the bottom of the viewport to act as a contact tab, when then tab is clicked it triggers a panel to slide out, this is working correctly.
I'm also trying to get the tab to slide out when it is clicked and slide back in when then close button is clicked on the panel.
The tab has the ID #menufixed
The panel close button has the class .nest-custom-button-wrapper
This is the JS I'm currently using which is causing a weird animation reset everytime the slideToggle is triggered:
<script>
jQuery(document).ready(function(){
jQuery("#menufixed").click(function(){
jQuery("#menufixed").slideToggle();
});
});
</script>
View the issue:
https://content.screencast.com/users/Vanstone/folders/Default/media/aa25e806-e0c0-4f8c-b112-e1162ede41da/11new.mp4
How can I get the tab to stay hidden and only trigger the slide up when the .nest-custom-button-wrapper is clicked?
EDIT:
CSS:
#menufixed {
z-index: 99999999!important;
display: block!important;
position: fixed!important;
margin: 0 auto!important;
bottom: 0;
left: 45%;
width: 10%;
height: 40px;
box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.3);
}
This is because you have this in your CSS for #menufix
display: block!important
jQuery is trying to hide the element but this style is overriding it. If you remove just the !important part of that style it should work fine.
Updated CSS
#menufixed {
z-index: 99999999!important;
display: block; /* removed the !important style */
position: fixed!important;
margin: 0 auto!important;
bottom: 0;
left: 45%;
width: 10%;
height: 40px;
box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.3);
}
In order to get the button tab to slide up from .nest-custom-button-wrapper you can just add another click event to slideToggle the #menufixed
JS Code
jQuery(document).ready(function(){
jQuery("#menufixed").click(function(){
jQuery("#menufixed").slideToggle();
});
jQuery('.nest-custom-button-wrapper').click(function(e) {
e.preventDefault(); // not sure if this is an 'a' tag or not
jQuery("#menufixed").slideToggle();
});
});

Why does the main content of my website jump?

http://104.193.173.104/modx/contact-information.html
I have the breadcrumb of the website I'm building affix under the top bar when scrolling down. For some reason, the rest of the website content jumps up when the switch happens. Any ideas why?
My breadcrumb CSS:
#breadcrumb {
padding-left: 18px;
margin-bottom: 18px;
box-shadow: 0px -5px 10px #000;
}
#breadcrumb ul {
margin-top: 0;
margin-bottom: 0px;
}
#breadcrumb.affix {
position: fixed;
top: 52px;
width: 100%;
z-index: 499;
box-shadow: 0px -8px 15px #000;
}
The "affix" script:
<script>
// BREADCRUMB AFFIX //
$(function() {
$('#breadcrumb-wrapper').height($("#breadcrumb").height());
$('#breadcrumb').affix({
offset: { top: $('#breadcrumb').offset().top - 51 }
});
});
</script>
And the breadcrumb HTML (I'm using ModX so this might not be of much help):
<div id="breadcrumb">
[[Breadcrumb? &exclude=`2,3,4,5,6,7,8,15`]]
</div>
Because your breadcrumb bar switches between position:relative (in the document flow) and position:fixed (out of document flow).
Things not in document flow do not take up space and other elements will shift to fill the gap. If you want it to be constant, then the best solution might be to make the default positioning position:absolute with an appropriate top value (and some top-margin on the following element) so that by default the element is already outside of document flow.

Fyneworks jQuery Star Rating Plugin - half ratings

I am trying to implement a star rating system for articles and found this nice plugin. I have exchanged the default star.gif with my own stars. Everything works fine if I use a full star rating. As soon as I am trying to use the split star function, the stars are not displayed correctly anymore.
The stars itself have a width of 32px.
The half stars should be on top of the right side of the full stars.
The following if-clause seems to be responsible for calculating the position:
// Prepare division control
if(typeof control.split=='number' && control.split>0){
var stw = ($.fn.width ? star.width() : 0) || control.starWidth;
var spi = (control.count % control.split), spw = Math.floor(stw/control.split);
star
// restrict star's width and hide overflow (already in CSS)
.width(spw)
// move the star left by using a negative margin
// this is work-around to IE's stupid box model (position:relative doesn't work)
.find('a').css({ 'margin-left':'-'+ (spi*spw) +'px' })
};
it is embedded in a "for-each star" loop. I have debugged this with firebug and the calculation seems to be correct. Each second star should have a left-margin of -16px.
For some reason this is not displayed on the site though.
Does anyone know what I am doing wrong? I have to mention that I do not have much experience with JS.
Here is the css:
div.rating-cancel, div.star-rating {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
display: block;
float: left;
height: 32px;
overflow: hidden;
text-indent: -999em;
width: 17px;
}
div.rating-cancel, div.rating-cancel a {
background: url("delete.gif") no-repeat scroll 0 -16px rgba(0, 0, 0, 0);
}
div.star-rating, div.star-rating a {
background: url("star.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
div.rating-cancel a, div.star-rating a {
background-position: 0 0;
border: 0 none;
display: block;
height: 100%;
width: 32px;
}
div.star-rating-on a {
background-position: 0 -32px !important;
}
div.star-rating-hover a {
background-position: 0 -64px;
}
div.star-rating-readonly a {
cursor: default !important;
}
div.star-rating {
background: none repeat scroll 0 0 transparent !important;
overflow: hidden !important;
}
I cannot really tell what went wrong here. First of all the width in this setting had to be adjusted. Then one might want to get rid of the float option and use inline-block on the display instead. That way the following components will be drawn in a new line.
div.rating-cancel, div.star-rating {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
display: inline-block;
height: 32px;
overflow: hidden;
text-indent: -999em;
width: 32px;
}
If I changed this value with firebug nothing happened. I replaced the css with the original file and then just added the changes I needed again and voilá, everything looks nice now.

Categories

Resources