Develop Reference

How to separate two images in the same row?

do you know how to separate two images in the same row?
Thank you so much for your help.
I will post the image under this sentence.
Image
<div id="portfolio">
<div class="container-fluid w-75">
<div class="row">
<div class="col-sm-6 col-xs-12 text-center">
<div class="zgrade">
<img class="img-fluid" src="assets/img/szgrade/zgradaA.jpg" alt="..." />
<h2 class="zgrade-txt" style="color:white"> Zgrada A </h2>
</div>
</div>
<div class="col-sm-6 col-xs-12 text-center">
<div class="zgrade">
<img class="img-fluid" src="assets/img/szgrade/zgradaB.jpg" alt="..." />
<h2 class="zgrade-txt" style="color:white"> Zgrada B </h2>
</div>
</div>
</div>
</div>
</div>
Css
.zgrade {
position: relative;
border: 1px solid #333;
overflow: hidden;
width: 745px;
}
.zgradeimg {
width: 500px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.4s ease-in-out;
}
.zgrade:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.zgrade-txt {
position: absolute;
top: 250px;
left: 0;
width: 100%;
Edit: Added CSS code, I tried adding br and span in HTML code.

We could use simple css to add a margin to the element. This would create empty space between the elements.
Add this to your external stylesheet or in your html file(best place is head):
<style>
.img-fluid {
margin-right: 20px; /*feel free to change this to any amount*/
}
</style>
or
style="margin-right:20px"
Margin is space outside of an element, which mostly acts like white space. It is counted in the element size but it is outside the border and background color does not effect it.

I solved the problem, I increased w of the container from 75 to 80, but I needed to add a new class in CSS (that would be w-80).

Add and Remove Keyframe on time

I have 3 moving objects with my keyframe:
#keyframes rotation {
0% {
transform: rotateY(0deg)
}
10% {
transform: rotateY(55deg)
}
30% {
transform: rotateY(55deg)
}
60% {
transform: rotateY(230deg)
}
80% {
transform: rotateY(230deg)
}
100% {
transform: rotateY(360deg)
}
}
this moves my object ->
css:
.object{
position: relative;
margin: auto;
height: 300px;
width: 300px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
transition: transform 2s linear;
transform-style: preserve-3d;
transform: rotateY(230deg);
}
.cb2 {
animation: rotation 20s infinite linear;
}
Now I want the first object to spin once then when it's done the second one should spin, when the second one is done the third one should spin.
I tried something like this:
setTimeout(function() {
$("#first").addClass('cb2');
}, 10000);
setTimeout(function() {
$("#first").removeClass('cb2');
}, 16500);
setTimeout(function() {
$("#second").addClass('cb2');
}, 16600);
setTimeout(function() {
$("#second").removeClass('cb2');
}, 29900);
setTimeout(function() {
$("#third").addClass('cb2');
}, 30100);
First of all, that doesn't really work, because it's not really smooth but the main problem is, that this will do the job once, but I want to loop this.
Is that possible ?
HTML:
<div id="container">
<div id="thrdcb" class="position-absolute displayres" style="top:100px;left: 10%;bottom:0;pointer-events: none;">
<div class="container">
<div class="row mt-5">
<div class="col">
<div data-index="7" data-chapter="1" data-names="opacity,margin-left" data-start-values="0,-10px" data-end-values="1,0" data-delay="1000" style="opacity: 0;" class="wontainer">
<div class="navbar"></div>
<div class="news-grid">
<div class="news-card">
<div id="firstcube" class="object">
<div class="face one">
<p id="firstnewssub" style="position: relative; background-color: #a3ba1e; padding: 10px;">
</p>
</div>
<div class="face two">
<p id="firstnewssub2" style="position: relative; background-color: #a3ba1e; padding: 10px;">
</p>
</div>
<div class="face three">
<img src="data/img/testasdd.png" alt="" />
<p id="aaaae" style="position: relative; background-color: #a3ba1e; padding: 10px;">
</p>
</div>
<div class="face four">
<img src="data/img/asddfff.png" alt="" />
<p id="firstnews2" style="position: relative; background-color: #a3ba1e; padding: 10px;">
</p>
</div>
</div>
<a id="rrzuii" href="https://example.com" target="_blank" rel="noopener noreferrer" data-index="7" data-chapter="1"
data-names="opacity, pointer-events" data-start-values="0, none" data-end-values="1, all" data-delay="1000" style="opacity: 0; margin-left: 0px;text-align: center; cursor: pointer;display: none;" class="asdz7">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="scndcb" class="position-absolute displayres" style="top:100px;right: 10%;bottom:0;pointer-events: none;">
<div class="container">
<div class="row mt-5">
<div class="col">
<div data-index="7" data-chapter="1" data-names="opacity,margin-left" data-start-values="0,-10px" data-end-values="1,0" data-delay="1000" style="opacity: 0;" class="wontainer">
<div class="news-grid">
<div class="news-card">
<div id="thirdcube" class="object">
<div class="face one">
<p id="lppzz" style="position: relative; background-color: #62798b; padding: 10px;">
</p>
</div>
<div class="face two">
<p id="iottt" style="position: relative; background-color: #62798b; padding: 10px;">
</p>
</div>
<div class="face three">
<img src="data/img/asdaqqqqq.png" alt="" />
<p id="thirdnews1" style="position: relative; background-color: #62798b; padding: 10px;">
</p>
</div>
<div class="face four">
<img src="data/img/uthhase.png" alt="" />
<p id="thirdnews2" style="position: relative; background-color: #62798b; padding: 10px;">
</p>
</div>
</div>
<a id="aaklptt" href="https://example.com" target="_blank" rel="noopener noreferrer" data-index="7" data-chapter="1" data-names="opacity, pointer-events"
data-start-values="0, none" data-end-values="1, all" data-delay="1000" style="opacity: 0; margin-left: 0px;text-align: center; cursor: pointer;display: none;" class="-blue">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="cubepointer" class="position-absolute displayres" style="top: 100px; left: 20%; right: 20%; bottom: 0px;pointer-events: none;">
<div class="container">
<div class="row mt-5">
<div class="col">
<div data-index="7" data-chapter="1" data-names="opacity,margin-left" data-start-values="0,-10px" data-end-values="1,0" data-delay="1000" style="opacity: 0;" class="wontainer">
<div class="news-grid">
<div class="news-card">
<div id="secondcube" class="object">
<div class="face one">
<p id="dghh" style="position: relative; background-color: #e07a0c; padding: 10px;">
</p>
</div>
<div class="face two">
<p id="aas" style="position: relative; background-color: #e07a0c; padding: 10px;">
</p>
</div>
<div class="face three">
<img src="data/img/adasd.png" alt="" />
<p id="ffss" style="position: relative; background-color: #e07a0c; padding: 10px;">
</p>
</div>
<div class="face four">
<img src="data/img/testm.png" alt="" />
<p id="zz" style="position: relative; background-color: #e07a0c; padding: 10px;">
</p>
</div>
</div>
<a id="rdda" href="https://example.com" target="_blank" rel="noopener noreferrer" data-index="99" data-chapter="1" data-names="opacity, pointer-events" data-start-values="0, none" data-end-values="1, all"
data-delay="9999" style="opacity: 0; margin-left: 0px;text-align: center; cursor: pointer;display: none;" class="font-weight font">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You can make use of the animation event. In your case the animation is defined as animation: rotation 20s infinite linear;, so to stop the animation and start the next you need to look for the animationiteration event.
I wrapped the elements in a <div> for the event listener. At the same time this wrapper can be used for finding the next element to animate.
const container = document.getElementById('container');
//container.addEventListener('animationend', e => {
container.addEventListener('animationiteration', e => {
$(e.target).removeClass('cb2');
let next = e.target.parentElement.querySelector(`div#${e.target.id}~div.object`);
if(next){
$(next).addClass('cb2');
}else{
$(e.target.parentElement.querySelector(`div.object`)).addClass('cb2');
}
});
// initiate animation
$(container.querySelector(`div.object`)).addClass('cb2');
#keyframes rotation {
0% {
transform: rotateY(0deg)
}
10% {
transform: rotateY(55deg)
}
30% {
transform: rotateY(55deg)
}
60% {
transform: rotateY(230deg)
}
80% {
transform: rotateY(230deg)
}
100% {
transform: rotateY(360deg)
}
}
.object {
position: relative;
margin: auto;
height: 100px;
width: 100px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
transition: transform 2s linear;
transform-style: preserve-3d;
transform: rotateY(230deg);
}
.cb2 {
animation: rotation 20s infinite linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="first" class="object">A</div>
<div id="second" class="object">B</div>
<div id="third" class="object">C</div>
</div>
Update
The first example assumes that all the div.object elements are siblings. The following example is showing how div.object elements can be in a nested structure. In this case there is a need for a variable objects that hold all the div.objects. The selection of the next element happens based on the index of the current element in the array.
const container = document.getElementById('container');
const objects = container.querySelectorAll('.object');
container.addEventListener('animationiteration', e => {
$(e.target).removeClass('cb2');
let currentIndex = [...objects].indexOf(e.target);
let next = objects[currentIndex+1];
if(next){
$(next).addClass('cb2');
}else{
$(objects[0]).addClass('cb2');
}
});
// initiate animation
$(objects[0]).addClass('cb2');
#keyframes rotation {
0% {
transform: rotateY(0deg)
}
10% {
transform: rotateY(55deg)
}
30% {
transform: rotateY(55deg)
}
60% {
transform: rotateY(230deg)
}
80% {
transform: rotateY(230deg)
}
100% {
transform: rotateY(360deg)
}
}
.object {
position: relative;
margin: auto;
height: 100px;
width: 100px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
transition: transform 2s linear;
transform-style: preserve-3d;
transform: rotateY(230deg);
}
.cb2 {
animation: rotation 20s infinite linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div>
<div id="first" class="object">A</div>
</div>
<div>
<div id="second" class="object">B</div>
</div>
<div>
<div id="third" class="object">C</div>
</div>
</div>

While it is theoretically possible to do this in CSS, using one set of keyframes and the animation-delay CSS property, there is a possibility that timings could get out of step, as pointed out in a comment (depending for example how busy the system is with other things).
This snippet therefore sets the animation going for one cycle on the first object, listens for when that animation ends, removes the animation and puts it onto the next object and so on. That way it is guaranteed to keep in step sequentially, even if things get a little delayed sometime.
const objects = document.querySelectorAll('.objects > *');
const num = objects.length;
let n = 0;
objects.forEach(object => {
object.addEventListener('animationend', function() {
object.classList.remove('cb2');
n = (n + 1) % num;
objects[n].classList.add('cb2');
});
});
objects[n].classList.add('cb2');
#keyframes rotation {
0% {
transform: rotateY(0deg)
}
10% {
transform: rotateY(55deg)
}
30% {
transform: rotateY(55deg)
}
60% {
transform: rotateY(230deg)
}
80% {
transform: rotateY(230deg)
}
100% {
transform: rotateY(360deg)
}
}
.objects>* {
position: relative;
margin: auto;
height: 300px;
width: 300px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
transition: transform 2s linear;
transform-style: preserve-3d;
transform: rotateY(230deg);
}
.objects>*:nth-child(1) {
background: cyan;
}
.objects>*:nth-child(2) {
background: magenta;
}
.objects>*:nth-child(3) {
background: yellow;
}
.cb2 {
animation: rotation 20s 1 linear;
}
<div class="objects">
<div></div>
<div></div>
<div></div>
</div>

