We Keep Coding

Functionality to search bar

I am working on making a search bar that will filter my site for reports(urls) based on what is typed in. It currently works sort of. It will filter the items but you have the have the menus expanded for it to filter them.
I am looking for a way to either only have the results that match the search show(get rid of the headers for the dropdowns and only show links). OR to auto expand the dropdowns when a character is typed into the search bar
(closest I could get for a repeatable example.)
function searchSite() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('searchbar');
filter = input.value.toUpperCase();
ul = document.getElementById("Sidebar");
li = ul.getElementsByTagName('li');
closestClass = ul.closest('.parent');
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
.evolve .barTop {
-webkit-transform: rotate(-45deg) translate(-8px, 8px);
transform: rotate(-45deg) translate(-8px, 8px);
}
.evolve .barMid {
opacity: 0;
transition: 0.1s ease-in;
}
.evolve .barBot {
-webkit-transform: rotate(-45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
#main {
transition: margin-left 0.5s;
position: relative
}
.content {
max-height: 0px;
overflow: hidden;
background-color: transparent;
transition: max-height 1s ease-out;
box-shadow: inset 0px 0px 7px 7px rgba(0, 0, 0, 0.15);
}
.content .content-stuff {
background-color: #20396120;
border-left: outset #203961 13px;
padding: .5rem 1rem;
}
.content .content-stuff .subcontent {
max-height: 0px;
overflow: hidden;
background-color: transparent;
transition: max-height .75s ease-out;
}
.content .content-stuff .subcontent .subcontent-stuff {
border-bottom: solid grey 3px;
padding: .5rem;
}
.button:checked+.header+.content {
max-height: inherit;
}
.subbutton:checked+.subheader+.subcontent {
max-height: inherit;
}
.content .content-stuff .clickLink {
cursor: pointer;
}
hr {
border-style: solid;
color: #20396150;
border-height: .5px;
}
ul.Links {
list-style-type: none;
margin: 0;
padding: 0px;
}
li:not(:last-child) {
margin-bottom: 10px;
}
.fade-in-image {
position: absolute;
top: 13px;
left: 60px;
transition: FadeIn 1.0s ease-in;
}
.fade-in-image h2 {
margin-top: 1px;
margin-left: 45px;
color: #fca445;
white-space: nowrap;
font-family: 'Roboto', sans-serif;
font-weight: 400;
text-shadow: 3px 6px 6px rgba(0, 0, 0, 0.19), 0px -7.5px 15px rgba(255, 255, 255, 0.10);
;
}
#keyframes slide-right {
0% {
margin-left: -10%
}
;
100 {
margin-left: 80%
}
;
}
.fade-in-image img {
position: absolute;
animation: move 3s ease infinite;
}
#keyframes move {
0% {
margin-left: -10px;
}
5% {
margin-left: -9.25px;
}
10% {
margin-left: -10px;
}
15% {
margin-left: -10px;
}
75% {
margin-left: 3px;
}
80% {
margin-left: -11.5px;
}
85% {
margin-left: -5.5px;
}
87.25% {
margin-left: -11px;
}
90% {
margin-left: -7px;
}
95% {
margin-left: -10.5px;
}
97.5% {
margin-left: -9.25px;
}
100% {
margin-left: -10px;
}
}
}
/* popup code credit: codeconvey.com */
.sidebar .pop {
position: absolute;
width: 50%;
margin: auto;
padding: 20px;
height: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#media (max-width: 640px) {
.pop {
position: relative;
width: 100%;
}
}
.sidebar .pop .modal {
z-index: 2;
opacity: 0;
visibility: hidden;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: opacity 500ms ease-in-out;
transition: opacity 500ms ease-in-out;
}
.sidebar .pop .modal__inner {
-webkit-transform: translate(-50%, -50%) scale(0.75);
transform: translate(-50%, -50%) scale(0.75);
top: 50%;
left: 50%;
width: 50%;
background: white;
padding: 30px;
position: absolute;
color: black;
}
#media (max-width: 640px) {
.pop .modal__inner {
width: 100%;
}
}
.sidebar .btn-close {
color: #fff;
text-align: center;
}
.sidebar .pop label {
position: absolute;
top: 8px;
right: 55px;
padding: 1px 19px 1px 19px;
font-size: 45px;
cursor: pointer;
transition: 0.2s;
color: #fca445;
}
.sidebar .pop label.open:hover {
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
background-color: #33d62b60;
font-size: 45px;
}
.sidebar .pop input {
display: none;
}
.sidebar .pop input:checked+.modal {
opacity: 1;
visibility: visible;
}
.sidebar .pop input:checked+.modal .modal__inner {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.sidebar .pop input:checked+.modal .modal__inner p {
font-size: 1.25rem;
line-height: 125%;
}
.sidebar .pop input:checked+.modal label {
position: absolute;
top: 0;
right: 0;
padding: 4px 8px 4px 8px;
font-size: 20px;
cursor: pointer;
transition: 0.2s;
color: #000;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.sidebar .pop input:checked+.modal label:hover {
background-color: #ff141860;
}
<div id="Sidebar" class="sidebar">
<p style="text-align:center;"><input id="searchbar" onkeyup="searchSite()" type="text" name="search" placeholder="Search" title="Report or Category Name" style="width: 300px;" /></p>
<input id="OpsButton" class="button" type="checkbox">
<label for="OpsButton" class="header">Operations</label>
<div class="content">
<div class="content-stuff">
<input id="Button1" class="subbutton" type="checkbox">
<label for="Button1" class="subheader">Header1</label>
<div class="subcontent">
<div class="subcontent-stuff">
<ul class="Links">
<li><a title="Region" href="X" target="bodyinfo">Region</a></li>
<li><a title="range" href="X" target="bodyinfo">range</a></li>
</ul>
</div>
</div>
<input id="FinancialButton" class="subbutton" type="checkbox">
<label for="FinancialButton" class="subheader">Financials</label>
<div class="subcontent">
<div class="subcontent-stuff">
<ul class="Links">
<li><a title="Region2" href="X" target="bodyinfo">Region2</a></li>
<li><a title="range2" href="X" target="bodyinfo">range2</a></li>
</ul>
</div>
</div>
<p>
</p>
<ul class="Links">
<li>Turnover Report</li>
</ul>
<p></p>
</div>
</div>
</div>

Okay figured it out by creating a function that will click all of the header buttons to expand the menus. and adding this function call to my main function. So if the menu is already expanded, it won't close it- otherwise it'll open it. Rinse and repeat for all buttons in your webpage.
var something = (function() {
var executed = false;
return function() {
if (!executed) {
executed = true;
var OpsButton = document.getElementById("OpsButton");
var next = document.getElementById("w/e");
if (!OpsButton.checked) {
OpsButton.click(); }
if (!next.checked) {
next.click(); }
}
};
})();

Center Position a CSS-Animation Playing With rotate(45deg)

I have the following code:
#containerScroll {
height: 5em;
}
scroll {
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
.first-scroll {
left: calc(52.3% - 1em) !important;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
left: calc(52.3% - 1em) !important;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
}
<div id="containerScroll">
<scroll class="first-scroll"></scroll>
<scroll class="second-scroll"></scroll>
</div>
On my end, the output is looking like this:
This is exactly what I want since the scroll down button is aligned right on top of the text and I achieved this by setting left: calc(52.3% - 1em) !important;. On my end, this property is whats making it align perfectly on top of the text.
The problem is that when I zoom out, I'm getting this output:
As you can see, the scroll button alignment changes and its moved towards the right, and it is because of the left: calc(52.3% - 1em) !important; property I'm pretty sure. But I do not want to change or remove this property since this is whats making it align perfectly on 100% zoom. Is there a way to make this fixed? For example, when I zoom out on the website, the scroll button alignment does not change and remains constant? Any suggestions?

That's a really cool animation!
To perfectly center it, I made the following changes:
This was being used to center the div, left: calc(52.3% - 1em) !important;; I have removed this completely and have used a simple <center> tag to center it.
The animation code itself then runs directly right of center (which is off-center). You can fix this by moving an element to the left of itself by 50% of its own width with translateX(-50%).
Of course, you can't actually use 50%, because a square box, rotated on its side, increases its width by a factor of about 45%, which means we need to translateY not by 50%, but by 66%.
#containerScroll {
height: 5em;
}
scroll {
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
.first-scroll {
margin: auto;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg) translateX(-66%);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg) translateX(-66%);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg) translateX(-66%);
opacity: 0.7;
}
}
<div id="containerScroll">
<center>
<scroll class="first-scroll"></scroll>
<scroll class="second-scroll"></scroll>
</center>
</div>
<div style="border:1px solid black;">
<center>•<br>
This dot is perfectly centered.
</center>
</div>

