Develop Reference

How to lock sidebar menu hidden when refresh page

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.

Place element on top of other (Create overlay)

I'm still a bit new to HTML and CSS and need some help.
I have a div and inside that, I have an telephone input element. The input is using a library that allows the user to select a country code.
The problem is, that when I click on the country code it stays inside the parent div, which is not what I want.
As you can see on the image the desired behaivour is to have the red box outside of the blue one. I have set the parent elements position property to 'relative' (the blue box) and the country code container (the red one) to 'absolute', but it doesn't help. I've also tried changing the z-index without luck.
The red box as shown on the picture has the following styles:
.iti__country-list {
position: absolute;
z-index: 2;
list-style: none;
text-align: left;
padding: 0;
margin: 0 0 0 -1px;
box-shadow: 1px 1px 4px rgb(0 0 0 / 20%);
background-color: white;
border: 1px solid #CCC;
white-space: nowrap;
max-height: 200px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
And the blue one:
.drag-container {
display: grid;
max-height: 600px;
overflow-y: auto;
padding: 10px;
position: relative;
}
I can almost get the desired output by setting position to 'fixed', but thats not good when resizing the page as it stays in its position.

I think the problem is in .drag-container class ... remove overflow:auto or change it to overflow:unset

you can try using the select2.js plugin for select, it creates a dropdown at the end of the body element regardless of the parent's location

how can I add CSS transition or animation, when the class toggling with JQ or JS?

I gonna add some transition or animation when my class toggling, for instance, on these below codes, I have a sidebar which I've added some animation to it, with CSS Animation library.
when sidebar opens, that I've toggle it with another class, animation working, but when it's closing, animation doesn't work anymore.
more detail about what I want:
1- I'm gonna when sidebar1 class being toggle with sidebar_menu, some animation or transition grow to apply on it, as I explained at the top, I mean when sidebar being closed animation or transition grow to apply on it
2- it's all right when the sidebar open, I just want when the sidebar get open via animation, being closed with animation, that's all
I'm sorry if I explained badly.
if it was any question please ask I'll answer
here a demo of what I made, that I think it shows my mean better
Demo
here my JQ codes:
$(document).ready(function() {
$(".response_menu_icon").click(function() {
$(".sidebar1").toggleClass("sidebar_menu");
});
//
$(".response_more_icon").click(function() {
$(".area1").toggleClass("area_more");
});
});
here my HTML codes:
<i data-feather="more-horizontal" class="response_more_icon"></i>
<!-- -->
<a href="" class="sidebar1 animate__animated animate__slideInRight">
<div class="sidebar_right">
<!-- -->
<h4>Dashboard</h4>
<i data-feather="settings"></i><span>dashboard</span>
<!-- -->
</div>
</a>
and here my CSS codes:
.sidebar1 {
display: none;
}
.sidebar_menu {
// display: none;
width: 250px;
height: 100%;
position: fixed;
top: 80px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
text-align: center;
background-color: #ffffff;
-webkit-box-shadow: -2px 10px 8px 3px #eeeeee;
-moz-box-shadow: -2px 10px 8px 3px #eeeeee;
box-shadow: -2px 10px 8px 3px #eeeeee;
}

Here's how I think you could do it. You check if the class is already applied and add the animation depending on this.
feather.replace();
$(document).ready(function() {
$(".response_menu_icon").click(function() {
if($(".sidebar1").hasClass("sidebar_menu")){
$(".sidebar1").addClass("animate__slideOutRight");
setTimeout(function(){$(".sidebar1").toggleClass("sidebar_menu");},200);
} else {
$(".sidebar1").removeClass("animate__slideOutRight");
$(".sidebar1").addClass("sidebar_menu");
$(".sidebar1").addClass("animate__slideInRight");
};
//$(".sidebar1").addClass("animate__slideOutRight");
});
//
$(".response_more_icon").click(function() {
$(".area1").toggleClass("area_more");
});
});
I use a set timeout to remove the class after the animation finishes playing.

You can add your class with jQuery or JS and let your CSS handle your transition to the new position.
For example:
You have a sidebar that when on click of a button opens and then on click again closes.
The sidebar CSS would have the sidebars starting point (i.e. position). Then you could style the other class you are going to add to the ending position you wish for your element, etc.
//starting position is hidden off the screen
#sidebar{
position: absolute;
top: 0px;
left: -250px;
width: 250px;
height: 100vh;
background-color: blue;
transition: ease left .3s;
}
//brings the element into view when opened
#sidebar.toggled{
left: 250px;
}
You can then add your classes as needed on a button click.
Here is an example JSFiddle
Another helpful resource when coding is at MDN. Here is a link to show some other uses for the CSS Transition property.

