Display Dialog Box once every 3 hours

Display Dialog Box once every 3 hours - javascript

Works on my website but want to it to show only once per 2-3 hours:-
https://www.helpingtechie.com
This not my code just download from a website which gave me.
I think cookies will be needed to add.
Code Used:-
.guestwarn-mask{
position:absolute;
background:#fff;
opacity:0.5;
filter:alpha(opacity=50);
z-index: 4;
overflow: hidden;
}
.guestwarn-layout{
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 500ms cubic-bezier(0.39, 1.42, 0.48, 1) 250ms;
-moz-transition: all 500ms cubic-bezier(0.39, 1.42, 0.48, 1) 250ms;
-ms-transition: all 500ms cubic-bezier(0.39, 1.42, 0.48, 1) 250ms;
-o-transition: all 500ms cubic-bezier(0.39, 1.42, 0.48, 1) 250ms;
transition: all 500ms cubic-bezier(0.39, 1.42, 0.48, 1) 250ms;
position:absolute;
border:1px solid #eee;
background:#fff;
box-shadow: 1px 2px 4px rgba(100,100,100,0.1);
display:none;
z-index:5;
}
.guestwarn-layout-animate{
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.guestwarn-layout-close{
-webkit-transition: all 900ms cubic-bezier(.37,-0.99,.24,.24) 100ms;
-moz-transition: all 900ms cubic-bezier(.37,-0.99,.24,.24) 100ms;
-ms-transition: all 900ms cubic-bezier(.37,-0.99,.24,.24) 100ms;
-o-transition: all 900ms cubic-bezier(.37,-0.99,.24,.24) 100ms;
transition: all 900ms cubic-bezier(.37,-0.99,.24,.24) 100ms;
top:-300px !important;
}
.guestwarn-content{
position:relative;
color:#555;
overflow:hidden;
}
.guestwarn-title{
position:absolute;
left:0px;
top:0px;
height:40px;
width:100%;
overflow:hidden;
background:#eee;
font:normal 16px Microsoft Yahei;
color:#fff
}
.guestwarn-title span{
display:block;
float:left;
padding:10px 20px;
background:#08c;
}
.guestwarn-close{
position:absolute;
right:0px;
top:0px;
background:#E04343;
display:block;
text-decoration:none;
font-family:Tahoma;
font-size:20px;
line-height:37px;
height:40px;
width:40px;
text-align:center;
color:#fff
}
.guestwarn-close:hover{
opacity:0.8;
filter:alpha(opacity=80);
}
.guestwarn-html{
padding:50px 20px 20px 20px;
font:normal 16px Microsoft Yahei;
line-height: 150%;
text-align:left;
}
.guestwarn-html a{
color:#58f
}
<script src="https://www.helpingtechie.com/jscripts/jquery.guestwarn.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
$.guestwarn({
mask:true,
height: 'auto',
title:'Dear Guest',
html:'If you read this, it means you are not registered. <br>Click here to register in a few simple steps, you will enjoy all features of our Forum.',
callback:function(){
console.log('CALLBACKS')
}
});
});
</script>

if i understood your "question" corectly... This can help:
$(function(){
setInterval(function() {
$.guestwarn({
mask:true,
height: 'auto',
title:'Dear Guest',
html:'If you read this, it means you are not registered. <br>Click here to register in a few simple steps, you will enjoy all features of our Forum.',
callback:function(){
console.log('CALLBACKS')
}
});
}, 10800000);
// 10800000 is 3 hours in miliseconds
});

Related

If I insert a DIV a second time, it will only overlap and the JS will not work anymore