Without a full snippit that allows one to fully recreate your issue, I can only attempt to recreate it using the code you have.
You could place the my-story and containerScroll elements within the section title together. Then make the containerScroll position absolute change the display to flex. Make its top position 0 and declare the width 100% and height 10em or what ever you wish its height to be, just make sure the my-story element has the same top margin set in its css as that of your height from the containerScroll.
I have tested this and when I ZOOM in or out using CNTL + MOUSE WHEEL there is no displacement of the two elements in reference to each other.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
--top-dis: 10em; /* use variable so only change once in dynamic locations */
}
body {
height: 2000px;
}
section {
padding: 60px 0;
overflow: hidden;
}
#containerScroll {
position: absolute;
display: flex;
top: 0%;
background-color: #ddd;
width: 100%;
height: var(--top-dis);
}
.section-title {
text-align: center;
padding-bottom: 30px;
margin-top: var(--top-dis);
}
.section-title h2 {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
color: #45505b;
}
.section-title h2::before {
content: '';
position: absolute;
display: block;
width: 120px;
height: 1px;
background: #ddd;
bottom: 1px;
left: calc(50% - 60px);
}
.section-title h2::after {
content: '';
position: absolute;
display: block;
width: 40px;
height: 3px;
background: #0563bb;
bottom: 0;
left: calc(50% - 20px);
}
.first-scroll {
left: calc(50% - 1em) !important;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
left: calc(50% - 1em) !important;
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
}
<div class="section-title">
<h2>My Story</h2>
<div id="containerScroll">
<scroll class="first-scroll"></scroll>
<scroll class="second-scroll"></scroll>
</div>
</div>