Vertical scroll div page divider on page scroll, parallax?

So I have a vertical page divider that is used multiple times on a page, it is a div within a div, on the page scroll, I would like the inner div to scroll with the page and then stop when it reaches the end of the parent div.
Any ideas?
Simple HTML
<div class="verticalscroll">
<div class="verticalscroll_bar"></div>
</div>
CSS
.verticalscroll {
width: 3px;
height: 335px;
background: #D8D8D8;
margin: 80px auto 0;
}
.verticalscroll_bar {
width: 3px;
height: 100px;
background: pink;
}
I appreciate the help!

Fixed it... simple really!
Adding this CSS to .verticalscroll_bar
top: 200px;
position: -webkit-sticky;
position: sticky;

Change 'Click' function to mouseover/mouseout

I am using the following sliding div script:
http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html
Currently, the slidetoggle function is activated when the .btn-slide button is clicked. This slides up the "panel" div.
Upon clicking the .btn-slide button a second time, the panel div is closed.
I am a complete newb at js, so any assistance would be appreciated. Here's what I am trying to do:
1) When the mouse moves over (as opposed to clicking) the .btn-slide class, i would like the panel to slide out.
2) Then, when the mouse moves out of either the .btn-slide or #panel, i would like the panel to close. (but if the mouse is over either one, the panel should stay open).
I was able to get it working to where the slidetoggle function would close either one, or the other, but not both.
Thank you in advance for the help.
Sincerely,
Mac
Here is the JS:
<script type="text/javascript">
jQuery(function($){
$(document).ready(function(){
$('.btn-slide').click(function() {
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
});
</script>
here is the HTML currently being used:
<div id="prod_nav_tab">
<div id="panel">
This is where stuff goes!
</div>
<p class="slide"><a class="btn-slide">Table of Contents</a></p>
</div>
I have played with the CSS to fit my particular web site and is as follows (the original js, html, css can be obtained from the link above).
div#prod_nav_tab {
width: 200px;
height: 31px;
overflow: hidden;
background-color:#F00;
float: left;
margin: 0px 0px 0px 75px;
}
a:focus {
outline: none;
}
#panel {
background-color:#F00;
width: 200px;
height: 200px;
display: none;
position: absolute;
bottom: 0px;
}
.slide {
margin: 0;
padding: 0;
/* border-top: solid 4px #422410; **Adds a line at top of slide button to distibuish it */
background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
background: #d8d8d8;
text-align: center;
width: 200px;
height: 31px;
padding: 0px 0px 0 0;
margin: 0 0 0 0;
display: block;
font: bold 12pt Arial, Helvetica, sans-serif;
color: #666;
text-decoration: none;
position: relative;
cursor: pointer;
/* background: url(images/white-arrow.gif) no-repeat right -50px; ** Controls Arrow up/down */
}
.active {
background-position: right 12px;
}

When you move away from the .btn-slide to the #panel it hides it now because it triggers the mouseleave event of the .btn-slide.
To prevent this you should do something like:
HTML:
<div id="trigger">
Slide down
<div id="panel">
Content of your panel
</div>
</div>
JQuery:
jQuery(function($) {
$(document).ready(function() {
$("#trigger").mouseenter(function() {
$("#panel").slideDown("slow");
$(this).addClass("active");
}).mouseleave(function() {
$("#panel").slideUp("slow");
$(this).removeClass("active");
});
});
});
Make sure in your CSS you then set the panel to be hidden from start...
div#panel {
display: none;
}