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>
Related
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).
I'm trying to blur the background when I click on an image and it popup.
I already have it where it blurs a section of the page. However, you can see anything that is outside of that section not blur-out.
CSS
.content2#blur.active{
filter: blur(20px);
pointer-events: none;
user-select: none;}
#popup{ /*NEW*/
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
#popup.active{
width: 650px;
top: 53%;
visibility: visible;
opacity: 1;
transition: 0.5s;
}
HTML
<section class="port" id="pLink">
<div class="heading" id="blur">
<h2>Title</h2>
<p>Description.</p>
</div>
<div class="content2" id="blur">
<div class="pBox">
<a href="#" class="anchor" onclick="toggle()" id="img-1">
<img src="../mywebsite/img/bp.jpg">
<div class="overlay">
<h5>Image Description</h5>
</div>
</a>
</div>
</div>
<div id="popup">
<a href="#" class="anchor" onclick="toggle()">
<img src="../mywebsite/img/bp.jpg" class="img-1">
</div>
</section>
<div class="footer">
<p>Copyright</p>
</div>
JavaScript
function toggle(){
var blur = document.getElementById('blur');
blur.classList.toggle('active');
var popup = document.getElementById('popup');
popup.classList.toggle('active');
}
I tried adding the same id="blur" to the footer but the problem is that it only works for one <div>.
I also tried adding a separate css code for let say `class="footer" but it doesn't work.
.footer#blur.active{
filter: blur(20px);
pointer-events: none;
user-select: none;}
I also tried moving the id tag to the section, but that only blurs the heading not the rest.
All you have to do is to add a "blur" class to anyone element you want to get the effect when the image is clicked.
The changes I made:
Change in CSS #blur to .blur
JS - The function takes all elements with class .blur and has add or remove class .active
HTML - added classes .blur to all elements that need to be blurred.
In one document you can have many classes with the same name, but you can have only one element with a unique ID! This is the reason I change the blur from ID to CLASS
function toggle() {
var blur = document.getElementsByClassName('blur');
for (var i = 0; i < blur.length; i++) {
blur[i].classList.toggle('active');
}
var popup = document.getElementById('popup');
popup.classList.toggle('active');
}
.blur.active {
filter: blur(2px);
pointer-events: none;
user-select: none;
}
#popup {
/*NEW*/
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
#popup.active {
width: 650px;
top: 53%;
visibility: visible;
opacity: 1;
transition: 0.5s;
}
<section class="port" id="pLink">
<div class="heading blur">
<h2>Title</h2>
<p>Description.</p>
</div>
<div class="content2 blur">
<div class="pBox">
<a href="#" class="anchor" onclick="toggle()" id="img-1">
<img src="https://blog.54ka.org/wp-content/uploads/2020/09/horse-galloping-close-up-action-photography_by_54ka-165x165.jpg">
<div class="overlay">
<h5>Image Description</h5>
</div>
</a>
</div>
</div>
<div id="popup">
<a href="#" class="anchor" onclick="toggle()">
<img src="https://blog.54ka.org/wp-content/uploads/2012/07/horses_XI_01_by_54ka.jpg" class="img-1">
</div>
</section>
<div class="footer blur">
<p>Copyright</p>
</div>
I try to make an effect that is executed by clicking on an item within the container, container slide to right/left and fade, after the content is faded it needs do be display hide to make place for new content.
The future header will be placed outside the container thus the header do not fade. Nothing i tried seem to work. Anybody any suggestions for this problem?
I will be implementing the effect on my website www.bartmulder.nl/beta1.0 so when you click on a photo the container whit all the photos will fade and slide before display none
// change .box1 to .container and you will see the effect that i am looking for
$('.box1').on('click', function() {
$(this).toggleClass('clicked');
setTimeout(function() {
document.getElementById("containerWerk").style.display = "none";
}, 500);
});
.container {
-webkit-transition: 0.5s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.box img {
margin: 0px auto;
cursor: pointer;
}
.container.clicked {
margin-left: -100px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containerWerk" class="container">
<div class="box1">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
<div class="box2">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
Here's the jQuery / JavaScript way of accomplishing this too...
Simply just call animate on the element and specify what kind of animation, speed, and completion function (optional).
For the example below I am passing a JSON object to specify what actions to accomplish with the animation (which I removed from CSS), then after the animation it will trigger the element to not be displayed any longer.
// change .box1 to .container and you will see the effect that i am looking for
$('.box').on('click', function() {
$(this).animate({
opacity: 0,
marginLeft: -100
}, 1000, function() {
$(this).css("display", "none");
});
});
.box img {
margin: 0px auto;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containerWerk" class="container">
<div class="box box1">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
<div class="box box2">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
You must apply the class 'clicked' in the parent element '.container', not in the 'this', so use jQuery parent to access the parent element '.container' to add the clicked class in the correct element.
// change .box1 to .container and you will see the effect that i am looking for
$('.box1').on('click', function() {
$(this).parent('.container').toggleClass('clicked');
setTimeout(function() {
document.getElementById("containerWerk").style.display = "none";
}, 500);
});
.container {
-webkit-transition: all ease .5s;
transition: all ease .5s;
opacity: 1;
margin-left:0;
position: relative;
}
.box img {
margin: 0px auto;
cursor: pointer;
}
.container.clicked {
margin-left: -100px;
opacity: 0;
transition: all ease .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containerWerk" class="container">
<div class="box1">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
<div class="box2">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
If you want just the image go to other side
// change .box1 to .container and you will see the effect that i am looking for
$('.box').on('click', function() {
$(this).toggleClass('clicked');
setTimeout(function() {
$(this).css('display','none');
}, 500);
});
.container {
-webkit-transition: all ease .5s;
transition: all ease .5s;
opacity: 1;
margin-left:0;
position: relative;
}
.box img {
margin: 0px auto;
cursor: pointer;
transition: all ease .5s;
opacity: 1;
margin-left:0;
position: relative;
}
.box.clicked {
margin-left: -100px;
opacity: 0;
transition: all ease .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containerWerk" class="container">
<div class="box box1">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
<div class="box box2">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
I am creating a "live search" feature, this works fine functionally, however, on responsive testing, it breaks almost as soon as you get to tablet/mobile size.
I am using bootstrap for layout and the injected content from the live search is basically just a template that is injected.
Here is my HTML, SCSS and JS as it stands:
$(function() {
$(".brand-page-search-box").on("input", function(e) {
e.preventDefault();
var containerTemplate,
itemTemplate,
root = 'http://jsonplaceholder.typicode.com';
containerTemplate = `<div class="row search-result-item-container"></div>`;
$.ajax({
url: root + '/posts/1',
method: 'GET'
}).then(function(data) {
$(".search-results").html(containerTemplate);
let returnedJSONToObj = JSON.parse(JSON.stringify(data)),
userID = returnedJSONToObj.userId,
id = returnedJSONToObj.id,
title = returnedJSONToObj.title,
body = returnedJSONToObj.body;
itemTemplate = `<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="flip-container">
<div class="card card-inverse">
<div class="front">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
<div class="back">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="flip-container">
<div class="card card-inverse">
<div class="front">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
<div class="back">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
</div>
</div>
</div>`;
$(".search-result-item-container").append(itemTemplate);
});
return false;
});
});
.flip-container {
-webkit-perspective: 1000;
perspective: 1000;
.card {
position: relative;
-webkit-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
&: hover {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.front,
.back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front {
z-index: 2;
.card-block {
background: url("http://lorempixel.com/1920/1080/");
}
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
.card-block {
background: url("http://lorempixel.com/900/500/");
}
}
}
}
<div class="container-fluid brand-search-bar">
<div class="row">
<div class="col-xs-12">
<nav class="navbar">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item">
<form action="#" id="form">
<div class="input-group">
<input type="text" class="form-control brand-page-search-box" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</span>
</div>
</form>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="container brand-img-container search-results"></div>
Now, the cards inject into the post fine, but look at the following screens to see how the sizing goes:
Desktop:
Laptop/Tablet:
Mobile:
As you can see, on mobile, it totally breaks for some reason and the cards "fold" into one another, but if bootstrap is meant to be handling the layout, why is this happening?
The inspector isnt being much help, nor are some of the articles I have been reading on here and elsewhere, unusually, anyone got any ideas on how to fix this?
I am using bootstrap 4 and jquery 2 if that helps.
If you have any questions, comments or requests, please do ask in the comments below.
You need to fix the flip effect css. Nothing to do with twitter bootstrap.
Your .flip-container is not getting height, so in xs when many containers stack you see the probleme.
You could set a fixed height for your .flip-container but since you want dynamic height here is a solution
Add .front{ position:relative} and .back{top: 0}
.flip-container {
-webkit-perspective: 1000;
perspective: 1000;
.card {
position: relative;
-webkit-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
&:hover {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.front,
.back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front {
z-index: 2;
position:relative; <---
.card-block {
background: url("http://lorempixel.com/1920/1080/");
}
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
top:0; <---
.card-block {
background: url("http://lorempixel.com/900/500/");
}
}
}
}
I am working on an effect here, I will post the code as well, but here is the basic premise. I have a div containing 2 divs and one hidden div called test. When I click the containing div I want the hidden div (which is called "test") to animate only for the containing div I clicked. Right now it is opening on every single div because of how I have the code written, I am thinking I have to use "this" in order to get it to open correctly the way I want it, but I am not sure how to use it in this instance
TLDR: I want to toggle class .open on the div .test when I click the div .workImg (or workBlock), currently it is opening on every .workImg, I want it to only open on the one I click. I am very stumped, I think I need to use $(this) in here somewhere to target just the one I am clicking but cannot figure out how to apply that since all of my class names are the same...
HTML:
<div class="workCont">
<div class="workBlock">
<div class="workImg">
<div class="test"></div>
<img src="/assets/images/piece1.jpg" />
</div>
<div class="workName">Project</div>
</div>
<div class="workBlock">
<div class="workImg">
<div class="test"></div>
<img src="/assets/images/piece1.jpg" />
</div>
<div class="workName">Project</div>
</div>
<div class="workBlock break">
<div class="workImg">
<div class="test"></div>
<img src="/assets/images/piece1.jpg" />
</div>
<div class="workName">Project</div>
</div>
</div>
CSS:
.workCont {
width:1024px;
margin: $center;
overflow:hidden;
.workBlock {
float:left;
margin-left:17px;
&:nth-child(3n+1) {
margin-left:0;
}
&:nth-child(1n+1) {
margin-top:33px;
}
.workImg {
background:#151515;
width:330px;
height:201px;
display:inline-block;
position: relative;
}
.test {
position: absolute;
z-index:100;
width: 0px;
height: 0px;
-webkit-transition-duration: 1s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-in-out;
text-align: center;
background: white;
color: white;
font-family: sans-serif; /* Just 'cos */
}
.test.open {
transform: scale(50, 50);
top: 0px;
left: 0px;
width: 1000px;
height: 1000px;
clear:both;
}
.workName {
text-align:center;
margin-top:17px;
}
}
}
jQuery:
$(document).ready(function(){
$(".workImg").click(function() {
$(".test").toggleClass("open");
});
});
use $(this)
$(document).ready(function(){
$(".workImg").click(function() {
$(this).find(".test").toggleClass("open");
});
});