On the CSS just add this property to the #containerScroll
position:
fixed;
left: 50%;
top: 90%; transform: translate(-50%, -50%);

Remove overlay div when user scrolls on div background image

Javascript noob here so any help would be greatly appreciated!
I'm trying to set the .scroll-overlay container to 0 opacity when the user scrolls down the div (revealing the overflow of the background image).
I've managed to get the .scroll-overlay container's opacity to fade to 0 only when the user scrolls on the body element.
How do i specifically target the #laptop-content container?
var fadeStart = 0,
fadeUntil = 0,
fading = $('.scroll-overlay');
$(window).bind('scroll', function() {
var offset = $(document).scrollTop(),
opacity = 0;
if (offset <= fadeStart) {
opacity = 1;
} else if (offset <= fadeUntil) {
opacity = 1 - offset / fadeUntil;
}
fading.css('opacity', opacity).html(opacity);
});
html {
height: 2000px;
}
#laptop-content .img {
-webkit-animation: scroll 0.2s ease-in-out 0s 1 alternate;
-moz-animation: scroll 6.5s ease-in-out 0s 1 alternate;
-o-animation: scroll 6.5s ease-in-out 0s 1 alternate;
animation: scroll 1.2s ease-in-out 0s 1 alternate;
background-image: url("http://via.placeholder.com/750x900");
background-size: contain;
background-repeat: no-repeat;
}
#laptop-content img {
opacity: 0;
}
#-webkit-keyframes scroll {
0% {
background-position: 0px 40px;
}
50% {
background-position: 0px -270px;
}
100% {
background-position: 0px 270px;
}
}
#-moz-keyframes scroll {
0% {
background-position: 0px -40px;
}
50% {
background-position: 0px -270px;
}
100% {
background-position: 0px -450px;
}
}
#-o-keyframes scroll {
0% {
background-position: 0px -40px;
}
50% {
background-position: 0px -470px;
}
100% {
background-position: 0px -850px;
}
}
#keyframes scroll {
0% {
background-position: 0px 300px;
}
80% {
background-position: 0px -40px;
}
100% {
background-position: 0px 0px;
}
}
#laptop-container {
padding-top: 50px;
position: relative;
float: left;
z-index: 10;
width: 750px;
height: 500px;
}
.hide-scrollbar {
position: absolute;
top: 76px;
left: 750px;
height: 500px;
width: 0;
background: #000;
opacity: 1;
z-index: 100;
}
#laptop {
width: auto;
position: absolute;
left: -189px;
}
#scroll-wrapper {
cursor: default !important;
top: 40px;
width: 750px;
height: 500px;
margin-left: 18px;
position: relative;
overflow: hidden;
-ms-touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
-webkit-box-shadow: -1px 10px 50px -6px rgba(0, 0, 0, 1);
-moz-box-shadow: -1px 10px 50px -6px rgba(0, 0, 0, 1);
box-shadow: -1px 10px 50px -6px rgba(0, 0, 0, 1);
}
#laptop-content {
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
#laptop-content img {
width: 100%;
}
.scroll-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 1;
}
#-webkit-keyframes scroll-ani {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
#-moz-keyframes scroll-ani {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
#keyframes scroll-ani {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
.mouse-scroll {
border: none;
display: inline-block;
margin-top: 10%;
text-decoration: none;
overflow: hidden;
width: 100%;
text-align: center;
margin-top: 200px;
}
.mouse-scroll .mouse {
position: relative;
display: block;
width: 18px;
height: 28px;
margin: 0 auto 20px;
-webkit-box-sizing: border-box;
border: 2px solid #ffffff;
border-radius: 13px;
}
.mouse-scroll .mouse .mouse-movement {
position: absolute;
display: block;
top: 29%;
left: 50%;
width: 4px;
height: 4px;
margin: -2px 0 0 -2px;
background: #ffffff;
border-radius: 50%;
-webkit-animation: scroll-ani 2s linear infinite;
animation: scroll-ani 2s linear infinite;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="laptop-container">
<div class="hide-scrollbar"></div>
<div id="scroll-wrapper" style="overflow-y: auto; overflow-x: hidden; cursor: move; touch-action: none; user-select: none;">
<div>
<div id="laptop-content">
<div class="scroll-overlay">
<div class="mouse-scroll">
<span class="mouse">
<span class="mouse-movement"></span>
</span>
</div>
</div>
<div class="img"><img src="http://via.placeholder.com/750x900"></div>
</div>
</div>
</div>
</div>

If I understood what you want correctly, you're already almost there. You just have to bind your scroll-handler to #scroll-wrapper and calculate the scroll-offset of #scroll-wrapper instead of the whole document.
Here's your code with the necessary alterations:
var fadeStart = 0,
fadeUntil = 0,
fading = $('.scroll-overlay');
$('#scroll-wrapper').bind('scroll', function() {
var offset = $('#scroll-wrapper').scrollTop(),
opacity = 0;
if (offset <= fadeStart) {
opacity = 1;
} else if (offset <= fadeUntil) {
opacity = 1 - offset / fadeUntil;
}
fading.css('opacity', opacity).html(opacity);
});
html {
height: 2000px;
}
#laptop-content .img {
-webkit-animation: scroll 0.2s ease-in-out 0s 1 alternate;
-moz-animation: scroll 6.5s ease-in-out 0s 1 alternate;
-o-animation: scroll 6.5s ease-in-out 0s 1 alternate;
animation: scroll 1.2s ease-in-out 0s 1 alternate;
background-image: url("http://via.placeholder.com/750x900");
background-size: contain;
background-repeat: no-repeat;
}
#laptop-content img {
opacity: 0;
}
#-webkit-keyframes scroll {
0% {
background-position: 0px 40px;
}
50% {
background-position: 0px -270px;
}
100% {
background-position: 0px 270px;
}
}
#-moz-keyframes scroll {
0% {
background-position: 0px -40px;
}
50% {
background-position: 0px -270px;
}
100% {
background-position: 0px -450px;
}
}
#-o-keyframes scroll {
0% {
background-position: 0px -40px;
}
50% {
background-position: 0px -470px;
}
100% {
background-position: 0px -850px;
}
}
#keyframes scroll {
0% {
background-position: 0px 300px;
}
80% {
background-position: 0px -40px;
}
100% {
background-position: 0px 0px;
}
}
#laptop-container {
padding-top: 50px;
position: relative;
float: left;
z-index: 10;
width: 750px;
height: 500px;
}
.hide-scrollbar {
position: absolute;
top: 76px;
left: 750px;
height: 500px;
width: 0;
background: #000;
opacity: 1;
z-index: 100;
}
#laptop {
width: auto;
position: absolute;
left: -189px;
}
#scroll-wrapper {
cursor: default !important;
top: 40px;
width: 750px;
height: 500px;
margin-left: 18px;
position: relative;
overflow: hidden;
-ms-touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
-webkit-box-shadow: -1px 10px 50px -6px rgba(0, 0, 0, 1);
-moz-box-shadow: -1px 10px 50px -6px rgba(0, 0, 0, 1);
box-shadow: -1px 10px 50px -6px rgba(0, 0, 0, 1);
}
#laptop-content {
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
#laptop-content img {
width: 100%;
}
.scroll-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 1;
}
#-webkit-keyframes scroll-ani {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
#-moz-keyframes scroll-ani {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
#keyframes scroll-ani {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
.mouse-scroll {
border: none;
display: inline-block;
margin-top: 10%;
text-decoration: none;
overflow: hidden;
width: 100%;
text-align: center;
margin-top: 200px;
}
.mouse-scroll .mouse {
position: relative;
display: block;
width: 18px;
height: 28px;
margin: 0 auto 20px;
-webkit-box-sizing: border-box;
border: 2px solid #ffffff;
border-radius: 13px;
}
.mouse-scroll .mouse .mouse-movement {
position: absolute;
display: block;
top: 29%;
left: 50%;
width: 4px;
height: 4px;
margin: -2px 0 0 -2px;
background: #ffffff;
border-radius: 50%;
-webkit-animation: scroll-ani 2s linear infinite;
animation: scroll-ani 2s linear infinite;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="laptop-container">
<div class="hide-scrollbar"></div>
<div id="scroll-wrapper" style="overflow-y: auto; overflow-x: hidden; cursor: move; touch-action: none; user-select: none;">
<div>
<div id="laptop-content">
<div class="scroll-overlay">
<div class="mouse-scroll">
<span class="mouse">
<span class="mouse-movement"></span>
</span>
</div>
</div>
<div class="img"><img src="http://via.placeholder.com/750x900"></div>
</div>
</div>
</div>
</div>

css animation full page with current view location

i have created an two animation with css https://codepen.io/anon/pen/yOqxdq html an css
<img onclick="show(this);" src="http://tigersincrisis.com/wp-content/uploads/2014/01/image_21.jpg">
#keyframes shadow {
0% { opacity: 0;height: 0; transform : scale(0.1);}
100% { opacity: 1; height: 100%;transform : scale(1);}
}
#keyframes show {
0% { opacity: 0;margin: 20% auto;width: 20%;height: 20%;}
100% { opacity: 1;margin: 0; width: 100%;height: 100%;}
}
#show {
position: absolute;
left: 0;
bottom: 0;
text-align: center;
background-color: rgba(0, 0, 0, 0.76);
animation-name: show;
animation-duration: 2s;
animation-fill-mode: forwards;
z-index: 5;
}
#show-item{
position: relative;
margin: 0 auto;
animation-name: shadow;
animation-duration: 3s;
animation-fill-mode: forwards;
opacity: 0;
padding-top: 40px;
}
#show-item img{
border: 4px solid black;
}
a#closeShow{
position: relative;
float: right;
text-decoration: none;
color: #C8C8C8;
padding: 6px 10px;
background: rgba(0, 0, 0, 0.9);
border-radius: 26px;
height: 18px;
position: relative;
top: 25px;
left: 10px;
border: 2px solid #e0e0e0;
box-shadow: 0 0 2px black;
}
the problem is when user scroll the view is changed and div with position absolute stays up and box of showdow doesn't show on portion of the page down

