Javascript mouseout if got id show, if not write "no id"

Javascript mouseout if got id show, if not write "no id" - javascript

I've got 2 divs with two different id ;
mainid
infoid
I need that when I mouseout #mainid div innerHTML text on #infoid with first divs would show up.
Full code
function myFunction() {
var x = document.getElementById("dom").id;
document.getElementById("info").innerHTML = x;
}
html, body {height:100%;
margin:0;
padding:0;}
h2, h3 {
margin:0px;
text-align:center;
padding-top:25px;
}
.cc:nth-child(odd) .first-line {background-color: #CCC;
color:red;}
p {text-align:center;
margin:0;
padding:5px;
color:#fff;}
.box5 {text-align:center;
}
.box5 .first-line {
padding:0px;
margin:0px;
}
.box5 .second-line {
padding:0px;
margin:0px;
}
.box5 img {
padding-top:3px;
padding-bottom:3px;
padding-right:10px;
padding-left:10px;
margin:5px;
border: 3px solid #0B0B3B;
outline:3px solid #F4FA58;
display:inline-block;
}
.imgs {width:50px;height:50px;}
#media screen and (min-width: 769px){
.box1 {height:50%;
width:30%;
float:left;
background-color:#81DAF5;}
.box2 {height:10%;
width:70%;
float:right;
background-color:#81F781;}
.box3 {height:20%;
width:15%;
float:left;
background-color:#5858FA;}
.box4 {height:20%;
width:55%;
float:right;
background-color:#F4FA58;}
.box5 {height:20%;
width:70%;
float:right;
background-color:#FAAC58;}
.box6 {height:40%;
width:15%;
float:left;
background-color:#A0522D;}
.box7 {height:40%;
width:35%;
float:left;
background-color:#FA5858;}
.box8 {height:40%;
width:50%;
float:right;
background-color:#fff;}
.box9 {height:10%;
width:100%;
float:left;
background-color:#000;}
}
#media screen and (max-width: 768px) {
.box2:hover {
animation-name:scale;
-webkit-animation-name: scale;
-webkit-animation: scale 0.5s linear infinite;
-webkit-animation-duration: 0.5s;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
#-webkit-keyframes scale {
from {
webkit-transform:scale(1)
}
to {
webkit-transform:scale(0);
webkit-background-color:red;
}
}
#keyframes scale {
from {
transform:scale(1)
}
to {
transform:scale(0);
background-color:red;
}
}
.box5:hover {
animation-name:rotate;
-webkit-animation-name: rotate;
-webkit-animation: rotate 0.5s linear infinite;
-webkit-animation-duration: 0.5s;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
#-webkit-keyframes rotate{
from {
webkit-transform:rotatex(0deg);
}
to {
webkit-transform:rotatex(360deg);
}
}
#keyframes rotate {
from {
transform:rotatex(0deg);
}
to {
transform:rotatex(360deg);
}
}
.box3 h3 {
animation-name:scaletext;
-webkit-animation-name: scaletext;
-webkit-animation: scaletext 0.5s linear infinite;
-webkit-animation-duration: 0.5s;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
#-webkit-keyframes scaletext{
from {
0% {webkit-font-size:12px;}
25% {webkit-font-size:8px;}
50% {webkit-font-size:16px;}
100% {webkit-font-size:11px;}
}
}
#keyframes scaletext {
0% {font-size:12px;}
25% {font-size:8px;}
50% {font-size:16px;}
100% {font-size:11px;}
}
.box1 {height:50%;
width:50%;
float:left;
background-color:#81DAF5;}
.box2 {height:10%;
width:50%;
float:right;
background-color:#81F781;}
.box3 {height:20%;
width:50%;
float:left;
background-color:#5858FA;}
.box4 {
display:none;
height:0px;
width:0px;}
.box5 {height:20%;
width:50%;
float:right;
background-color:#FAAC58;}
.box6 {display:none;}
.box7 {height:40%;
width:20%;
float:left;
background-color:#FA5858;}
.box8 {height:40%;
width:80%;
float:right;
background-color:#fff;}
.box9 {height:10%;
width:100%;
float:left;
background-color:#000;}
}
<div class="box1 cc" id="info">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>
<div class="box2 cc">
<h3 class="first-line">Pirma eilutė</h2>
</div>
<div class="box3 cc">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>
<div class="box4 cc">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>
<div class="box5 cc">
<img class="imgs">
<img class="imgs">
<img class="imgs">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>
<div class="box6 cc">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>
<div class="box7 cc" id="dom" onmouseout='myFunction()'>
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>
<div class="box8 cc">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="first-line">Antra eilutė</h3>
</div>
<div class="box9 cc">
<h3 style="color:#fff;" class="first-line">Pirma eilutė</h2>
The problem is that I can't make something that would write if there is no id.
Maby someone can help me making if else statement in this javascript ?
If got div {code}
Else {write : no id}

function mouseOutFunc(element) {
document.getElementById('info').innerHTML = element.id || "No Id";
}
<div id="info"></div>
<div id="div1" onmouseout="mouseOutFunc(this)">ONE</div>
<div id="div2" onmouseout="mouseOutFunc(this)">TWO</div>
<div onmouseout="mouseOutFunc(this)">NO ID</div>
Try this

Related

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)

Get original background image - JQuery

Hello I've created simple animation but I need to get background wheel when the current car leave and also get the background of the next car:
so if you click on wheels thumbnails the car wheels will be changed but I need when the car start leave I need to restore the original wheels:
Here my code
$('.slectWheel img').click(function (e) {
var currentWheel = $('.current .car__wheel').css('background-image');
e.preventDefault();
var getImgWheel = $(this).attr('src');
$('.car .car__wheel').css('background-image','url(' + getImgWheel + ')');
$('.current').addClass('whelrotateClick');
});
var $cars = $('.car');
$('.car-model').on('click', function () {
var index = $(this).data('index');
var $current = $cars.find('.current');
var $next = $('[data-car-index="' + index + '"]').parent();
$current.addClass('car--trans-out');
setTimeout(function () {
$('.car-image-container').removeClass('whelrotateClick');
$current.removeClass('current').removeClass('car--trans-out');
$next.addClass('current').addClass('car--trans-in');
setTimeout(function () {
$next.removeClass('car--trans-in');
}, 1000)
}, 1000);
})
.slectWheel{
cursor:pointer;
text-align:center;
}
.slectWheel img{
display:inline-block;
}
.car-image{
}
.car{
padding:40px 0;
}
.changeCarSelect{
display:none;
text-align:left;
}
.changeCarSelect span{
display:inline-block;
margin-right:4px;
font-size:14px;
}
.selectContainer {
width: 200px;
padding: 10px 5px;
display:inline-block;
margin-bottom:30px;
/*position:absolute;*/
font-size: 14px;
border:1px solid rgba(246, 246, 246, 0.89);
outline:none;
cursor:pointer;
}
.selectContainer option{
padding:20px 2px;
}
.car div[class^='col']{
padding:5px;
}
.car .car-model{
width:100%;
margin-bottom:30px;
cursor:pointer;
}
.car .car-model h3{
margin:0;
padding:15px 10px;
background-color
color:#333;
font-family:"Raleway", Arial, Tahoma;
font-weight:700;
font-size:18px;
text-align:center;
}
.car .car-relative{
position:relative;
width:100%;
}
.car-image-container{
position: absolute;
left: 100%;
overflow: hidden;
/*border:1px solid;*/
}
.car-image-container img{
margin:auto;
}
.current{
position: relative;
left: 0;
}
/*.current .current{
left: 0;
}*/
.car .car-image .car__wheel{
width:99px;
height:100px;
position:absolute;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
.car .car-image .car__wheel.left{
background-image:url('http://store6.up-00.com/2017-03/148992740531661.png');
top: 87px;
left: 350px;
}
.car .car-image .car__wheel.right{
background-image:url('http://store6.up-00.com/2017-03/148992740544512.png');
top: 87px;
right: 319px;
}
.car--trans-in .car__wheel{
animation: roll-in 400s ease-out;
}
.car--trans-out .car__wheel{
animation: roll-out 400s ease-out;
}
.car--trans-in .car-image{
animation: trans-in 1s ease-out;
animation-fill-mode: forwards;
-moz-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-o-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.car--trans-out .car-image{
animation: trans-out 1s ease-in;
animation-fill-mode: forwards;
-moz-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-o-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.car--trans-in .car__wheel{
animation: roll-in 1s ease-out;
-moz-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-o-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.car--trans-out .car__wheel{
animation: roll-out 1s ease-out;
-moz-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-o-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.car--trans-in .car-image img {
-moz-animation: bounce-in 1s ease-out;
-o-animation: bounce-in 1s ease-out;
-webkit-animation: bounce-in 1s ease-out;
animation: bounce-in 1s ease-out;
-moz-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-o-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.car--trans-out .car-image img {
animation: bounce-out 1s ease-in;
-moz-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-o-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
#keyframes trans-in {
0% {transform: translateX(150%);}
80% {transform: translateX(0%);}
100% {transform: translateX(0%);}
}
#keyframes trans-out {
0% {transform: translateX(0%);}
10% {transform: translateX(0%);}
80% {transform: translateX(-100%);}
100% {transform: translateX(-100%);}
}
#keyframes roll-in {
0% {transform: rotate(0deg);}
80% {transform: rotate(-720deg);}
100% {transform: rotate(-720deg);}
}
#keyframes roll-out {
0% {transform: rotate(0deg);}
100% {transform: rotate(-720deg);}
}
#keyframes bounce-in {
0% {transform: rotate(0deg);}
5.67% {transform: rotate(0deg);}
33% {transform: rotate(-0.5deg);}
77.52% {transform: rotate(-0.5deg);}
100% {transform: rotate(0deg);}
}
#keyframes bounce-out {
0% {transform: rotate(0deg);}
47.15% {transform: rotate(1deg);}
100% {transform: rotate(1deg);}
}
/*==============
Responsive Media Query
==============*/
/* ========================
Note3, Note2, SIII, S5, Lumia950, Nexus5, Nokia N9 : 360px * 640px
Iphone6: 375px * 667px
lg optimus l70, Nexus4: 384px * 640px
Nexus6, Nexus5X, Nexus6P: 412px * 732px
Iphone6Plus: 414px * 736px
======================== */
#media only screen and (min-width: 310px) and (max-width:320px) {
.car .car-image .car__wheel{
width:46px;
height:46px;
}
.car .car-image .car__wheel.left {
top: 41px;
left: 47px;
}
.car .car-image .car__wheel.right {
top:39px;
right:33px;
}
}
#media only screen and (min-width: 330px) and (max-width:360px) {
.car .car-image .car__wheel{
width:55px;
height:55px;
}
.car .car-image .car__wheel.left {
top: 44px;
left: 52px;
}
.car .car-image .car__wheel.right {
top: 44px;
right: 37px;
}
}
#media only screen and (min-width: 361px) and (max-width:375px) {
.car .car-image .car__wheel{
width:52px;
height:52px;
}
.car .car-image .car__wheel.left {
top: 48px;
left: 57px;
}
.car .car-image .car__wheel.right {
top: 48px;
right: 41px;
}
}
#media only screen and (min-width: 380px) and (max-width:384px) {
body{
background-color:red;
}
.car .car-image .car__wheel{
width:53px;
height:53px;
}
.car .car-image .car__wheel.left {
top: 50px;
left: 58px;
}
.car .car-image .car__wheel.right {
top: 50px;
right: 41px;
}
}
#media only screen and (min-width: 390px) and (max-width:414px) {
.car .car-image .car__wheel{
width:60px;
height:60px;
}
.car .car-image .car__wheel.left {
top: 52px;
left: 62px;
}
.car .car-image .car__wheel.right {
top: 52px;
right: 43px;
}
}
#media only screen and (min-width: 580px) and (max-width:600px) {
.car .car-image .car__wheel{
width:92px;
height:92px;
}
.car .car-image .car__wheel.left {
top: 77px;
left: 88px;
}
.car .car-image .car__wheel.right {
top: 77px;
right: 60px;
}
}
#media only screen and (min-width: 630px) and (max-width:640px) {
.car .car-image .car__wheel{
width:92px;
height:92px;
}
.car .car-image .car__wheel.left {
top: 84px;
left: 98px;
}
.car .car-image .car__wheel.right {
top: 84px;
right: 66px;
}
}
#media (max-width: 768px){
.changeCarSelect{
display:block;
}
.car-button{
display:none;
}
}
#media (min-width: 768px) and (max-width: 992px){
.car .car-image .car__wheel.left {
left:140px;
}
.car .car-image .car__wheel.right {
right: 108px;
}
}
#media (min-width: 992px) and (max-width: 1200px){
.car .car-image .car__wheel{
}
.car .car-image .car__wheel.left {
left:250px;
}
.car .car-image .car__wheel.right {
right: 216px;
}
}
.whelrotateClick .car__wheel{
animation-name:animation;
animation-duration:5s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
#keyframes animation {
from {
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="car">
<div class="container">
<div class="changeCarSelect">
<span>Change Car</span>
<select class="selectContainer">
<option class="selectCar" data-index="1">
Car modal
</option>
<option class="selectCar" data-index="2">
Car modal
</option>
<option class="selectCar" data-index="3">
Car modal
</option>
</select>
</div>
<div class="car-button">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="car-model" data-index="1">
<h3>car modal</h3>
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="car-model" data-index="2">
<h3>car modal</h3>
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="car-model" data-index="3">
<h3>car modal</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="car-relative">
<div class="car-image-container current">
<div class="car-image" data-car-index="1">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727111161.png" alt="" />
<div class="car__wheel left" style="background-image:url('http://store6.up-00.com/2017-03/148992740561243.png')"></div>
<div class="car__wheel right" style="background-image:url('http://store6.up-00.com/2017-03/148992740561243.png')"></div>
</div>
</div>
<div class="car-image-container">
<div class="car-image" data-car-index="2">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727131353.png" alt="" />
<div class="car__wheel left" style="background-image:url('http://store6.up-00.com/2017-03/14899275127831.png')"></div>
<div class="car__wheel right" style="background-image:url('http://store6.up-00.com/2017-03/14899275127831.png')"></div>
</div>
</div>
<div class="car-image-container">
<div class="car-image" data-car-index="3">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727151114.png" alt="" />
<div class="car__wheel left" style="background-image:url('http://store6.up-00.com/2017-03/149030743068171.png')"></div>
<div class="car__wheel right" style="background-image:url('http://store6.up-00.com/2017-03/149030743068171.png')"></div>
</div>
</div>
</div>
</div>
</div>
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/148992740561243.png" alt="" />
<img src="http://store6.up-00.com/2017-03/14899275127831.png" alt="" />
<img src="http://store6.up-00.com/2017-03/148992740580684.png" alt="" />
</div>
</div>
</div>
Please run code snippet in fullscreen

I think I have fixed it as you want...
Now when the car leaves, it leaves with the wheels it had when entering.
(I suppose new wheels must be paid!!! lol)
I absolutely didn't touch your HTML or CSS.
Here is the script working in this CodePen:
// Get wheels for all cars onload.
// It is an array of object (in case of two wheel model on the same car)
var carWheelArr=[];
$(".car-image").each(function(i){
var leftWheel = $(this).find(".car__wheel").eq(0).css("background-image");
var rightWheel = $(this).find(".car__wheel").eq(1).css("background-image");
carWheelArr[i] = {};
carWheelArr[i].left=leftWheel;
carWheelArr[i].right=rightWheel;
});
//console.log(JSON.stringify(carWheelArr));
// Change wheels handler.
$('.slectWheel img').click(function (e) {
console.log("Select wheel");
var currentWheel = $('.current .car__wheel').css('background-image');
e.preventDefault();
var getImgWheel = $(this).attr('src');
$(".current").find('.car__wheel').css('background-image','url(' + getImgWheel + ')');
$('.current').addClass('whelrotateClick');
});
// Change car handler
var $cars = $('.car');
$('.car-model').on('click', function () {
// Get current car.
var currentCar=$(document).find(".current");
// Get its car index (minus one to comply zero based array)
var currentCarIndex=parseInt($(document).find(".current").children().first().attr("data-car-index"))-1;
console.log("car#: "+currentCarIndex +" is leaving...");
// Reset wheels.
//console.log(carWheelArr[currentCarIndex].left);
currentCar.find(".left").css({"background-image":carWheelArr[currentCarIndex].left})
currentCar.find(".right").css({"background-image":carWheelArr[currentCarIndex].right})
var index = $(this).data('index');
var $current = $cars.find('.current');
var $next = $('[data-car-index="' + index + '"]').parent();
$current.addClass('car--trans-out');
setTimeout(function () {
$('.car-image-container').removeClass('whelrotateClick');
$current.removeClass('current').removeClass('car--trans-out');
$next.addClass('current').addClass('car--trans-in');
setTimeout(function () {
$next.removeClass('car--trans-in');
}, 1000)
}, 1000);
});

Using % as height for grid system

Guys im having big problems with a site i created i can't get heights in % to make everything equal. Instead i used px and i feel like it is inadequate. I tried changing all the items to % but the div collapse to the containing elements and don't actually use the % of space given. I have sectioned my page into 2 part with a couple of rows in each and i can't set the row height in % only in px it works. any ideas? i will upload the parts of the script here and the rest of Jfiddle.
HTML:
<div class="table-container">
<div class="table-block footer-push"><!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<div class="row header">
<div class="one columns"><input class="bbar" placeholder="search"></div>
<div class="eleven columns person"><span><a>Rajat Sharma</a><i class="fa fa-angle-down fa-fw op"></i></span> <img class="loginimg" src="logout.png"></div>
</div>
<div class="row">
<div class="twelve column">
<div class="pbox"><img alt="Paragon" class="pimg" src="paragon_sqaure.png"></div>
</div>
</div>
<div class="row">
<div class="ten columns PP"><a>Paragon Portal</a></div>
<div class="two columns PP"><input class="more-button" type="button" value="MORE..."></div>
</div>
</div>
<!-- end primary div.container --></div>
<!-- end primary div.table-block -->
<div class="table-block cont">
<div class="container">
<footer class="twelve columns" id="footer">
<div class="four columns steps">
<div class="active-cases"><a>Active Cases</a></div>
<div class="newcomments"><a>New Comments</a></div>
<div class="active-open-cases"><a>Active Open Cases</a></div>
<div class="newcomments2"><a>New Comments</a></div>
<div class="stats">
<div class="guages">
<div class="c100 p12 small dark orange"><span>90</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<div class="c100 p12 small dark green"><span>20</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<div class="c100 p12 small dark"><span>12%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
</div>
<div class="four columns jonarand">
<div class="box1">
<figure><img src="http://www.npnrmanagement.com/Portal/img/White%20jonar%20logo.png">
<figcaption>Jonar & You</figcaption>
</figure>
</div>
<div class="box2">
<figure><img src="http://www.npnrmanagement.com/Portal/img/person%20(1).png">
<figcaption>Customer & You</figcaption>
</figure>
</div>
<div class="box3">
<figure><img src="http://www.npnrmanagement.com/Portal/img/Community%20Icon%20(1).png">
<figcaption>Paragon Community</figcaption>
</figure>
</div>
<div class="box4">
<figure><img src="http://www.npnrmanagement.com/Portal/img/White%20Paragon%20Logo.png">
<figcaption>Paragon Software</figcaption>
</figure>
</div>
</div>
<div class="four columns menuitem">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>
</div>
</footer>
</div>
<!-- end footer div.container -->
<!-- end footer div.table-block --></div>
</div>
the part of the css that pertains to this problem:
html, body {
height: 100%
}
.table-container {
display: table;
height: 100%;
width: 100%;
}
.table-block {
display: table-row;
height: 1px;
}
.footer-push {
height: 50%;
}
#footer {
/* Placeholder footer styles */
}
.cont { height: 50%;}
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box; }
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box; }
/* For devices larger than 400px */
#media (min-width: 400px) {
.container {
width: 100%;
padding: 0; }
}
/* For devices larger than 550px */
#media (min-width: 550px) {
.container {
width: 100%; }
.column,
.columns {
margin-left: 4%; }
.column:first-child,
.columns:first-child {
margin-left: 0; }
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 33.33333333333333%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 48%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 65.3333333333%; }
.nine.columns { width: 74.0%; }
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns { margin-left: 8.66666666667%; }
.offset-by-two.column,
.offset-by-two.columns { margin-left: 17.3333333333%; }
.offset-by-three.column,
.offset-by-three.columns { margin-left: 26%; }
.offset-by-four.column,
.offset-by-four.columns { margin-left: 34.6666666667%; }
.offset-by-five.column,
.offset-by-five.columns { margin-left: 43.3333333333%; }
.offset-by-six.column,
.offset-by-six.columns { margin-left: 52%; }
.offset-by-seven.column,
.offset-by-seven.columns { margin-left: 60.6666666667%; }
.offset-by-eight.column,
.offset-by-eight.columns { margin-left: 69.3333333333%; }
.offset-by-nine.column,
.offset-by-nine.columns { margin-left: 78.0%; }
.offset-by-ten.column,
.offset-by-ten.columns { margin-left: 86.6666666667%; }
.offset-by-eleven.column,
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
.offset-by-one-third.column,
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.offset-by-one-half.column,
.offset-by-one-half.columns { margin-left: 52%; }
}
/* Paragon Partner Portal Styles
-------------------------------------------------- */
.bbar {
opacity:.81;
font-family:'Roboto',sans-serif;
font-size:16px;
font-style:italic;
color:#FFF;
display:inline-block;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
/*padding: 10px 20px;*/
padding-left:5px;
padding-right:5px;
height:21px;
width:115px;
text-align:center;
border:0 solid rgba(0,0,0,0.22);
-webkit-border-radius:20px;
border-radius:12px;
-o-text-overflow:clip;
text-overflow:clip;
background:rgba(255,255,255,0.13);
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
transition:all 200ms cubic-bezier(0.42,0,0.58,1);
margin-left:20px
}
.person {
text-align:right;
height:inherit
}
.person a {
opacity:.41;
font-family:'Roboto',sans-serif;
font-size:16px;
color:#FFF;
font-weight:500;
text-transform:uppercase
}
.person span {
margin-right:15px
}
.loginimg {
margin-bottom:-6px;
margin-right:15px
}
.pbox {
background:rgba(255,255,255,0.20);
box-shadow:2px 3px 4px 0 rgba(12,12,12,0.05);
margin:0 auto;
display:inline-block;
border-radius:50%;
height:110px;
width:110px;
text-align:center
}
.pimg {
padding-top:21px;
width:70px;
height:60px
}
.PP {
/*margin-top: 133px;*/
text-align:left;
height:50px
}
.PP a {
opacity:.64;
font-family:'Roboto' sans-serif;
font-size:32px;
color:#FFF;
margin-left:20px
}
.more-button {
display:inline-block;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
height:17px;
cursor:pointer;
padding:4px 14px;
border:none;
-webkit-border-radius:21px;
border-radius:21px;
color:rgba(255,255,255,0.9);
-o-text-overflow:clip;
text-overflow:clip;
background:#000;
font-family:'Roboto' sans-serif;
font-size:16px;
color:#FFF;
margin-top:15px;
margin-right:15px;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
transition:all 200ms cubic-bezier(0.42,0,0.58,1)
}
.steps {
font-size:20px;
font-weight:500;
color:#fff
}
.active-cases {
background:rgba(0,0,0,.50);
height:64px;
overflow:hidden;
border:none;
text-align:center;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.newcomments {
background:rgba(0,0,0,.30);
height:64px;
overflow:hidden;
border:none;
text-align:center;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.active-open-cases {
background:rgba(0,0,0,.50);
height:64px;
overflow:hidden;
border:none;
text-align:center;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.newcomments2 {
background:rgba(0,0,0,.30);
height:64px;
overflow:hidden;
border:none;
text-align:center;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.stats {
background:rgba(51,51,51,0.28);
height:172px;
font-size:10px
}
.guages {
padding-left:95px;
padding-top:52px
}
.jonarand {
height:426px;
margin-left:0px;
border-left: 3px solid rgba(0,0,0,0);
border-right: 3px solid rgba(0,0,0,0);
}
.jonarand img {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 41px;
}
.jonarand figcaption {
text-align: center;
padding-top: 10px;
font-size: 20px;
color: #FFF;
opacity: .60;
}
.box1 {
height:49.25%;
width:49.25%;
background:rgba(0,0,0,0.59);
float:left;
margin-right:2px;
margin-bottom:2px;
}
.box2 {
height:49.25%;
width:49.75%;
background:rgba(0,0,0,0.59);
float:left;
margin-bottom:2px;
}
.box3 {
height:50.75%;
width:49.25%;
background:rgba(0,0,0,0.59);
float:left;
margin-right:2px;
}
.box4 {
height:50.75%;
width:49.75%;
background:rgba(0,0,0,0.59);
float:left
}
.menuitem {
height:418px;
margin-left:0;
text-align: center;
font-size:20px;
font-weight:500;
color:#fff
}
.menuitem a:link {
text-decoration: none;
color:#FFF;
}
.item1 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
}
.item2 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
}
.item3 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
}
.item4 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
}
.item5 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.item6 {
height:20%;
background:rgba(0,0,0,0.59);
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
I am using Skeleton grid system and made some modifications. As you guys can see i tried adding height % to some items to try to make it work but i don't see whats wrong. Can someone point me to the right direction? the rest is on JSFIDDLE.
http://jsfiddle.net/qbj0r5bk/
here is the fullscreen result: https://jsfiddle.net/qbj0r5bk/embedded/result/

Lets take an example. Lets make a div and set it to be height:30%.
Html
<div id="container1"></div>
CSS
#container1 {
background-color:#f00;
width:30%;
height:30%;
}
That won't work, you will end up with a blank page. The reason is, though div is the only component you are going to work with, the page has other components, html and body. When you set the height of the div as 30%, what you are actualy telling is to set the height to be 30% the height of body which is 100% the height of html. However, html does not have any height by default, it is as tall as its content and you initially don't have any content. Lets make a small change to your css.
New CSS
#container1 {
background-color:#f00;
width:30%;
height:30%;
}
html, body {
height:100%;
}
Try out this fiddle: http://jsfiddle.net/r628n48L/1/