I have created a product card for products. This works too, but if I insert a second one, nothing at all works. The cards overlap and the JS does not work anymore ...
<div id="make-3D-space">
<div id="product-card">
<div id="product-front">
<div class="shadow"></div>
<img class="img" src="https://www.alfru.com/wp-content/uploads/2017/03/Acerola.jpg" alt="" />
<div class="image_overlay"></div>
<div id="view_details">Informationen
</div>
<div class="stats">
<div class="stats-container">
<span class="product_name">Acerola</span>
<p>Saftkonzentrat</p>
<div class="product-options">
<strong>Verfügbare Produkte</strong>
<span>Acerolasaftkonzentrat (blank 42° Brix)</span>
<strong>Verpackungsgrößen</strong>
<div class="product-options">
<span>20 Kg Bag-in-Box (Aseptic)</span>
<span>200 Kg Fass (Aseptic)</span>
</div>
</div>
</div>
</div>
</div>
<div id="product-back">
<div class="shadow"></div>
<div id="carousel">
<div>
<ul>
<li>
<h3 class="informations">Informationen</h3>
<div>
<p class="product-desc">Acerolasaft-Konzentrat ist eine klare Flüssigkeit, die aus entpektinisiertem, gefiltertem, unvergorenem Fruchtsaft aus gesunden, sauberen Früchten durch physikalisches Abtrennen von Wasser hergestellt wird.</p>
</div>
<div>
<p class="contact-text">Weitere Produktinformationen auf Anfrage</p>
</div>
</li>
</ul>
</div>
<div id="flip-back">
<div id="cy"></div>
<div id="cx"></div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
I have no idea why i not works... CSS:
/* Generals resets and unimportant stuff */
* { margin: 0px; padding: 0px; }
body {
background: #eaebec;
font-family: "Open Sans", sans-serif;
}
/* --- Product Card ---- */
#make-3D-space{
position: relative;
width:340px;
height:500px;
transition: transform 5s;
position:absolute;
}
#product-front, #product-back{
width:335px;
height:500px;
background:#fff;
position:absolute;
left:-5px;
top:-5px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#product-back{
display:none;
transform: rotateY( 180deg );
}
#product-card.animate #product-back, #product-card.animate #product-front{
top:0px;
left:0px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#product-card{
width:325px;
height:470px;
position:absolute;
top:10px;
left:10px;
overflow:hidden;
transform-style: preserve-3d;
-webkit-transition: 100ms ease-out;
-moz-transition: 100ms ease-out;
-o-transition: 100ms ease-out;
transition: 100ms ease-out;
}
div#product-card.flip-10{
-webkit-transform: rotateY( -10deg );
-moz-transform: rotateY( -10deg );
-o-transform: rotateY( -10deg );
transform: rotateY( -10deg );
transition: 50ms ease-out;
}
div#product-card.flip90{
-webkit-transform: rotateY( 90deg );
-moz-transform: rotateY( 90deg );
-o-transform: rotateY( 90deg );
transform: rotateY( 90deg );
transition: 100ms ease-in;
}
div#product-card.flip190{
-webkit-transform: rotateY( 190deg );
-moz-transform: rotateY( 190deg );
-o-transform: rotateY( 190deg );
transform: rotateY( 190deg );
transition: 100ms ease-out;
}
div#product-card.flip180{
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
transition: 150ms ease-out;
}
#product-card.animate{
top:5px;
left:5px;
width:335px;
height:500px;
box-shadow:0px 13px 21px -5px rgba(0, 0, 0, 0.3);
-webkit-transition: 100ms ease-out;
-moz-transition: 100ms ease-out;
-o-transition: 100ms ease-out;
transition: 100ms ease-out;
}
.stats-container{
background:#fff;
position:absolute;
top:386px;
left:0;
width:265px;
height:300px;
padding:27px 35px 35px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
#product-card.animate .stats-container{
top:272px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.img {
position: absolute;
top: 0px;
bottom: 150px;
left: 0px;
right: 0px;
margin: auto;
}
.product-desc {
text-algin: center;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
}
.contact-text {
text-align: center;
margin-top: 150px;
font-size: 13px;
}
.contact-button: {
top:112px;
left:50%;
margin-left:-85px;
border:2px solid #fff;
color:#fff;
font-size:19px;
text-align:center;
text-transform:uppercase;
font-weight:700;
padding:10px 0;
width:172px;
opacity:0;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
#view_details:hover{
background:#fff;
color:#22aadd;
cursor:pointer;
}
.informations {
text-align: center;
margin-top: 50px;
}
.stats-container .product_name{
font-size:22px;
color:#393c45;
}
.stats-container p{
font-size:16px;
color:#b1b1b3;
padding:2px 0 20px 0;
}
.stats-container .product_price{
float:right;
color:#48cfad;
font-size:22px;
font-weight:600;
}
.image_overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#22aadd;
opacity:0;
}
#product-card.animate .image_overlay{
opacity:0.7;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.product-options{
padding:2px 0 0;
}
.product-options strong{
font-weight:700;
color:#393c45;
font-size:14px;
}
.product-options span{
color:#969699;
font-size:14px;
display:block;
margin-bottom:8px;
}
#view_details{
position:absolute;
top:112px;
left:50%;
margin-left:-85px;
border:2px solid #fff;
color:#fff;
font-size:19px;
text-align:center;
text-transform:uppercase;
font-weight:700;
padding:10px 0;
width:172px;
opacity:0;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
#view_details:hover{
background:#fff;
color:#22aadd;
cursor:pointer;
}
#product-card.animate #view_details{
opacity:1;
width:152px;
font-size:15px;
margin-left:-75px;
top:115px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
div.colors div{
margin-top:3px;
width:15px;
height:15px;
margin-right:5px;
float:left;
}
div.colors div span{
width:15px;
height:15px;
display:block;
border-radius:50%;
}
div.colors div span:hover{
width:17px;
height:17px;
margin:-1px 0 0 -1px;
}
div.c-blue span{background:#6e8cd5;}
div.c-red span{background:#f56060;}
div.c-green span{background:#44c28d;}
div.c-white span{
background:#fff;
width:14px;
height:14px;
border:1px solid #e8e9eb;
}
div.shadow{
width:335px;height:520px;
opacity:0;
position:absolute;
top:0;
left:0;
z-index:3;
display:none;
background: -webkit-linear-gradient(left,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
background: -o-linear-gradient(right,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
background: -moz-linear-gradient(right,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.2));
}
#product-back div.shadow{
z-index:10;
opacity:1;
background: -webkit-linear-gradient(left,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
background: -o-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
background: -moz-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
}
#flip-back{
position:absolute;
top:20px;
right:20px;
width:30px;
height:30px;
cursor:pointer;
}
#cx, #cy{
background:#d2d5dc;
position:absolute;
width:0px;
top:15px;
right:15px;
height:3px;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
#flip-back:hover #cx, #flip-back:hover #cy{
background:#979ca7;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
#cx.s1, #cy.s1{
right:0;
width:30px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#cy.s2{
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#cy.s3{
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#cx.s1{
right:0;
width:30px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#cx.s2{
-ms-transform: rotate(140deg);
-webkit-transform: rotate(140deg);
transform: rotate(140deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#cx.s3{
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: all 100ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#carousel{
width:335px;
height:500px;
overflow:hidden;
position:relative;
}
#carousel ul{
position:absolute;
top:0;
left:0;
}
#carousel li{
width:335px;
height:500px;
float:left;
overflow:hidden;
}
.arrows-perspective{
width:335px;
height:55px;
position: absolute;
top: 218px;
transform-style: preserve-3d;
transition: transform 5s;
perspective: 335px;
}
.carouselPrev, .carouselNext{
width: 50px;
height: 55px;
background: #ccc;
position: absolute;
top:0;
transition: all 200ms ease-out;
opacity:0.9;
cursor:pointer;
}
.carouselNext{
top:0;
right: -26px;
-webkit-transform: rotateY( -117deg );
-moz-transform: rotateY( -117deg );
-o-transform: rotateY( -117deg );
transform: rotateY( -117deg );
transition: all 200ms ease-out;
}
.carouselNext.visible{
right:0;
opacity:0.8;
background: #efefef;
-webkit-transform: rotateY( 0deg );
-moz-transform: rotateY( 0deg );
-o-transform: rotateY( 0deg );
transform: rotateY( 0deg );
transition: all 200ms ease-out;
}
.carouselPrev{
left:-26px;
top:0;
-webkit-transform: rotateY( 117deg );
-moz-transform: rotateY( 117deg );
-o-transform: rotateY( 117deg );
transform: rotateY( 117deg );
transition: all 200ms ease-out;
}
.carouselPrev.visible{
left:0;
opacity:0.8;
background: #eee;
-webkit-transform: rotateY( 0deg );
-moz-transform: rotateY( 0deg );
-o-transform: rotateY( 0deg );
transform: rotateY( 0deg );
transition: all 200ms ease-out;
}
#carousel .x, #carousel .y{
height:2px;
width:15px;
background:#48cfad;
position:absolute;
top:31px;
left:17px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#carousel .x{
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
top:21px;
}
#carousel .carouselNext .x{
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#carousel .carouselNext .y{
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
/* Button */
.center {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.btn,
button {
background: #1d1d1d;
border: none;
font-size: 10px;
font-size: 1rem;
background-color: #1d1d1d;
color: white;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 14px 21px;
padding: 1.4rem 2.1rem;
border: 2px solid #1d1d1d;
transition: color 0.1s cubic-bezier(0.16, 0.08, 0.355, 1), background 0.1s cubic-bezier(0.16, 0.08, 0.355, 1);
display: inline-block;
cursor: pointer;
width: 100%;
min-width: 200px;
min-width: 20rem;
outline: none;
vertical-align: middle;
text-align: center;
position: relative;
overflow: hidden;
}
#media (min-width: 400px) {
.btn,
button {
width: auto;
}
}
#media (min-width: 800px) {
.btn,
button {
font-size: 1.1rem;
padding: 1.6rem 2.8rem;
}
}
.btn:hover,
button:hover {
background: #2a2a2a;
border-color: #2a2a2a;
color: #fff;
}
.btn-border {
background-color: transparent;
color: #1d1d1d;
}
.btn-arrow {
position: relative;
transition: background-color 300ms ease-out;
}
.btn-arrow span {
display: inline-block;
position: relative;
transition: all 300ms ease-out;
will-change: transform;
}
.btn-arrow:hover span {
-webkit-transform: translate3d(-1rem, 0, 0);
transform: translate3d(-1rem, 0, 0);
}
.btn-arrow svg {
position: absolute;
width: 1.1em;
right: 0px;
right: 0rem;
opacity: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: all 300ms ease-out;
will-change: right, opacity;
}
.btn-arrow svg * {
stroke-width: 5;
stroke-color: transparent;
}
.btn-arrow:hover svg {
opacity: 1;
right: -2rem;
}
And my JS:
$(document).ready(function(){
// Lift card and show stats on Mouseover
$('#product-card').hover(function(){
$(this).addClass('animate');
$('div.carouselNext, div.carouselPrev').addClass('visible');
}, function(){
$(this).removeClass('animate');
$('div.carouselNext, div.carouselPrev').removeClass('visible');
});
// Flip card to the back side
$('#view_details').click(function(){
$('div.carouselNext, div.carouselPrev').removeClass('visible');
$('#product-card').addClass('flip-10');
setTimeout(function(){
$('#product-card').removeClass('flip-10').addClass('flip90').find('div.shadow').show().fadeTo( 80 , 1, function(){
$('#product-front, #product-front div.shadow').hide();
});
}, 50);
setTimeout(function(){
$('#product-card').removeClass('flip90').addClass('flip190');
$('#product-back').show().find('div.shadow').show().fadeTo( 90 , 0);
setTimeout(function(){
$('#product-card').removeClass('flip190').addClass('flip180').find('div.shadow').hide();
setTimeout(function(){
$('#product-card').css('transition', '100ms ease-out');
$('#cx, #cy').addClass('s1');
setTimeout(function(){$('#cx, #cy').addClass('s2');}, 100);
setTimeout(function(){$('#cx, #cy').addClass('s3');}, 200);
$('div.carouselNext, div.carouselPrev').addClass('visible');
}, 100);
}, 100);
}, 150);
});
// Flip card back to the front side
$('#flip-back').click(function(){
$('#product-card').removeClass('flip180').addClass('flip190');
setTimeout(function(){
$('#product-card').removeClass('flip190').addClass('flip90');
$('#product-back div.shadow').css('opacity', 0).fadeTo( 100 , 1, function(){
$('#product-back, #product-back div.shadow').hide();
$('#product-front, #product-front div.shadow').show();
});
}, 50);
setTimeout(function(){
$('#product-card').removeClass('flip90').addClass('flip-10');
$('#product-front div.shadow').show().fadeTo( 100 , 0);
setTimeout(function(){
$('#product-front div.shadow').hide();
$('#product-card').removeClass('flip-10').css('transition', '100ms ease-out');
$('#cx, #cy').removeClass('s1 s2 s3');
}, 100);
}, 150);
});
});
Maybe someone can help me to get five cards in a row.
Vielleicht schaut hier ja auch ein Deutscher drauf, ich möchte halt fünf Produkte in eine Reihe bekommen. Das kann ich aber nicht weil sich das ganze dauerhaft überlappt. :(

codepen multiple product cards

I am trying to make 8 product cards in the same container and i am following this example :
https://codepen.io/virgilpana/pen/RNYQwB
But when i try to add a 2nd,3d,etc card the animation works only for the 1st card and the others appear as photos.
Is it possible to have the example functionality in every product?
The html code of the example:
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<a id="view-code" href="https://codepen.io/virgilpana/pen/RNYQwB" target="_blank">VIEW CODE</a>
<div id="make-3D-space">
<div id="product-card">
<div id="product-front">
<div class="shadow"></div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="" />
<div class="image_overlay"></div>
<div id="view_details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">$39</span>
<span class="product_name">Adidas Originals</span>
<p>Men's running shirt</p>
<div class="product-options">
<strong>SIZES</strong>
<span>XS, S, M, L, XL, XXL</span>
<strong>COLORS</strong>
<div class="colors">
<div class="c-blue"><span></span></div>
<div class="c-red"><span></span></div>
<div class="c-white"><span></span></div>
<div class="c-green"><span></span></div>
</div>
</div>
</div>
</div>
</div>
<div id="product-back">
<div class="shadow"></div>
<div id="carousel">
<ul>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large.png" alt="" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large2.png" alt="" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large3.png" alt="" /></li>
</ul>
<div class="arrows-perspective">
<div class="carouselPrev">
<div class="y"></div>
<div class="x"></div>
</div>
<div class="carouselNext">
<div class="y"></div>
<div class="x"></div>
</div>
</div>
</div>
<div id="flip-back">
<div id="cy"></div>
<div id="cx"></div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

If you change all the id's to classes in the HTML CSS and JavaScript, and set (the now) .product_card to position: relative;, that should work!
Code Snippet:
$(document).ready(function(){
// Lift card and show stats on Mouseover
$('.product-card').hover(function(){
$(this).addClass('animate');
$('div.carouselNext, div.carouselPrev').addClass('visible');
}, function(){
$(this).removeClass('animate');
$('div.carouselNext, div.carouselPrev').removeClass('visible');
});
// Flip card to the back side
$('.view_details').click(function(){
$('div.carouselNext, div.carouselPrev').removeClass('visible');
$('.product-card').addClass('flip-10');
setTimeout(function(){
$('.product-card').removeClass('flip-10').addClass('flip90').find('div.shadow').show().fadeTo( 80 , 1, function(){
$('.product-front, .product-front div.shadow').hide();
});
}, 50);
setTimeout(function(){
$('.product-card').removeClass('flip90').addClass('flip190');
$('.product-back').show().find('div.shadow').show().fadeTo( 90 , 0);
setTimeout(function(){
$('.product-card').removeClass('flip190').addClass('flip180').find('div.shadow').hide();
setTimeout(function(){
$('.product-card').css('transition', '100ms ease-out');
$('.cx, .cy').addClass('s1');
setTimeout(function(){$('.cx, .cy').addClass('s2');}, 100);
setTimeout(function(){$('.cx, .cy').addClass('s3');}, 200);
$('div.carouselNext, div.carouselPrev').addClass('visible');
}, 100);
}, 100);
}, 150);
});
// Flip card back to the front side
$('.flip-back').click(function(){
$('.product-card').removeClass('flip180').addClass('flip190');
setTimeout(function(){
$('.product-card').removeClass('flip190').addClass('flip90');
$('.product-back div.shadow').css('opacity', 0).fadeTo( 100 , 1, function(){
$('.product-back, .product-back div.shadow').hide();
$('.product-front, .product-front div.shadow').show();
});
}, 50);
setTimeout(function(){
$('.product-card').removeClass('flip90').addClass('flip-10');
$('.product-front div.shadow').show().fadeTo( 100 , 0);
setTimeout(function(){
$('.product-front div.shadow').hide();
$('.product-card').removeClass('flip-10').css('transition', '100ms ease-out');
$('.cx, .cy').removeClass('s1 s2 s3');
}, 100);
}, 150);
});
/* ---- Image Gallery Carousel ---- */
var carousel = $('#carousel ul');
var carouselSlideWidth = 335;
var carouselWidth = 0;
var isAnimating = false;
// building the width of the casousel
$('#carousel li').each(function(){
carouselWidth += carouselSlideWidth;
});
$(carousel).css('width', carouselWidth);
// Load Next Image
$('div.carouselNext').on('click', function(){
var currentLeft = Math.abs(parseInt($(carousel).css("left")));
var newLeft = currentLeft + carouselSlideWidth;
if(newLeft == carouselWidth || isAnimating === true){return;}
$('#carousel ul').css({'left': "-" + newLeft + "px",
"transition": "300ms ease-out"
});
isAnimating = true;
setTimeout(function(){isAnimating = false;}, 300);
});
// Load Previous Image
$('div.carouselPrev').on('click', function(){
var currentLeft = Math.abs(parseInt($(carousel).css("left")));
var newLeft = currentLeft - carouselSlideWidth;
if(newLeft < 0 || isAnimating === true){return;}
$('#carousel ul').css({'left': "-" + newLeft + "px",
"transition": "300ms ease-out"
});
isAnimating = true;
setTimeout(function(){isAnimating = false;}, 300);
});
});
/* Generals resets and unimportant stuff */
* { margin: 0px; padding: 0px; }
body {
background: #eaebec;
font-family: "Open Sans", sans-serif;
}
.view-code{
color:#48cfad;
font-size:14px;
text-transform:uppercase;
font-weight:700;
text-decoration:none;
position:absolute;
top:640px;
left:50%;
margin-left:-35px;
}
.view-code:hover{color:#34c29e;}
/* --- Product Card ---- */
.make-3D-space{
position: relative;
perspective: 800px;
width:340px;
height:500px;
transform-style: preserve-3d;
transition: transform 5s;
position:absolute;
top:80px;
left:50%;
margin-left:-167px;
}
.product-front, .product-back{
width:335px;
height:500px;
background:#fff;
position:absolute;
left:-5px;
top:-5px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.product-back{
display:none;
transform: rotateY( 180deg );
}
.product-card.animate .product-back, .product-card.animate .product-front{
top:0px;
left:0px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.product-card{
width:325px;
height:490px;
position:relative;
top:10px;
left:10px;
overflow:hidden;
transform-style: preserve-3d;
-webkit-transition: 100ms ease-out;
-moz-transition: 100ms ease-out;
-o-transition: 100ms ease-out;
transition: 100ms ease-out;
}
div.product-card.flip-10{
-webkit-transform: rotateY( -10deg );
-moz-transform: rotateY( -10deg );
-o-transform: rotateY( -10deg );
transform: rotateY( -10deg );
transition: 50ms ease-out;
}
div.product-card.flip90{
-webkit-transform: rotateY( 90deg );
-moz-transform: rotateY( 90deg );
-o-transform: rotateY( 90deg );
transform: rotateY( 90deg );
transition: 100ms ease-in;
}
div.product-card.flip190{
-webkit-transform: rotateY( 190deg );
-moz-transform: rotateY( 190deg );
-o-transform: rotateY( 190deg );
transform: rotateY( 190deg );
transition: 100ms ease-out;
}
div.product-card.flip180{
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
transition: 150ms ease-out;
}
.product-card.animate{
top:5px;
left:5px;
width:335px;
height:500px;
box-shadow:0px 13px 21px -5px rgba(0, 0, 0, 0.3);
-webkit-transition: 100ms ease-out;
-moz-transition: 100ms ease-out;
-o-transition: 100ms ease-out;
transition: 100ms ease-out;
}
.stats-container{
background:#fff;
position:absolute;
top:386px;
left:0;
width:265px;
height:300px;
padding:27px 35px 35px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.product-card.animate .stats-container{
top:272px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.stats-container .product_name{
font-size:22px;
color:#393c45;
}
.stats-container p{
font-size:16px;
color:#b1b1b3;
padding:2px 0 20px 0;
}
.stats-container .product_price{
float:right;
color:#48cfad;
font-size:22px;
font-weight:600;
}
.image_overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#48daa1;
opacity:0;
}
.product-card.animate .image_overlay{
opacity:0.7;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.product-options{
padding:2px 0 0;
}
.product-options strong{
font-weight:700;
color:#393c45;
font-size:14px;
}
.product-options span{
color:#969699;
font-size:14px;
display:block;
margin-bottom:8px;
}
.view_details{
position:absolute;
top:112px;
left:50%;
margin-left:-85px;
border:2px solid #fff;
color:#fff;
font-size:19px;
text-align:center;
text-transform:uppercase;
font-weight:700;
padding:10px 0;
width:172px;
opacity:0;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.view_details:hover{
background:#fff;
color:#48cfad;
cursor:pointer;
}
.product-card.animate #view_details{
opacity:1;
width:152px;
font-size:15px;
margin-left:-75px;
top:115px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
div.colors div{
margin-top:3px;
width:15px;
height:15px;
margin-right:5px;
float:left;
}
div.colors div span{
width:15px;
height:15px;
display:block;
border-radius:50%;
}
div.colors div span:hover{
width:17px;
height:17px;
margin:-1px 0 0 -1px;
}
div.c-blue span{background:#6e8cd5;}
div.c-red span{background:#f56060;}
div.c-green span{background:#44c28d;}
div.c-white span{
background:#fff;
width:14px;
height:14px;
border:1px solid #e8e9eb;
}
div.shadow{
width:335px;height:520px;
opacity:0;
position:absolute;
top:0;
left:0;
z-index:3;
display:none;
background: -webkit-linear-gradient(left,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
background: -o-linear-gradient(right,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
background: -moz-linear-gradient(right,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.2));
}
.product-back div.shadow{
z-index:10;
opacity:1;
background: -webkit-linear-gradient(left,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
background: -o-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
background: -moz-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
}
.flip-back{
position:absolute;
top:20px;
right:20px;
width:30px;
height:30px;
cursor:pointer;
}
.cx, .cy{
background:#d2d5dc;
position:absolute;
width:0px;
top:15px;
right:15px;
height:3px;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.flip-back:hover .cx, .flip-back:hover .cy{
background:#979ca7;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.cx.s1, .cy.s1{
right:0;
width:30px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.cy.s2{
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.cy.s3{
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.cx.s1{
right:0;
width:30px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.cx.s2{
-ms-transform: rotate(140deg);
-webkit-transform: rotate(140deg);
transform: rotate(140deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.cx.s3{
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: all 100ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.carousel{
width:335px;
height:500px;
overflow:hidden;
position:relative;
}
.carousel ul{
position:absolute;
top:0;
left:0;
}
.carousel li{
width:335px;
height:500px;
float:left;
overflow:hidden;
}
.arrows-perspective{
width:335px;
height:55px;
position: absolute;
top: 218px;
transform-style: preserve-3d;
transition: transform 5s;
perspective: 335px;
}
.carouselPrev, .carouselNext{
width: 50px;
height: 55px;
background: #ccc;
position: absolute;
top:0;
transition: all 200ms ease-out;
opacity:0.9;
cursor:pointer;
}
.carouselNext{
top:0;
right: -26px;
-webkit-transform: rotateY( -117deg );
-moz-transform: rotateY( -117deg );
-o-transform: rotateY( -117deg );
transform: rotateY( -117deg );
transition: all 200ms ease-out;
}
.carouselNext.visible{
right:0;
opacity:0.8;
background: #efefef;
-webkit-transform: rotateY( 0deg );
-moz-transform: rotateY( 0deg );
-o-transform: rotateY( 0deg );
transform: rotateY( 0deg );
transition: all 200ms ease-out;
}
.carouselPrev{
left:-26px;
top:0;
-webkit-transform: rotateY( 117deg );
-moz-transform: rotateY( 117deg );
-o-transform: rotateY( 117deg );
transform: rotateY( 117deg );
transition: all 200ms ease-out;
}
.carouselPrev.visible{
left:0;
opacity:0.8;
background: #eee;
-webkit-transform: rotateY( 0deg );
-moz-transform: rotateY( 0deg );
-o-transform: rotateY( 0deg );
transform: rotateY( 0deg );
transition: all 200ms ease-out;
}
.carousel .x, .carousel .y{
height:2px;
width:15px;
background:#48cfad;
position:absolute;
top:31px;
left:17px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.carousel .x{
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
top:21px;
}
.carousel .carouselNext .x{
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.carousel .carouselNext .y{
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<a class="view-code" href="https://codepen.io/virgilpana/pen/RNYQwB" target="_blank">VIEW CODE</a>
<div class="make-3D-space">
<div class="product-card">
<div class="product-front">
<div class="shadow"></div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="" />
<div class="image_overlay"></div>
<div class="view_details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">$39</span>
<span class="product_name">Adidas Originals</span>
<p>Men's running shirt</p>
<div class="product-options">
<strong>SIZES</strong>
<span>XS, S, M, L, XL, XXL</span>
<strong>COLORS</strong>
<div class="colors">
<div class="c-blue"><span></span></div>
<div class="c-red"><span></span></div>
<div class="c-white"><span></span></div>
<div class="c-green"><span></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="product-back">
<div class="shadow"></div>
<div class="carousel">
<ul>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large.png" alt="" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large2.png" alt="" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large3.png" alt="" /></li>
</ul>
<div class="arrows-perspective">
<div class="carouselPrev">
<div class="y"></div>
<div class="x"></div>
</div>
<div class="carouselNext">
<div class="y"></div>
<div class="x"></div>
</div>
</div>
</div>
<div class="flip-back">
<div class="cy"></div>
<div class="cx"></div>
</div>
</div>
</div>
<div class="product-card">
<div class="product-front">
<div class="shadow"></div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="" />
<div class="image_overlay"></div>
<div class="view_details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">$39</span>
<span class="product_name">Adidas Originals</span>
<p>Men's running shirt</p>
<div class="product-options">
<strong>SIZES</strong>
<span>XS, S, M, L, XL, XXL</span>
<strong>COLORS</strong>
<div class="colors">
<div class="c-blue"><span></span></div>
<div class="c-red"><span></span></div>
<div class="c-white"><span></span></div>
<div class="c-green"><span></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="product-back">
<div class="shadow"></div>
<div class="carousel">
<ul>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large.png" alt="" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large2.png" alt="" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large3.png" alt="" /></li>
</ul>
<div class="arrows-perspective">
<div class="carouselPrev">
<div class="y"></div>
<div class="x"></div>
</div>
<div class="carouselNext">
<div class="y"></div>
<div class="x"></div>
</div>
</div>
</div>
<div class="flip-back">
<div class="cy"></div>
<div class="cx"></div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
(You should also use the latest version of JQuery, which is 3.2.1 not 1.11.2)

Scale image to the center of the screen from the gallery using JS and CSS

There is a cubic gallery of images and my requirement is that on mouse hover any image should scale in the middle of the screen. I went through some solutions but they scale image at the exact location it is currently present on the screen.
While the image is scaled all the remaining gallery should go in background.
Please suggest me an approach for doing this And please let me know in case of any code to be posted.

So as suggested by Joramanda on adding above suggestion this seems to be working fine. Below is the css so the left right top and z index were adjusted to generate the desired effect.
.polaroid {
width: 33%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
rgba(0, 0, 0, 0.19);
float: left;
border: thin;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
img {
width: 100%
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
.container {
text-align: center;
padding: 10px 20px;
float: left;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
.polaroid:HOVER {
position:absolute;
left: 20%;
right: 20%;
top:20%;
z-index:10;
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.9);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(1.5);
}

Change hover button class from onClick of other div

That button changes "TE LAAT" into "NU BETALEN" on hover with CSS, which works like a charm. Now I want the "TE LAAT" text to change only when you click the "collapsible-header" div. So when that div becomes active (I added that class now, but the active class toggles when you click it.) the text in the button changes to NU BETALEN.
Basically change the "TE LAAT" into the data-hover or data-active "NU BETALEN" when the div collapsible-header also has the active class.
.collapsible-header.active {
background-color: #e4e4e4;
}
/* .button */
.button {
display: inline-block;
position: relative;
min-width: 7rem;
margin-top: 3.7em;
margin-right: 15px;
padding: 5 6px;
border: 3px solid #EE6E73;
border-radius: 2px;
overflow: hidden;
text-decoration: none;
font-size: 0.8rem;
font-weight: bold;
outline: none;
color: #fff;
background-color: #EE6E73;
font-family: 'Roboto', sans-serif;
line-height: 1.7rem !important;
}
.button span {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.button:before,
.button:after {
content: '';
position: absolute;
top: ;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
-webkit-transition: .4s,opacity .6s;
-moz-transition: .4s,opacity .6s;
-o-transition: .4s,opacity .6s;
transition: .4s,opacity .6s;
}
/* :before */
.button:before {
content: attr(data-hover);
-webkit-transform: translate(-150%,0);
-moz-transform: translate(-150%,0);
-ms-transform: translate(-150%,0);
-o-transform: translate(-150%,0);
transform: translate(-150%,0);
}
/* :after */
.button:after {
content: attr(data-active);
-webkit-transform: translate(150%,0);
-moz-transform: translate(150%,0);
-ms-transform: translate(150%,0);
-o-transform: translate(150%,0);
transform: translate(150%,0);
}
/* Span on :hover and :active */
.button:hover span,
.button:active span {
opacity: 0;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
}
/*
We show :before pseudo-element on :hover
and :after pseudo-element on :active
*/
.button:hover:before,
.button:active:after {
opacity: 1;
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
-o-transition-delay: .4s;
transition-delay: .4s;
}
/*
We hide :before pseudo-element on :active
*/
.button:active:before {
-webkit-transform: translate(-150%,0);
-moz-transform: translate(-150%,0);
-ms-transform: translate(-150%,0);
-o-transform: translate(-150%,0);
transform: translate(-150%,0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
<link href="https://raw.githubusercontent.com/Dogfalo/materialize/master/css/ghpages-materialize.css" rel="stylesheet"/>
<button class="button right" type="button" data-hover="NU BETALEN" data-active="NU BETALEN TWEE"><span>TE LAAT</span></button>
<div class="collapsible-header active">
<p>content</p>
</div>

You should just need to replace .button:hover/.button:active with .button.active in your CSS, then add the JS below to toggle its .active class:
$('.collapsible-header').click(function(){
$('.button').toggleClass('active');
});

Jquery and CSS Button toggle rotation animation

I have a problem with my button. I want it to be toggle like. 1st click - rotate to predefined value. 2nd click - go to original value. Both need to be keyframed so the animation looks smooth and not just instant.
HTML
<center><a id="c_button" class="c_button"><i class="material-icons">settings</i></a><center>
CSS
.c_button{
background-color:#607D8B;
border-radius:50px;
padding: 15px;
display:inline-block;
color:#F5F5F5;
font-family:Roboto;
font-size:16px;
font-weight:bold;
width:24px;
text-decoration:none;
text-align: center;
line-height: 0px;
}.c_button:hover {
background-color:#56707D;
position:relative;
}.c_button:active {
position:relative;
top:1px;
}
/*used to create rotation animation*/
a.on {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: 200ms linear all;
-moz-transition: 200ms linear all;
-o-transition: 200ms linear all;
transition: 200ms linear all;
background-color:#56707D;
}
a.on:hover {
background-color:#607D8B;
}
a.on:active{
}
JS
$(document).ready(function () {
$('a#c_button').click(function () {
$(this).toggleClass("on");
});
});
Here's a JSFiddle https://jsfiddle.net/csck5j3h/
I have the first toggle animation figured out. Can't seem to figure out the other one.

Is this what you're looking for?
-webkit-transition: 200ms linear all;
-moz-transition: 200ms linear all;
-o-transition: 200ms linear all;
transition: 200ms linear all;
Needs to be added to a, not a.on
$('#c_button').click(function(){
$(this).find('a').toggleClass('on');
});
.c_button {
background-color:#607D8B;
border-radius:50px;
padding: 15px;
display:inline-block;
color:#F5F5F5;
font-family:Roboto;
font-size:16px;
font-weight:bold;
width:24px;
text-decoration:none;
text-align: center;
line-height: 0px;
}
.c_button:hover {
background-color:#56707D;
position:relative;
}
.c_button:active {
position:relative;
top:1px;
}
/*used to create rotation animation for JS*/
a{
-webkit-transition: 200ms linear all;
-moz-transition: 200ms linear all;
-o-transition: 200ms linear all;
transition: 200ms linear all;
}
a.on {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
background-color:#56707D;
}
a.on:hover {
background-color:#607D8B;
}
a.on:active {
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="c_button">
<center><a id="c_button" class="c_button">A</a><center>
</div>

Add transition time your c_button css class like below
.c_button {
background-color:#607D8B;
border-radius:50px;
padding: 15px;
display:inline-block;
color:#F5F5F5;
font-family:Roboto;
font-size:16px;
font-weight:bold;
width:24px;
text-decoration:none;
text-align: center;
line-height: 0px;
/*add transition time effect here*/
-webkit-transition: 200ms linear all;
-moz-transition: 200ms linear all;
-o-transition: 200ms linear all;
transition: 200ms linear all;
}
and use your jQuery as it is
$(document).ready(function () {
$('a#c_button').click(function () {
$(this).toggleClass("on");
});
});
JSFiddle Demo

Just add :
a{
-webkit-transition: 200ms linear all;
-moz-transition: 200ms linear all;
-o-transition: 200ms linear all;
transition: 200ms linear all;
}
it allow you to have the transition whenever it isn't on

We Keep Coding

JavaScript is the programming language of the Web.

Display Dialog Box once every 3 hours - javascript

Related

If I insert a DIV a second time, it will only overlap and the JS will not work anymore

codepen multiple product cards

Scale image to the center of the screen from the gallery using JS and CSS

Change hover button class from onClick of other div

Jquery and CSS Button toggle rotation animation

Categories

Resources