Try position: fixed; for #show.
DEMO: FIDDLE

Responsive sidebar push menu

I have one question about responsive sidebar menu. First off all i will give you a DEMO from codepen.io
If you change your bowser width then you can see the green button on the top right side. When you click this button then the red background color div will open. But at the same time if you change your bowser width like 640px to 900px then red color div not come back original area.
How can i fixed it anyone can help me in this regard ?
HTML
<div class="test_container">
<div class="left">
<div class="left_in"><div class="aa">ss</div></div>
</div>
<div class="r click_open_close">Click To Show Slide sLeft In</div>
<div class="right"><div class="bb"></div></div>
</div>
CSS
.test_container{
display: block;
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
max-width: 980px;
min-width: 300px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
background-color: #000;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
min-height: 140px;
}
.left{
display: block;
position: absolute;
float: left;
width: 30%;
overflow: hidden;
padding: 0px;
bottom: 0;
top: 0;
left: 0;
background-color: red;
border-right: 1px solid #d8dbdf;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
}
.left_in{
z-index: 999 !important;
position: absolute;
float: left;
width: 0%;
height: 100%;
background-color: #f7f7f7;
opacity: 0;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: slideLeft;
animation-name: slideLeft;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
#-webkit-keyframes slideLeft {
0% {
-webkit-transform: translateX(25rem);
transform: translateX(25rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes slideLeft {
0% {
-webkit-transform: translateX(15rem);
transform: translateX(15rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
.aa{
background-color: #f7f7f7;
/*background-color: #dfdfdf;
background-image: -webkit-linear-gradient(top,#dddbd1,#d2dbdc);
background-image: linear-gradient(top,#dddbd1,#d2dbdc);*/
width: 0;
top: 0;
border-radius:0%;
z-index: 1000;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
overflow: hidden;
position: absolute;
right:0;
}
.click_open_close{
right:0px;
padding:10px;
color:#fff;
position:absolute;
background-color:green;
cursor:pointer;
z-index:999;
display:none;
}
.pp{
right:0px;
padding:10px;
color:#fff;
position:absolute;
background-color:green;
cursor:pointer;
}
.right{
display: block;
position: absolute;
width: 70%;
bottom: 0;
top: 0;
right: 0;
background-color: pink;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
#media all and (max-width: 840px) {
.left {
left:-60%;
}
.secret {
float: left;
display: block;
}
.right {
width: 100%;
}
.click_open_close{
display:block;
}
}
JS
$('.click_open_close').click(function() {
$('.left').animate({
left: "0%"
}, 200);
$('.right').animate({
right: "-30%"
}, 200);
});

Try this
$(document).ready(function(e) {
$('.click_open_close').click(function() {
$('.left').animate({
left: "0%"
}, 200);
});
});
$(window).resize(function(e) {
var windoww = $(window).width();
if(windoww < 840){
location.reload(); //or set whatever animation you want to do for the sidebar gets back in place
};
});