I think you shouldn't set html and body height to 100%, because the page will have the same height as the screen height and everything inside it will be an overflow.
If you mean set the height to % instead of fixed unit to create the element responsive to the screen, just write it in vh. For example, height: 50vh or 50% of the viewport height. Try it.
And just delete html, body {height: 100%}.

Animated menu is opened in background

I have a problem with animated menu.
<header role="banner">
<a class="nav-btn">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</a>
</header>
<nav role="navigation" class="site-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
css
#import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
#keyframes fadeInLeft {
0% {
transform:translateX(-100%);
}
100% {
transform:translateX(0);
}
}
#keyframes fadeInRight {
0% {
transform:translateX(100%);
}
100% {
transform:translateX(0);
}
}
.nav-btn {
display:inline-block;
float:right;
position:relative;
top:5px;
cursor:pointer;
transition:all 0.5s ease;
right:0;
}
.bar {
display:block;
height:5px;
width:35px;
background-color:#111;
margin-top: 6.5px;
transition:all 0.5s ease;
&:nth-of-type(1) {
margin-top:0;
}
}
.b-open {
&:nth-of-type(1){
transform:rotate(-45deg);
transform-origin: right top;
}
&:nth-of-type(2){
opacity:0;
}
&:nth-of-type(3){
transform:rotate(45deg);
transform-origin:right bottom;
}
}
.site-nav {
opacity:0;
position:absolute;
right:0;
top:160px;
left:0;
bottom:0;
text-align: center;
font-weight: 700;
transition:all 0.5s ease;
li {
background-color:rgba(#fff, 0.8);
transition:all 0.5s ease;
}
a {
display:block;
text-decoration: none;
color:#111;
text-transform: uppercase;
transition:all 0.5s ease;
padding:40px;
margin:0 30%;
border-top:1px dashed lighten(#111, 60%);
}
}
.nb-open {
transform:rotate(-180deg);
right:50%;
margin-right:-23.5px;
}
.sn-open {
opacity:1;
li:nth-of-type(odd) {
a { animation:fadeInLeft 0.5s ease; }
}
li:nth-of-type(even) {
a { animation:fadeInRight 0.5s ease; }
}
}
JS
$(".nav-btn").click(function(){
$(this).toggleClass("nb-open");
$(".site-nav").toggleClass("sn-open");
$(".bar").toggleClass("b-open");
});
This menu is opened in background. It is hidden, but the mouse cursor "see" as if it was open.
How do I change it ?
it is menu from codepin http://codepen.io/emcarru/pen/bxehd

Instead of toggling the visibility using the opacity property, why not use the display: none; property instead?
New CSS (notice the new 'hidden' class):
#import url(http://fonts.googleapis.com/css?family=Roboto:400, 700);
#keyframes fadeInLeft {
0% {
transform:translateX(-100%);
}
100% {
transform:translateX(0);
}
}
#keyframes fadeInRight {
0% {
transform:translateX(100%);
}
100% {
transform:translateX(0);
}
}
.nav-btn {
display:inline-block;
float:right;
position:relative;
top:5px;
cursor:pointer;
transition:all 0.5s ease;
right:0;
}
.bar {
display:block;
height:5px;
width:35px;
background-color:#111;
margin-top: 6.5px;
transition:all 0.5s ease;
&:nth-of-type(1) {
margin-top:0;
}
}
.b-open {
&:nth-of-type(1) {
transform:rotate(-45deg);
transform-origin: right top;
}
&:nth-of-type(2) {
opacity:0;
}
&:nth-of-type(3) {
transform:rotate(45deg);
transform-origin:right bottom;
}
}
.site-nav {
position:absolute;
right:0;
top:160px;
left:0;
bottom:0;
text-align: center;
font-weight: 700;
transition:all 0.5s ease;
li {
background-color:rgba(#fff, 0.8);
transition:all 0.5s ease;
}
a {
display:block;
text-decoration: none;
color:#111;
text-transform: uppercase;
transition:all 0.5s ease;
padding:40px;
margin:0 30%;
border-top:1px dashed lighten(#111, 60%);
}
}
.nb-open {
transform:rotate(-180deg);
right:50%;
margin-right:-23.5px;
}
.sn-open {
li:nth-of-type(odd) {
a {
animation:fadeInLeft 0.5s ease;
}
}
li:nth-of-type(even) {
a {
animation:fadeInRight 0.5s ease;
}
}
}
.hidden {
display: none;
}
New HTML (hidden class is applied by default to menu):
<header role="banner"> <a class="nav-btn">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</a>
</header>
<nav role="navigation" class="site-nav hidden">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Clients
</li>
<li>Contact Us
</li>
</ul>
</nav>
New JS (the hidden class is toggled):
$(".nav-btn").click(function () {
$(this).toggleClass("nb-open");
$(".site-nav").toggleClass("sn-open").toggleClass("hidden");
$(".bar").toggleClass("b-open");
});
JSFiddle demo here.

Jquery Slide Animation on hover

I am trying to implement a Jquery Hover function on my Company Logo. I want to achieve this :
However, I had achieved THIS
I used the following logic :
$(".m1").hover(function() {
dir = !dir;
r = dir? -50 : 0;
t = dir? 50 : 0;
$(".slide").stop().animate({left: r+'px'}, 300);
});
You can check my JS Fiddle here : http://jsfiddle.net/Jiteen/xZ6Hv/
Any sort of Help or Suggestion is Appreciated.

How about the below as a starting point? No need for JS!
Demo Fiddle
HTML
<div>
<div href="#" class="word" data-text="edia">M</div>
<div href="#" class="word" data-text="antra">M</div>
</div>
CSS
.word {
display:inline-block;
font-size:1em;
line-height:1;
position:relative;
font-size:50px;
}
.word:first-child {
color:orange;
}
.word:last-child {
color:grey;
}
.word:after {
content:attr(text);
position:relative;
display:inline-block;
overflow:hidden;
max-width:0;
color:black;
font-size:20px;
transition:max-width .5s ease-in;
}
div:hover .word:after {
max-width:40px;
}

You can achieve this by using a structure like this:
<div class="logo">
<div class="m1">M</div>
<div class="m3">aaa</div>
<div class="m2">M</div>
<div class="m4">aaa</div>
</div>
And animate it by changing the width of .m3 and .m4
jsFiddle

This is what i would do: http://jsfiddle.net/A6vYy/.
Do note though, that if you're using images instead of divs you can skip some of the CSS.
JS
$(document).ready(function () {
$(".logo").on("mouseenter", function () {
$(this).find(".hidden").animate({width: "50px"});
}).on("mouseleave", function () {
$(this).find(".hidden").animate({width: "0px"});
});
});
HTML
<div class="logo">
<div class="part">M</div><div class="hidden">edia</div><div class="part">M</div><div class="hidden">antra</div>
</div>
CSS
.part, .hidden {
width: 50px;
height: 50px;
background: red;
display: inline-block;
font-size: 24px;
text-align: center;
vertical-align: top;
}
.hidden {
width: 0px;
overflow: hidden;
}

Try this out :
<div class="media">
<span class="big">M</span>edia
</div>
<div class="mantra">
<span class="big">M</span>antra
</div>
Css:
.media,.mantra{
width:28px;
overflow: hidden;
float:left;
margin-left:2px;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
cursor: pointer;
}
.media:hover{
display: inline-block;
height:60px;
width:60px;
float:left;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
}
.mantra:hover{
display: inline-block;
height:60px;
width:60px;
float:left;
}
.big{
font-size: 2em;
color: #ff8800;
}
Working Demo :http://jsfiddle.net/Jiteen/xZ6Hv/

We Keep Coding

JavaScript is the programming language of the Web.

Javascript mouseout if got id show, if not write "no id" - javascript

function mouseOutFunc(element) { document.getElementById('info').innerHTML = element.id || "No Id"; } <div id="info"></div> <div id="div1" onmouseout="mouseOutFunc(this)">ONE</div> <div id="div2" onmouseout="mouseOutFunc(this)">TWO</div> <div onmouseout="mouseOutFunc(this)">NO ID</div> Try this

Related

codepen multiple product cards

Get original background image - JQuery

Using % as height for grid system

Animated menu is opened in background

Jquery Slide Animation on hover

Categories

Resources