Develop Reference

Functionality to search bar in html

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 to 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");
if (!OpsButton.checked) {
OpsButton.click(); }
}
};
})();

How to make the envelop html responsive

I am working on the invite page, in which the envelope is shown first and after clicking on envelope it shows content, the problem is that the envelope is not responsive, I am using display:flex for my main page, but the template I used for envelope does not use flex, when I remove it, it works fine but my main page broke down, so is there any way to fix it?:
(the envelope looks like this on mobile screen)
.frame {
width: 550px;
height: 350px;
margin: 50px auto 0;
position: relative;
background: #435d77;
border-radius: 0 0 40px 40px;
}
#button_open_envelope {
width: 180px;
height: 60px;
position: absolute;
z-index: 311;
top: 250px;
left: 208px;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding: 15px 0;
border: 2px solid #fff;
transition: 0.3s;
}
#button_open_envelope:hover {
background: #fff;
color: #2b67cb;
transform: scale(1.1);
transition: background 0.25s, transform 0.5s, ease-in;
cursor: pointer;
}
.message {
position: relative;
width: 580px;
min-height: 300px;
height: auto;
background: #fff;
margin: 0 auto;
top: 30px;
box-shadow: 0 0 5px 2px #333;
transition: 2s ease-in-out;
transition-delay: 1.5s;
z-index: 300;
}
.left,
.right,
.top {
width: 0;
height: 0;
position: absolute;
top: 0;
z-index: 310;
}
.left {
border-left: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
}
.right {
border-right: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
left: 300px;
}
.top {
border-right: 300px solid transparent;
border-top: 200px solid #03a9f4;
border-left: 300px solid transparent;
transition: transform 1s, border 1s, ease-in-out;
transform-origin: top;
transform: rotateX(0deg);
z-index: 500;
}
.bottom {
width: 600px;
height: 190px;
position: absolute;
background: #2b67cb;
top: 160px;
border-radius: 0 0 30px 30px;
z-index: 310;
}
.open {
transform-origin: top;
transform: rotateX(180deg);
transition: transform 0.7s, border 0.7s, z-index 0.7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull {
-webkit-animation: message_animation 2s 1 ease-in-out;
animation: message_animation 2s 1 ease-in-out;
-webkit-animation-delay: 0.9s;
animation-delay: 0.45s;
transition: 1.5s;
transition-delay: 1s;
z-index: 350;
}
body {
display: flex;
justify-content: center;
align-items: center;
/* height: 100vh;
width: 100%; */
flex-direction: column;
}
<div class="frame">
<div id="button_open_envelope">
Open Invitation
</div>
<div class="message">
<h1>Invitation</h1>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>

The border properties unfortunately don't take responsive percentages, so your .top .left and .right elements will not be responsive. You could instead create those envelope shapes with clip-path and then combined with a few other CSS updates and your envelope will adjust with screen size. Demo included
.frame {
width: 100%;
max-width: 550px;
height: 100%;
max-height: 350px;
margin: 50px auto 0;
position: relative;
background: #435d77;
border-radius: 0 0 40px 40px;
}
#button_open_envelope {
width: 180px;
height: 60px;
position: absolute;
z-index: 311;
bottom: 0;
left: 50%;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding: 15px 0;
border: 2px solid #fff;
transform: translateX(-50%);
transition: 0.3s;
}
#button_open_envelope:hover {
background: #fff;
color: #2b67cb;
transform: translateX(-50%) scale(1.1);
transition: background 0.25s, transform 0.5s, ease-in;
cursor: pointer;
}
.message {
position: relative;
width: 100%;
min-height: 300px;
height: auto;
background: #fff;
margin: 0 auto;
bottom: 0;
box-shadow: 0 0 5px 2px #333;
transition: 2s ease-in-out;
transition-delay: 1.5s;
z-index: 300;
}
.left,
.right,
.top {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 310;
}
.left {
background: #337efc;
clip-path: polygon(0 0, 0 90%, 50% 50%);
}
.right {
background: #337efc;
clip-path: polygon(100% 0, 100% 90%, 50% 50%);
}
.top {
background: #03a9f4;
clip-path: polygon(0 0, 100% 0, 50% 62.5%);
transition: transform 1s, border 1s, ease-in-out;
transform-origin: top;
transform: rotateX(0deg);
z-index: 500;
}
.bottom {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
background: #2b67cb;
border-radius: 0 0 30px 30px;
z-index: 310;
}
.open {
transform-origin: top;
transform: rotateX(180deg);
transition: transform 0.7s, border 0.7s, z-index 0.7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull {
-webkit-animation: message_animation 2s 1 ease-in-out;
animation: message_animation 2s 1 ease-in-out;
-webkit-animation-delay: 0.9s;
animation-delay: 0.45s;
transition: 1.5s;
transition-delay: 1s;
z-index: 350;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<div class="frame">
<div id="button_open_envelope">
Open Invitation
</div>
<div class="message">
<h1>Invitation</h1>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>

Having a navigation bar onclick/href execute animation on a circle element then loading a new page - How?

I have a circle class element .circle and a navigation bar on a demo homepage home.html. I need clicking on one of the navigation's elements href to resume.html) to do an animation (growing its dimension) to have it matched in size to a similar element .circleRe on the linked page (resume.html) and only then move to that page. So, how to delay loading the second page while doing the animation?
P.S. The circle also response to hovering (and slightly enlarging it to have a text.)
I've tried using JavaScript and had partial success, but it seems that the href cancels the animation effect. #keyframes does not seem to be the right solution
nav {
overflow: hidden;
background-color: #333;
position: fixed;
z-index: 10
}
nav a {
font-family: DoubleBass;
font-weight: normal;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
.circle {
background: #D73309;
opacity: 0.7;
width: 37.5vmin;
height: 37.5vmin;
border-radius: 50%;
margin: 0 auto;
position: fixed;
z-index: 1;
top: -100px;
right: -70px;
-webkit-transition: width 1.2s, height 1.2s, box-shadow 1.2s;
/* Safari */
transition: width 1.2s, height 1.2s, box-shadow 1.2s;
}
.quotes {
opacity: 0;
font-size: .9em;
line-height: 120%;
padding: 70px 0px 0px 20px;
}
.circle:hover {
width: 60vmin;
height: 60vmin;
opacity: 1;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.circle:hover .quotes {
opacity: 1;
-webkit-transition: opacity 1.2s;
transition: opacity 1.2s;
}
.circleRe {
background: #D73309;
opacity: 1;
width: 140vmax;
height: 140vmax;
border-radius: 50%;
margin: 0 auto;
position: absolute;
z-index: 1;
top: -500px;
right: -400px;
}
<header>
<nav>
Home
Resume
Archive
Films
</nav>
</header>
<body>
<div class="circle">
<p class="quotes"></p>
</div>
</body>

$('.links').click(function(e) {
e.preventDefault();
//Show the UI Loader here
$('.loaders').show();
setTimeout(function() {
//Hide the UI Loader after 5 seconds
$('.loaders').hide();
}, 5000);
});
nav {
overflow: hidden;
background-color: #333;
position: fixed;
z-index: 10
}
nav a {
font-family: DoubleBass;
font-weight: normal;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
.circle {
background: #D73309;
width: 37.5vmin;
height: 37.5vmin;
border-radius: 50%;
margin: 0 auto;
position: fixed;
z-index: 100;
top: -100px;
right: -70px;
-webkit-transition: width 1.2s, height 1.2s, box-shadow 1.2s;
/* Safari */
transition: width 1.2s, height 1.2s, box-shadow 1.2s;
}
.quotes {
opacity: 0;
font-size: .9em;
line-height: 120%;
padding: 70px 0px 0px 20px;
}
.loaders {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
animation: spin 2s linear infinite;
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
top: 0px;
left: 0px;
opacity: .5;
/* in FireFox */
filter: alpha(opacity=50);
/* in IE */
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<nav>
<a id='lnkHome' class='links' href="JavaScript:void(0);">Home</a>
<a id='lnkResume' class='links' href="JavaScript:void(0);">Resume</a>
<a id='lnkArchieve' class='links' href="JavaScript:void(0);">Archive</a>
<a id='lnkFilms' class='links' href="JavaScript:void(0);">Films</a>
</nav>
</header>
<body>
<div class="circle">
<p class="quotes">
</p>
</div>
<div class="loaders" style="display:none;"></div>
</body>
Note:- Show loader on click and after some times, you can hide that loader.
so the user will not be able to interact with DOM(UI).
Hope this helps!

jquery (this).parent.hasClass giving false positive while in animation

I use CSS animations and jQuery to open multiple flaps on a Calendar. That works great as long as the user waits for an animation to end and then clicks the next one. But the moment an opening animation is still running, and the user already starts the next, the script breaks and my class opend is removed from the .fenster div and window breaking the layout.
Does anybody see where my script is faulty?
$( document ).on("click" , '.flap' , function(){
if ($(this).parent(".fenster").hasClass("opend")) {
$(this).removeClass("flap_open" ).addClass("flap_close" );
$(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
$(this).next().hide();
$(this).removeClass("flap_close");
$(this).parent(".fenster").removeClass("opend");
});
} else {
$(this).addClass("flap_open" );
$(this).parent(".fenster").addClass("opend");
//$(this).removeClass("flap_close" );
$(this).next().show();
}
});
.fenster {
width: 30%;
min-width: 130px;
max-width: 300px;
border: 1px solid rgba(212, 212, 212, 1);
position: relative;
left: 200px;
z-index: 200;
cursor: pointer;
}
.opend {
perspective: 1500px;
-webkit-perspective: 1500px;
box-shadow: inset 0px 0px 5px #2e2d2e;
cursor: auto;
-webkit-backface-visibility: hidden;
}
.flap {
width: 100%;
height: 100%;
z-index: 100;
background-color: red;
}
.flap:before {
content: "";
display: block;
padding-top: 75%;
}
.flap_open {
transform-origin: 0 50%;
-webkit-transform-origin: 0 50%;
background-size: cover;
width: 100%;
height: 100%;
z-index: 100;
cursor: alias;
animation: turn 4s forwards;
-webkit-animation: turn 4s forwards;
box-shadow: 5px 0px 5px 0px #2e2d2e;
}
.flap_close {
transform-origin: 0 50%;
-webkit-transform-origin: 0 50%;
-webkit-animation: zumachen 4s forwards;
animation: zumachen 4s forwards;
opacity: 0.8;
box-shadow: 5px 0px 5px 0px #2e2d2e;
transform: rotateY(-100deg);
}
.button{
position: absolute;
bottom: 2%;
left: 15%;
width: 70%;
height: 5vh;
min-width: 80px;
min-height: 28px;
max-height: 20px;
z-index: -1;
text-align: center;
display: table;
background-color: grey;
}
#keyframes turn {
to {
transform: rotateY(-100deg);
opacity: 0.8;
box-shadow: 5px 0px 5px 0px #2e2d2e;
visibility: visible;
}
}
#-webkit-keyframes turn {
to {
-webkit-transform: rotateY(-100deg);
-webkit-opacity: 0.8;
box-shadow: 5px 0px 5px 0px #2e2d2e;
visibility: visible;
}
}
#keyframes zumachen {
to {
transform: rotateY(0deg);
opacity: 1;
box-shadow: none;
visibility: visible;
}
}
#-webkit-keyframes zumachen {
to {
-webkit-transform: rotateY(0deg);
-webkit-opacity: 1;
box-shadow: none;
visibility: visible;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fenster f7 p3">
<div class="flap"></div>
<div class="button" style="display: none;"><span>Something</span></div>
</div>
<div class="fenster f3 p1">
<div class="flap"></div>
<div class="button" style="display: none;"><span>Something</span></div>
</div>

If you add a class indicating the animation is running, you can then run a check to make sure that any currently animating element will not be affected by the .removeClass() method called on any closing element.
Add a class to the animating element, indicating that it is in
animation
With an additional .one() method to the else code block of your initial
conditional statement you can remove this aforementioned class again
once the animation has completed
Insert another conditional check in the first .one() method of
your initial conditional check to verify that the element in
question has no class .animation-running, therefore indicating
that it should have the necessary classes removed.
$(document).on("click", ".flap", function() {
if ($(this).parent(".fenster").hasClass("opend")) {
$(this).removeClass("flap_open").addClass("flap_close");
$(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
if (!$(this).parent(".fenster").hasClass("animation-running")) {
/* only step into next code block if condition is equal to true,
* i.e: parent does not have the class "animation-running", so animation is completed
*/
$(this).next().hide();
$(this).removeClass("flap_close");
$(this).parent(".fenster").removeClass("opend");
}
});
} else {
$(this).addClass("flap_open");
$(this).parent(".fenster").addClass("opend animation-running"); /* Additional class to indicate animation is running */
$(this).next().show();
/* Only once animation has completed should the indicating class be removed */
$(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
$(this).parent(".fenster").removeClass("animation-running");
});
}
});
.fenster {
width: 30%;
min-width: 130px;
max-width: 300px;
border: 1px solid rgba(212, 212, 212, 1);
position: relative;
left: 200px;
z-index: 200;
cursor: pointer;
}
.opend {
perspective: 1500px;
-webkit-perspective: 1500px;
box-shadow: inset 0px 0px 5px #2e2d2e;
cursor: auto;
-webkit-backface-visibility: hidden;
}
.flap {
width: 100%;
height: 100%;
z-index: 100;
background-color: red;
}
.flap:before {
content: "";
display: block;
padding-top: 75%;
}
.flap_open {
transform-origin: 0 50%;
-webkit-transform-origin: 0 50%;
background-size: cover;
width: 100%;
height: 100%;
z-index: 100;
cursor: alias;
animation: turn 4s forwards;
-webkit-animation: turn 4s forwards;
box-shadow: 5px 0px 5px 0px #2e2d2e;
}
.flap_close {
transform-origin: 0 50%;
-webkit-transform-origin: 0 50%;
-webkit-animation: zumachen 4s forwards;
animation: zumachen 4s forwards;
opacity: 0.8;
box-shadow: 5px 0px 5px 0px #2e2d2e;
transform: rotateY(-100deg);
}
.button {
position: absolute;
bottom: 2%;
left: 15%;
width: 70%;
height: 5vh;
min-width: 80px;
min-height: 28px;
max-height: 20px;
z-index: -1;
text-align: center;
display: table;
background-color: grey;
}
#keyframes turn {
to {
transform: rotateY(-100deg);
opacity: 0.8;
box-shadow: 5px 0px 5px 0px #2e2d2e;
visibility: visible;
}
}
#-webkit-keyframes turn {
to {
-webkit-transform: rotateY(-100deg);
-webkit-opacity: 0.8;
box-shadow: 5px 0px 5px 0px #2e2d2e;
visibility: visible;
}
}
#keyframes zumachen {
to {
transform: rotateY(0deg);
opacity: 1;
box-shadow: none;
visibility: visible;
}
}
#-webkit-keyframes zumachen {
to {
-webkit-transform: rotateY(0deg);
-webkit-opacity: 1;
box-shadow: none;
visibility: visible;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fenster f7 p3">
<div class="flap"></div>
<div class="button" style="display: none;"><span>Something</span></div>
</div>
<div class="fenster f3 p1">
<div class="flap"></div>
<div class="button" style="display: none;"><span>Something</span></div>
</div>

I think its because you tell program - "on click, if this has class opend, do some, time-taking, work and remove opend class" Because you remove class at the end program doesn't go to that point if clicked again earlier. Way around could be to use other indicator top check the state. For ex:
$( document ).on("click" , '.flap' , function(){
if ($(this).parent(".fenster").hasClass("justEmptyClass")) {
$(this).parent(".fenster").removeClass("justEmptyClass");
Or use a variable - with false/rue to set and check state:
var open = true;
$( document ).on("click" , '.flap' , function(){
if (open) {
open = false;
// and rest your code

Responsive left sidebar open close

I have one question about responsive left sidebar open close function.
I have created this DEMO from codepen.io
You can see in the demo there is a button (Click to show blue div). When you click this button then blue div will open from left side. It is ok but if you change your browser width < 800px then the .left div will displayed. After than if you click again (Click to show blue div) the blue div not opening, also at the same time if you change your browser width>880px then you can see the blue div still be opened because you clicked it before.
I want to make it when browser width<880px and when i click the (Click to show blue div) then i want to show blue div from left side.
How can i do that anyone can help me in this regard ?
HTML
<div class="test_container">
<div class="left">
<div class="left_in">Here is a some text</div>
<div class="problem-div">
<div class="proglem-div-in">
<!--Here is a some menu-->
</div>
</div>
</div>
<div class="gb" data-id="1" data-state="close">Click To Show Blue Div</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: 100%;
height: 100%;
background-color: red;
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;
left: 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;
}
.gb {
cursor: pointer;
position: absolute;
left: 30%;
padding: 10px;
color: #fff;
background-color: black;
z-index: 9999;
}
.problem-div {
z-index: 999 !important;
position: absolute;
float: left;
width: 0%;
height: 100%;
background-color: blue;
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);
}
#media all and (max-width: 840px) {
.left {
left: -60%;
z-index: 9999999999999 !important;
}
.secret {
float: left;
display: block;
}
.right {
width: 100%;
}
.click_open_close {
display: block;
}
}
JS
$(".gb").on('click', function() {
var id = $(this).data("id");
var state = $(this).data("state");
if (state === "close") {
$(this).data("state", 'open');
$(".problem-div").animate({
width: "100%"
}, 200).find(".proglem-div-in").animate({
width: "100%"
}, 200);
} else {
$(this).data("state", 'close');
$(".problem-div").animate({
width: "0%"
}, 200).find(".proglem-div-in").animate({
width: "0%"
}, 200);
}
});

The problem is with CSS, replace media query css with this CSS:
#media all and (max-width: 840px) {
.left {
z-index: 9999999999999 !important;
}
.secret {
float: left;
display: block;
}
.click_open_close {
display: block;
}
}