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
Related
Here is a Switch Toggle which can change the width of a div with ID "abc" and it works fine
document.getElementById("toggleSwitch").onclick = function() {
myFunction()
};
function myFunction() {
let width = document.getElementById("abc").style.width;
if (width === '400px') {
document.getElementById("abc").style.width = "200px";
} else {
document.getElementById("abc").style.width = "400px";
}
}
.switch {
position: relative;
display: inline-block;
width: 31px;
height: 19px;
margin: 0 20px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(220 220 220);
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 24px;
width: 24px;
left: -10px;
bottom: -2px;
background-color: #f3f3f3;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 37%);
}
input:checked+.slider {
background-color: #1967d263;
}
input:checked+.slider:before {
background-color: #1967d2;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
#abc{
width: 200px;
height:200px;
background: blue;
transition: width 1s;
}
<label class="switch">
<input id="toggleSwitch" type="checkbox">
<span class="slider"></span>
</label><br>
<div id="abc">
</div>
but I want to use Class Name instead of ID but when I change document.getElementById() with getElementsByClassName() and change the ID of div into class Name it stop working.
How can I use here getElementsByClassName()
You could do with classList.toggle. For default you should add 200 small with class to element then toggle with bigWidth(400) Class
Don't add the width for id. Because id more specific then class. i had removed the width inside the id. And added smallWidth class
Updated
you can do with document.querySelectorAll
document.getElementById("toggleSwitch").onclick = function() {
myFunction()
};
function myFunction() {
Array.from(document.querySelectorAll(".smallWidth"))
.forEach(a => {
a.classList.toggle('bigWidth')
})
}
.switch {
position: relative;
display: inline-block;
width: 31px;
height: 19px;
margin: 0 20px;
}
.switch input {
display: none;
}
.smallWidth {
width: 200px;
}
.bigWidth {
width: 400px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(220 220 220);
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 24px;
width: 24px;
left: -10px;
bottom: -2px;
background-color: #f3f3f3;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 37%);
}
input:checked+.slider {
background-color: #1967d263;
}
input:checked+.slider:before {
background-color: #1967d2;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
#abc {
height: 20px;
background: blue;
transition: width 1s;
margin:10px;
}
<label class="switch">
<input id="toggleSwitch" type="checkbox">
<span class="slider"></span>
</label><br>
<div id="abc" class="smallWidth">
</div>
<div id="abc" class="smallWidth">
</div>
<div id="abc" class="smallWidth">
</div>
[...document.getElementsByClassName("toggleSwitch")]
.forEach(el => el.onclick = () => {
let width = document.getElementById("abc").style.width;
if (width === '400px') {
document.getElementById("abc").style.width = "200px";
} else {
document.getElementById("abc").style.width = "400px";
}
})
.switch {
position: relative;
display: inline-block;
width: 31px;
height: 19px;
margin: 0 20px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(220 220 220);
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 24px;
width: 24px;
left: -10px;
bottom: -2px;
background-color: #f3f3f3;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 37%);
}
input:checked+.slider {
background-color: #1967d263;
}
input:checked+.slider:before {
background-color: #1967d2;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
#abc{
width: 200px;
height:200px;
background: blue;
transition: width 1s;
}
<label class="switch">
<input class="toggleSwitch" type="checkbox">
<span class="slider"></span>
</label><br>
<div id="abc">
</div>
getElementsByClassName returns an array, so you will have to apply the same function to every element. Then, the function also needs to update every element, you can use the same logic for that:
var elements =
document.getElementsByClassName("toggleSwitch").forEach(element => {
element.onclick = myFunction;
})
function myFunction() {
document.getElementsByClassName("abc").forEach(element => {
let width = element.style.width;
if (width === '400px') {
element.style.width = "200px";
} else {
element.style.width = "400px";
}
})
}
This is the original version of the 3D book effect.
https://jsfiddle.net/7asrgok4/
When I try to make this 3D effect to show when I mouse hover, it is not working with all layers.
.featured-image-container {
display: inline-block;
box-shadow: 5px 5px 20px #333;
margin: 10px;
}
.featured-image-container img { vertical-align: middle; }
/*
* In order for this to work, you must use Modernizer
* to detect 3D transform browser support. This will add
* a "csstransforms3d" class to the HTML element.
*
* Visit http://modernizr.com/ for installation instructions
*/
.csstransforms3d .bg-book {
-moz-perspective: 100px;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
cursor: pointer;
}
.csstransforms3d .featured-image-container:hover {
position: relative;
-moz-perspective: 100px;
-moz-transform: rotateY(-3deg);
-webkit-transform: perspective(100) rotateY(-3deg);
outline: 1px solid transparent; /* Helps smooth jagged edges in Firefox */
box-shadow: none;
margin-right: 50px;
cursor: pointer;
}
.csstransforms3d .featured-image-container img {
position: relative;
max-width: 100%;
height:196px;
}
.csstransforms3d .featured-image-container:before,
.csstransforms3d .featured-image-container:after {
position: absolute;
top: 2%;
height: 96%;
content: ' ';
z-index: -1;
}
.csstransforms3d .featured-image-container:before {
width: 100%;
left: 7.5%;
background-color: #0a0502;
box-shadow: 5px 5px 20px #333;
}
.csstransforms3d .featured-image-container:after {
width: 5%;
left: 100%;
background-color: #EFEFEF;
box-shadow: inset 0px 0px 5px #aaa;
-moz-transform: rotateY(20deg);
-webkit-transform: perspective(100) rotateY(20deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="bg-book">
<div class="featured-image-container">
<img src="http://srobbin.com/wp-content/uploads/2012/05/book2.jpg" />
</div>
<div class="featured-image-container">
<img src="http://srobbin.com/wp-content/uploads/2012/05/book3.jpg" />
</div>
</div>
The problem is you should only add a :hover style, not replace with one.
.featured-image-container {
display: inline-block;
box-shadow: 5px 5px 20px #333;
margin: 10px;
}
.featured-image-container img {
vertical-align: middle;
}
/*
* In order for this to work, you must use Modernizer
* to detect 3D transform browser support. This will add
* a "csstransforms3d" class to the HTML element.
*
* Visit http://modernizr.com/ for installation instructions
*/
.csstransforms3d .bg-book {
-moz-perspective: 100px;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
cursor: pointer;
}
.csstransforms3d .featured-image-container {
position: relative;
outline: 1px solid transparent;
/* Helps smooth jagged edges in Firefox */
box-shadow: none;
margin-right: 50px;
cursor: pointer;
}
.csstransforms3d .featured-image-container img {
position: relative;
max-width: 100%;
height: 196px;
-moz-perspective: 100px;
-moz-transform: rotateY(-1deg);
-webkit-transform: perspective(100) rotateY(-1deg);
outline: 1px solid transparent;
/* Helps smooth jagged edges in Firefox */
transition: 0.2s;
}
.csstransforms3d .featured-image-container:hover img {
-moz-perspective: 100px;
-moz-transform: rotateY(-5deg);
-webkit-transform: perspective(100) rotateY(-5deg);
}
.csstransforms3d .featured-image-container:before,
.csstransforms3d .featured-image-container:after {
position: absolute;
top: 2%;
height: 96%;
content: ' ';
z-index: -1;
}
.csstransforms3d .featured-image-container:before {
-moz-perspective: 100px;
-moz-transform: rotateY(-1deg);
-webkit-transform: perspective(100) rotateY(-1deg);
width: 100%;
left: 2.5%;
background-color: #0a0502;
box-shadow: 2px 2px 20px #333;
transition: 0.2s;
}
.csstransforms3d .featured-image-container:hover:before {
-moz-transform: rotateY(-5deg);
-webkit-transform: perspective(100) rotateY(-5deg);
left: 7.5%;
box-shadow: 5px 5px 20px #333;
}
.csstransforms3d .featured-image-container:after {
width: 1%;
left: 100%;
background-color: #EFEFEF;
box-shadow: inset 0px 0px 5px #aaa;
-moz-transform: rotateY(19deg) translateZ(7px) translateX(3px);
-webkit-transform: perspective(200) rotateY(8deg) translateZ(7px) translateX(0);
transition: 0.2s;
}
.csstransforms3d .featured-image-container:hover:after {
width: 5%;
-moz-transform: rotateY(19deg) translateZ(7px) translateX(3px);
-webkit-transform: perspective(200) rotateY(8deg) translateZ(7px) translateX(3px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="bg-book">
<div class="featured-image-container">
<img src="http://srobbin.com/wp-content/uploads/2012/05/book2.jpg" />
</div>
<div class="featured-image-container">
<img src="http://srobbin.com/wp-content/uploads/2012/05/book3.jpg" />
</div>
</div>
Are you using an onmouseover event in your div? You can make it trigger a javascript function that changes the div's class. Here is a W3 article on the onmouseover event: https://www.w3schools.com/jsref/event_onmouseover.asp
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!
I am trying to make a click to show div left to right. I have created this DEMO from jsfiddle.net
In this demo you can see there is a green color div. When you click this div then the left div opening left to right.
But at the same time when you click the green button the green button class automatically changing and also the html text is changing. (Click To Show Slide Left In to Close)
So i want to make it when i click the green color div then the left div will open and second time clicked the green div then the left div will close with animate.
How can i do it. What i am missing in my DEMO.
Here is a code:
JS
$(".click_open_close").click(function(){
var id = $(this).data("id");
$(".left_in").animate({width:"100%"}, 200).find(".aa").animate({width:"100%"}, 200);
$(".click_open_close").html("Close");
$(".r").removeClass("click_open_close");
$(".r").addClass("pp");
});
$(".pp").click(function(){
$(".left").animate({width:"0%"},200);
$(".left_in").animate({width:"0%"},200);
});
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" data-id="100">Click To Show Slide Left In</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;
}
.pp{
right:0px;
padding:10px;
color:#fff;
position:absolute;
background-color:green;
cursor:pointer;
}
You are just unnecessarily changing the class of your click. Check this DEMO and below code.
Just add HTML data-* attribute to your button to determine the state as below:
<div class="r click_open_close" data-state="close" data-id="100">Click To Show Slide Left In</div>
JS
$(".click_open_close").on('click',function(){
var id = $(this).data("id");
var state=$(this).data("state");
if(state==="close")
{
$(this).data("state",'open');
$(".left_in").animate({width:"100%"}, 200).find(".aa").animate({width:"100%"}, 200);
$(this).text('Close');
}
else
{
$(this).data("state",'close');
$(".left_in").animate({width:"0%"}, 200).find(".aa").animate({width:"0%"}, 200);
$(this).text('Click To Show Slide Left In');
}
});
Your pp class is not in the dom when you first add click so you need to use .on:
$(".test_container").on("click", ".click_open_close", function(){
var id = $(this).data("id");
$(".left_in").animate({width:"100%"}, 200).find(".aa").animate({width:"100%"}, 200);
$(".click_open_close").html("Close");
$(".r").removeClass("click_open_close");
$(".r").addClass("pp");
});
$(".test_container").on("click", ".pp", function(){
$(".left").animate({width:"0%"},200);
$(".left_in").animate({width:"0%"},200);
});
Updated fiddle
Well, for diversity.. I simplified a lot, despite existing better ways to do this.
But try this:
var isOpened = false,
button = $('.r'),
leftDiv = $('.left_in');
button.click(function () {
if (isOpened) {
close();
} else {
open();
}
});
function open() {
leftDiv.animate({
width: "100%"
}, 200).find(".aa").animate({
width: "100%"
}, 200);
button.text("Close");
isOpened = true;
}
function close() {
leftDiv.animate({
width: "0%"
}, 200);
button.text("Click To Show Slide Left In");
isOpened = false;
}
.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;
}
.pp {
right:0px;
padding:10px;
color:#fff;
position:absolute;
background-color:green;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test_container">
<div class="left">
<div class="left_in">
<div class="aa">ss</div>
</div>
</div>
<div class="r click_open_close" data-id="100">Click To Show Slide Left In</div>
</div>
You can also toggle a class and use CSS transitions and way more options. But for you, regarding your code I tried to simplify it.
I won't correct your Fiddle since jcubic did it but for your information, there is a simpler and cleaner way to achieve what you need by using toggleClass() and CSS transitions. Here is an example :
$('#button').on('click', function() {
$('#banner').toggleClass('unfolded');
});
html,
body {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
height: 100%;
}
.banner {
position: absolute;
top: 0;
right: -140px;
transition: right 0.5s;
width: 150px;
padding: 12px;
background-color: #000;
color: #fff;
}
.button {
cursor: pointer;
font-weight: bold;
}
.banner.unfolded {
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="content">
<h1>Some content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius iusto, et modi nulla officiis repellat necessitatibus laborum, enim consectetur sunt doloribus tempora esse illum eum incidunt veritatis, quaerat, nostrum eos?</p>
</div>
<div class="banner" id="banner">
<div class="button" id="button">>></div>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
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;
}
}