adding a button to each card to flip

So my basic idea is to add a button to each card which then flips the card and resets the previously flipped card. Now how do I make a button specific to each card which can flip/unflip the card and unflip the previously flipped card (when needed to)
I have this JSFiddle which I found in this question. I looked around the internet but couldn't find any solutions to this specific problem. It might be similar to this. Hope this could help :)
something like this too maybe
$('.flip-container .flipper').click(function() {
// flip back previous hovered element
$('.flip-container.hover').toggleClass('hover');
// flip current element
$(this).closest('.flip-container').toggleClass('hover');
});
/* flip the pane when hovered */
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 250px;
height: 250px;
}
/* flip speed */
.flipper {
transition: 0.8s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background-color: #fff;
}
.artist-1 {
background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
<div class="flipper">
<div class="front artist-1">
<!-- front content -->
</div>
<div class="back">
<p>You won</p>
</div>
</div>
</div>
<div class="flip-container">
<div class="flipper">
<div class="front artist-1">
<!-- front content -->
</div>
<div class="back">
<p>You won</p>
</div>
</div>
</div>

It seems you just need to add a button and add it to the selector
$('.flip-container .flipper button').click(function() {
// flip back previous hovered element
$('.flip-container.hover').toggleClass('hover');
// flip current element
$(this).closest('.flip-container').toggleClass('hover');
});
/* flip the pane when hovered */
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 250px;
height: 250px;
}
/* flip speed */
.flipper {
transition: 0.8s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background-color: #fff;
}
.artist-1 {
background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
<div class="flipper">
<div class="front artist-1">
<!-- front content -->
<button>Flip</button>
</div>
<div class="back">
<p>You won</p>
</div>
</div>
</div>
<div class="flip-container">
<div class="flipper">
<div class="front artist-1">
<!-- front content -->
<button>Flip</button>
</div>
<div class="back">
<p>You won</p>
</div>
</div>
</div>

How can I apply transition to next slide using CSS

I am building a quiz which will consist of a number of slides, while going between the slides using I want to apply a transition similar to this site where the next card slides in slightly.
I have tried applying the transition on my .active classes but this doesn't appear to have any affect.
CodePen
HTML:
<div class="row main-row align-items-center diagonal-stripe-1">
<div class="col d-flex justify-content-center">
<div class="card card1 w-50 active">
<div class="card-body text-center">
<h5 class="card-title">Questionnaire</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
<div class="card card2 w-50">
<div class="card-body text-center">
<h5 class="card-title">Next Question Goes Here</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
</div>
</div>
</div>
CSS:
.main-row {
/*border: 1px solid red;*/
height: 80vh;
}
.diagonal-stripe-1 { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg=="); background-repeat: repeat; }
/* CARD STYLES */
.card {
display: none;
margin-left: 50px;
}
.card.active {
display: block;
margin-left: 0px;
transition: 2s;
/*transform:translate(0);*/
}
JS:
$(document).ready(function() {
$( ".first-btn" ).click(function() {
console.log( "Handler for .click() called." );
$(".card1").toggleClass('active');
$(".card2").toggleClass('active');
});
});

It's because your active card was not showing, I've tried to show your card2 first and call setTimeout to toggleClass, and it works:
$(document).ready(function() {
$( ".first-btn" ).on('click', function() {
$(".card1").toggleClass('active');
$(".card2").show();
setTimeout(() => {
$(".card2").toggleClass('active');
}, 10)
});
});
.main-row {
/*border: 1px solid red;*/
height: 80vh;
}
.diagonal-stripe-1 { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg=="); background-repeat: repeat; }
/* CARD STYLES */
.card {
display: none;
margin-left: 50px;
}
.card.active {
transition: all 1s ease-in-out;
display: block;
margin-left: 0px;
/*transform:translate(0);*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row main-row align-items-center diagonal-stripe-1">
<div class="col d-flex justify-content-center">
<div class="card card1 w-50 active">
<div class="card-body text-center">
<h5 class="card-title">Questionnaire</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
<div class="card card2 w-50">
<div class="card-body text-center">
<h5 class="card-title">Next Question Goes Here</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
</div>
</div>
</div>

You're using the wrong property, you want
transition-duration: 2s;
But this belongs under .card so it looks more like this:
.card {
display: none;
margin-left: 50px;
transition-duration: 2s;
}
.card.active {
display: block;
margin-left: 0px;
/*transform:translate(0);*/
//more .active css...
}
here's some more info
https://www.w3schools.com/csSref/css3_pr_transition-duration.asp

I believe this is what you are missing:
.card.active {
display: block;
margin-left: 0px;
-webkit-animation: slideIn 2s forwards;
-moz-animation: slideIn 2s forwards;
animation: slideIn 2s forwards;
}
#-webkit-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#-moz-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
You could check the following fiddle or check codepen fork:
$(document).ready(function() {
$( ".first-btn" ).click(function() {
console.log( "Handler for .click() called." );
$(".card1").toggleClass('active');
$(".card2").toggleClass('active');
});
});
.main-row {
/*border: 1px solid red;*/
height: 80vh;
}
.diagonal-stripe-1 { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg=="); background-repeat: repeat; }
/* CARD STYLES */
.card {
display: none;
margin-left: 50px;
}
.card.active {
display: block;
margin-left: 0px;
-webkit-animation: slideIn 2s forwards;
-moz-animation: slideIn 2s forwards;
animation: slideIn 2s forwards;
/*transform:translate(0);*/
}
#-webkit-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#-moz-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row main-row align-items-center diagonal-stripe-1">
<div class="col d-flex justify-content-center">
<div class="card card1 w-50 active">
<div class="card-body text-center">
<h5 class="card-title">Questionnaire</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
<div class="card card2 w-50">
<div class="card-body text-center">
<h5 class="card-title">Next Question Goes Here</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
</div>
</div>
</div>
See link for more details regarding CSS Animations and Transitions

How to set click event on all div with same class

I am having trouble with firing up same event on all DIVs which have class "card" as shown in below screenshot:
<div class="row">
<div class="col-md-1">
<div class="margin"></div>
<div class="card">
<div class="front">CardClick</div>
<div class="back">1</div>
</div>
</div>
<div class="col-md-1">
<div class="margin"></div>
<div class="card">
<div class="front">CardClick</div>
<div class="back">2</div>
</div>
</div>
<div class="col-md-1">
<div class="margin"></div>
<div class="card">
<div class="front">CardClick</div>
<div class="back">4</div>
</div>
</div>
<div class="col-md-1">
<div class="margin"></div>
<div class="card">
<div class="front">CardClick</div>
<div class="back">5</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1">
<div class="margin"></div>
<div class="card">
<div class="front">CardClick</div>
<div class="back">4</div>
</div>
</div>
<div class="col-md-1">
<div class="margin"></div>
<div class="card">
<div class="front">CardClick</div>
<div class="back">5</div>
</div>
</div>
<div class="col-md-1">
<div class="margin"></div>
<div class="card">
<div class="front">CardClick</div>
<div class="back">6</div>
</div>
</div>
<div class="col-md-1">
<div class="margin"></div>
<div class="card">
<div class="front">CardClick</div>
<div class="back">4</div>
</div>
</div>
</div>
I set my handler as:
$(".card").click(function() {
alert("clicked...");
});
Problem is that the alert box appears only for those DIVs marked as black in screenshot below. For all other boxes, line alert("clicked...") doesn't event execute.
Even the box marked as 5 in top row, has the alert box appear only if it is clicked in its top-right corner. Clicking any other place in this box doesn't fire up the alert. (Boxes in bottom row don't have this problem, Alert for them appear fine if clicked inside them anywhere).
Is this somehow related to Event Bubbling or Event Catching? How can I fix it such that the alert gets called for all DIVs with class "card"?
Update:
Related CSS look like following:
.card {
width: 100px;
height: 100px;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 100px;
color: black;
text-align: center;
font-weight: bold;
font-size: 16px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: white;
border-color: black;
border-width: 3px;
border-style: solid;
color:black;
}
.card .back {
background: black;
color:white;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.margin {
margin-top: 200%;
}
Update
- Added HTML code to the question. Earlier I had a screenshot there. "col-md-1" etc. is how twitter bootstrap is helping laying out grid.

make sure to put your jquery/javascript code inside the document-ready function $(function() { /* ..code.. */ });. so you know that your divs are loaded into the DOM at the point where you want to apply your click-event:
$(function() {
$("div.card").on("click", function(e){
//your code here..
alert("div with class 'card' clicked!");
e.preventDefault(); //to prevent any other unwanted behavior clicking the div might cause
});
});
note: the selector $("div.card") only applies to divs with the class "card".

Friend,you can refer this, may be this will help you.
I have shown 3 ways of event binding.
http://jsfiddle.net/amitv1093/9kgq58fe/
$(document).ready(function(){
/* option #1*/
$(".card").click(function(){
alert("you clicked " + $(this).attr("class") );
});
/* option #2*/
$(".card").on('click',function(){
alert("you clicked " + $(this).attr("class") );
});
/* option #3*/
$(document).on('click','.card',function(){
alert("you clicked " + $(this).attr("class") );
});
});

firing up same event on all DIVs which have class "card"
But you are binding it on divs with class click
change it to
$(".card").click(function() {
alert("clicked...");
});

You can set handler like this. so you will let to know that which card element you are clicking on. hope it will help you.
$(function(){
$(".card").on('click', function() {
alert($(this).text() + "clicked...");
});
});

Don't see any problem if we change $(".click").click(function() { with $(".card").click(function() { as you want to add click event handler to all divs having class card. See below running code snippet:
$(document).ready(function(){
$(".card").click(function() {
alert("clicked...");
});
});
.margin {
margin-top: 200%;
}
.card{
max-width:40px;
min-height:20px;
background:cyan;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
click on Divs below:
<div class="card margin">1</div>
<div class="card margin">2</div>
<div class="card margin">3</div>
<div class="card margin">4</div>