CSS + JS - overlay onmouseout child items issue

CSS + JS - overlay onmouseout child items issue - javascript

I'm struggling with an overlay with JS + CSS.
I have 4 boxes and 1 overlay. If I hover with my mouse over one box the overlay is sliding in, and cover all 4 boxes. If I move my mouse out of the overlay, it disappears. This all works well but...
If I add any element to my overlay (text etc), then onmouseout is detecting all element, as I left the overlay, and the overlay disappear.
I tried to change many things in CSS but couldn't find out the solution. Also, i read many questions similar to this, but couldn't find the proper one.
Here is my code:
function on() {
document.getElementById("overlay").style.display = "block";
document.getElementById('overlay').classList.add('mst-popupbox-full-slidein');
}
function off() {
document.getElementById("overlay").style.display = "none";
}
.box {
background: red;
}
.overlay1 {
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
display: none;
z-index: 5;
cursor: pointer;
color: white;
}
.inner {
position: relative;
}
.mst-popupbox-full-slidein {
animation: slide-in-sm;
animation-duration: .5s;
}
#keyframes slide-in-sm {
0% {
left: -100%;
}
100% {
left: 0;
}
}
.mst-popupbox-orig {
position: relative;
display: block;
opacity: 1;
overflow: hidden;
font-family: 'Libre-Baskerville-Bold' !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<div class="container bg-light">
<div class="row">
<div class="col-6">
<div class="row inner p-0 ">
<div id="overlay" class="overlay1 bg-dark p-0 " onmouseout="off()">
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</div>
<div class="col-6 inner p-0">
<div class="p-5 box" onmouseover="on()">
<div class="mst-popupbox-orig">
<h1>1</h1>
</div>
</div>
<div class="p-5">2</div>
</div>
<div class="col-6 p-0">
<div class="p-5 bg-danger">3</div>
<div class="p-5">4</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If anyone could help me out with this, would be glad.
Best Regards:

In this case,to achieve pupose you can use onmouseleave instead of onmouseout:
<div id="overlay" class="overlay1 bg-dark p-0 " onmouseleave="off()">
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</div>
And onmouseenter instead of onmouseover:
<div class="col-6 inner p-0">
<div class="p-5 box" onmouseenter="on()">
<div class="mst-popupbox-orig">
<h1>1</h1>
</div>
</div>
<div class="p-5">2</div>
</div>
Because of the onmouseout, onmouseover will trigger when the mouse pointer is moved out of an element, or out of one of its children.
Key to research: bubble (propagate up the document hierarchy)

Related

How to display responsive 5 poker card images with correct aspect ratio?

I want to display 5 poker cards laid side by side with horizontal margin just like on a poker table. I tried this but I can't make it display:
I also want this to be responsive that is it preserves aspect ratio when resized.
.card {
width: 100%;
height: 100%;
background-size: cover;
}
.is2d .two.hearts {background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNhcmQiIGZhY2U9IjJIIiBoZWlnaHQ9IjMuNWluIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSItMTIwIC0xNjggMjQwIDMzNiIgd2lkdGg9IjIuNWluIj48c3ltYm9sIGlkPSJTSDIiIHZpZXdCb3g9Ii02MDAgLTYwMCAxMjAwIDEyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj48cGF0aCBkPSJNMCAtMzAwQzAgLTQwMCAxMDAgLTUwMCAyMDAgLTUwMEMzMDAgLTUwMCA0MDAgLTQwMCA0MDAgLTI1MEM0MDAgMCAwIDQwMCAwIDUwMEMwIDQwMCAtNDAwIDAgLTQwMCAtMjUwQy00MDAgLTQwMCAtMzAwIC01MDAgLTIwMCAtNTAwQy0xMDAgLTUwMCAwIC00MDAgLTAgLTMwMFoiIGZpbGw9InJlZCI+PC9wYXRoPjwvc3ltYm9sPjxzeW1ib2wgaWQ9IlZIMiIgdmlld0JveD0iLTUwMCAtNTAwIDEwMDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQiPjxwYXRoIGQ9Ik0tMjI1IC0yMjVDLTI0NSAtMjY1IC0yMDAgLTQ2MCAwIC00NjBDIDIwMCAtNDYwIDIyNSAtMzI1IDIyNSAtMjI1QzIyNSAtMjUgLTIyNSAxNjAgLTIyNSA0NjBMMjI1IDQ2MEwyMjUgMzAwIiBzdHJva2U9InJlZCIgc3Ryb2tlLXdpZHRoPSI4MCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNSIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ltYm9sPjxkZWZzPjxyZWN0IGlkPSJYSDIiIHdpZHRoPSIxNjQuOCIgaGVpZ2h0PSIyNjAuOCIgeD0iLTgyLjQiIHk9Ii0xMzAuNCI+PC9yZWN0PjwvZGVmcz48cmVjdCB3aWR0aD0iMjM5IiBoZWlnaHQ9IjMzNSIgeD0iLTExOS41IiB5PSItMTY3LjUiIHJ4PSIxMiIgcnk9IjEyIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayI+PC9yZWN0Pjx1c2UgeGxpbms6aHJlZj0iI1hIMiIgc3Ryb2tlPSIjODhmIiBmaWxsPSIjRkZDIj48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNWSDIiIGhlaWdodD0iMzIiIHg9Ii0xMTQuNCIgeT0iLTE1NiI+PC91c2U+PHVzZSB4bGluazpocmVmPSIjU0gyIiBoZWlnaHQ9IjI2Ljc2OSIgeD0iLTExMS43ODQiIHk9Ii0xMTkiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSI3MCIgeD0iLTM1IiB5PSItMTMxLjIzNCI+PC91c2U+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSI+PHVzZSB4bGluazpocmVmPSIjVkgyIiBoZWlnaHQ9IjMyIiB4PSItMTE0LjQiIHk9Ii0xNTYiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSIyNi43NjkiIHg9Ii0xMTEuNzg0IiB5PSItMTE5Ij48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNTSDIiIGhlaWdodD0iNzAiIHg9Ii0zNSIgeT0iLTEzMS4yMzQiPjwvdXNlPjwvZz48L3N2Zz4=')}
<div class="poker is2d">
<div class="middle">
<div class="card two hearts"></div>
<div class="card two hearts"></div>
<div class="card two hearts"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>

As Armedin said, you do not have any content inside your div. Width and height 100% won't do anything.
I suggest you to put the image not as background, as it won't change the dimensions of the div. Use img tag and display: inline; for the card div.
.card {
width: 100%;
height: 100%;
background-size: cover;
display:inline;
}
<div class="poker is2d">
<div class="middle">
<div class="card two hearts"> <img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNhcmQiIGZhY2U9IjJIIiBoZWlnaHQ9IjMuNWluIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSItMTIwIC0xNjggMjQwIDMzNiIgd2lkdGg9IjIuNWluIj48c3ltYm9sIGlkPSJTSDIiIHZpZXdCb3g9Ii02MDAgLTYwMCAxMjAwIDEyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj48cGF0aCBkPSJNMCAtMzAwQzAgLTQwMCAxMDAgLTUwMCAyMDAgLTUwMEMzMDAgLTUwMCA0MDAgLTQwMCA0MDAgLTI1MEM0MDAgMCAwIDQwMCAwIDUwMEMwIDQwMCAtNDAwIDAgLTQwMCAtMjUwQy00MDAgLTQwMCAtMzAwIC01MDAgLTIwMCAtNTAwQy0xMDAgLTUwMCAwIC00MDAgLTAgLTMwMFoiIGZpbGw9InJlZCI+PC9wYXRoPjwvc3ltYm9sPjxzeW1ib2wgaWQ9IlZIMiIgdmlld0JveD0iLTUwMCAtNTAwIDEwMDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQiPjxwYXRoIGQ9Ik0tMjI1IC0yMjVDLTI0NSAtMjY1IC0yMDAgLTQ2MCAwIC00NjBDIDIwMCAtNDYwIDIyNSAtMzI1IDIyNSAtMjI1QzIyNSAtMjUgLTIyNSAxNjAgLTIyNSA0NjBMMjI1IDQ2MEwyMjUgMzAwIiBzdHJva2U9InJlZCIgc3Ryb2tlLXdpZHRoPSI4MCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNSIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ltYm9sPjxkZWZzPjxyZWN0IGlkPSJYSDIiIHdpZHRoPSIxNjQuOCIgaGVpZ2h0PSIyNjAuOCIgeD0iLTgyLjQiIHk9Ii0xMzAuNCI+PC9yZWN0PjwvZGVmcz48cmVjdCB3aWR0aD0iMjM5IiBoZWlnaHQ9IjMzNSIgeD0iLTExOS41IiB5PSItMTY3LjUiIHJ4PSIxMiIgcnk9IjEyIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayI+PC9yZWN0Pjx1c2UgeGxpbms6aHJlZj0iI1hIMiIgc3Ryb2tlPSIjODhmIiBmaWxsPSIjRkZDIj48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNWSDIiIGhlaWdodD0iMzIiIHg9Ii0xMTQuNCIgeT0iLTE1NiI+PC91c2U+PHVzZSB4bGluazpocmVmPSIjU0gyIiBoZWlnaHQ9IjI2Ljc2OSIgeD0iLTExMS43ODQiIHk9Ii0xMTkiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSI3MCIgeD0iLTM1IiB5PSItMTMxLjIzNCI+PC91c2U+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSI+PHVzZSB4bGluazpocmVmPSIjVkgyIiBoZWlnaHQ9IjMyIiB4PSItMTE0LjQiIHk9Ii0xNTYiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSIyNi43NjkiIHg9Ii0xMTEuNzg0IiB5PSItMTE5Ij48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNTSDIiIGhlaWdodD0iNzAiIHg9Ii0zNSIgeT0iLTEzMS4yMzQiPjwvdXNlPjwvZz48L3N2Zz4='/></div>
<div class="card two hearts"> <img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNhcmQiIGZhY2U9IjJIIiBoZWlnaHQ9IjMuNWluIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSItMTIwIC0xNjggMjQwIDMzNiIgd2lkdGg9IjIuNWluIj48c3ltYm9sIGlkPSJTSDIiIHZpZXdCb3g9Ii02MDAgLTYwMCAxMjAwIDEyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj48cGF0aCBkPSJNMCAtMzAwQzAgLTQwMCAxMDAgLTUwMCAyMDAgLTUwMEMzMDAgLTUwMCA0MDAgLTQwMCA0MDAgLTI1MEM0MDAgMCAwIDQwMCAwIDUwMEMwIDQwMCAtNDAwIDAgLTQwMCAtMjUwQy00MDAgLTQwMCAtMzAwIC01MDAgLTIwMCAtNTAwQy0xMDAgLTUwMCAwIC00MDAgLTAgLTMwMFoiIGZpbGw9InJlZCI+PC9wYXRoPjwvc3ltYm9sPjxzeW1ib2wgaWQ9IlZIMiIgdmlld0JveD0iLTUwMCAtNTAwIDEwMDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQiPjxwYXRoIGQ9Ik0tMjI1IC0yMjVDLTI0NSAtMjY1IC0yMDAgLTQ2MCAwIC00NjBDIDIwMCAtNDYwIDIyNSAtMzI1IDIyNSAtMjI1QzIyNSAtMjUgLTIyNSAxNjAgLTIyNSA0NjBMMjI1IDQ2MEwyMjUgMzAwIiBzdHJva2U9InJlZCIgc3Ryb2tlLXdpZHRoPSI4MCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNSIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ltYm9sPjxkZWZzPjxyZWN0IGlkPSJYSDIiIHdpZHRoPSIxNjQuOCIgaGVpZ2h0PSIyNjAuOCIgeD0iLTgyLjQiIHk9Ii0xMzAuNCI+PC9yZWN0PjwvZGVmcz48cmVjdCB3aWR0aD0iMjM5IiBoZWlnaHQ9IjMzNSIgeD0iLTExOS41IiB5PSItMTY3LjUiIHJ4PSIxMiIgcnk9IjEyIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayI+PC9yZWN0Pjx1c2UgeGxpbms6aHJlZj0iI1hIMiIgc3Ryb2tlPSIjODhmIiBmaWxsPSIjRkZDIj48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNWSDIiIGhlaWdodD0iMzIiIHg9Ii0xMTQuNCIgeT0iLTE1NiI+PC91c2U+PHVzZSB4bGluazpocmVmPSIjU0gyIiBoZWlnaHQ9IjI2Ljc2OSIgeD0iLTExMS43ODQiIHk9Ii0xMTkiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSI3MCIgeD0iLTM1IiB5PSItMTMxLjIzNCI+PC91c2U+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSI+PHVzZSB4bGluazpocmVmPSIjVkgyIiBoZWlnaHQ9IjMyIiB4PSItMTE0LjQiIHk9Ii0xNTYiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSIyNi43NjkiIHg9Ii0xMTEuNzg0IiB5PSItMTE5Ij48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNTSDIiIGhlaWdodD0iNzAiIHg9Ii0zNSIgeT0iLTEzMS4yMzQiPjwvdXNlPjwvZz48L3N2Zz4='/></div>
<div class="card two hearts"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
Edit: If you do not want to use img you can put the img to invisible and then use the background image as the div would still have the dimensions of the img tag inside. Not a good solution, but it would work.

Learn flex or grid; both very useful for things like this.
Flex example:
html, body {
height: 100%;
margin: 0;
}
.card {
border: 1px black solid;
border-radius: 15px;
flex-grow: 1;
padding: 5px;
margin: 5px;
}
.container {
display: flex;
height: 100%;
}
<div class="container">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>

Get all children's with document.querySelector

I'm using Intersection Observer to make the content load when a insersection point is defined. I'm using it with a bootstrap 4 carousel, the intersection point is in the h1. The problem is that the script only catch the first h1, if the carousel goes to the second h1 when the user make the intersection on it, the slider don't appear, because the added class that show the content with an animation is applied only in the first div h1 parent content. So, I want to get all the h1, not only the first one. I tried to stop the carousel for intersection forever with the first h1, but i can't get to start it again when it displayed finally with the animation. You can see an example here, in the middle of the page.
// Instantiate a new Intersection Observer
let observer5 = new IntersectionObserver(onEntry5);
let test = document.querySelector('#carouselExampleControls3');
let element5 = document.querySelector(".test-h1");
observer5.observe(element5);
function onEntry5(entry5) {
if (entry5[0].isIntersecting) {
test.classList.add("active");
}
}
HTML
<div id="carouselExampleControls3" class="carousel slide test-slider" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active carousel-item-left">
<div class="container">
<div class="row">
<div class="banner col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mx-auto">
<img alt="Bootstrap Image Preview" src="img/_MG_6501-copia.jpg" class="img-thumbnail" style="padding-right: 200px;padding-bottom: 200px;border: 0px; ">
<h1 class="test-h1" style="z-index: 1000000;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
color: #c33e69;
font-size: 5em;
position: absolute;
right: 70px;
bottom: 60px;
width: 363px;">ESTA ES MI SEGUNDA CASA</h1>
</div>
</div>
</div> </div>
<div class="carousel-item carousel-item-next carousel-item-left">
<div class="container">
<div class="row">
<div class="banner col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mx-auto">
<img alt="Bootstrap Image Preview" src="https://www.eharmony.co.uk/dating-advice/wp-content/uploads/2011/04/profilephotos.jpg" class="img-thumbnail" style="padding-right: 200px;padding-bottom: 200px;border: 0px; ">
<h1 class="test-h1" style=" z-index: 1000000;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
color: #c33e69;
font-size: 5em;
position: absolute;
right: 70px;
bottom: 60px;
width: 363px;">ESTA ES MI SEGUNDA CASA</h1>
</div>
</div>
</div> </div>
</div>
</div>
CSS
#carouselExampleControls3 {opacity: 0; transition: 1.5s opacity;}
#carouselExampleControls3.active {opacity: 1; cursor: pointer;
animation: zoomin 1.5s alternate infinite;
animation-iteration-count: 1;
animation-fill-mode: forwards;}

Welcome to document.querySelectorAll()! Grab all elements that match the query then use a forEach loop to apply whatever functionality you want.
Resource: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
For your use case I would do something like this:
const carousels = document.querySelectorAll('.wrapper-carousel-thingy');
if (carousels) {
carousels.forEach((carousel) => {
const trigger = carousel.querySelector('.some-inner-trigger-element');
trigger.addEventListener('mouseenter', () => {
carousel.classList.add('active');
});
trigger.addEventListener('mouseleave', () => {
carousel.classList.remove('active');
});
});
}
.wrapper-carousel-thingy {
border: 2px solid black;
padding: 20px;
}
.wrapper-carousel-thingy.active {
border-color: red; /* border color change just an example of how you can update the parent element based on hover of interior element */
}
.some-inner-trigger-element:hover {
background: yellow; /* just to emphasize which element is the trigger */
}
<div class="wrapper-carousel-thingy class-that-makes-me-unique"> <!-- as many of these as you want -->
<div class="whatever-in-between">
<h1 class="some-inner-trigger-element">I am the trigger</h1>
</div>
</div>

JS: Iterate through divs

I have 5 div elements, all with class='item'.
Im catching them with: var x = document.getElementsByClassName("item");
Now I want to make disappear that div, which was mouseovered.
https://jsfiddle.net/LqsLbrco/1/
But it doesn't work as it supposed to do. Because all elements are disappearing, not only this which was hovered.
Edit: My point is that the modal div appear (the pink box) when the item div is hovered. Check out the new jsfiddle: https://jsfiddle.net/LqsLbrco/10/
There's a div behind the blue boxes, I want him to appear when the user hovers the blue box.

If you do it in jQuery, you could just do this.
Modified the markup to accommodate the requirements.
$(function() {
$(".container .item").bind("mouseover", function(event) {
$(event.target).find(".modal").show();
});
$(".container .modal").bind("mouseleave", function(event) {
$(event.target).hide();
})
});
.item {
height: 100px;
width: 100px;
background-color: blue;
display: inline-block;
margin: 5px;
}
.container {
display: inline-block;
}
.modal {
height: 100px;
width: 100px;
background-color: pink;
display: inline-block;
margin: 0px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>

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>

Javascript to slide invisible div from top of the window

So i've been trying to replicate the functionality of the How it works button of airbnb. I'm new to stackoverflow, so I don't know the policies to link the website.
What I have tried:
My HTML mockup
<div class="how-it-works">
<div class="container">
<div class="row">
<div class="col-lg-12">
<span class="pull-right">
<span class="glyphicon glyphicon-remove" ng-click="hideHowItWorks()"></span>
</span>
</div>
<div class="col-lg-12">
<div class="row">
<div class="col-lg-3">
<div class="hiw-container hiw-step-one"></div>
</div>
<div class="col-lg-3">
<div class="hiw-container hiw-step-two"></div>
</div>
<div class="col-lg-3">
<div class="hiw-container hiw-step-three"></div>
</div>
<div class="col-lg-3">
<div class="hiw-container hiw-step-four"></div>
</div>
</div>
</div>
</div>
</div>
<div class="main-class">
...some content....
</div>
My CSS:
.how-it-works{
position: absolute
width: 100%
top: -663px
padding-top: 40px
min-height: 663px
}
I'm using JQuery to slide the entire div down instead of using the standard slideDown procedure.
$('.btn').on('click', function(){
$('.how-it-works').css('height', $(window).height());
$('.how-it-works').animate({top: '0px'});
$('.main-class').animate({marginTop: '663px'});
})
If I use this method or the method of slideDown, the frame while sliding, stutters and gives an effect thats far from pleasing. How do I make the effect that's similar to the above mentioned website?

Slide an overlay on canvas from the top. This uses vanilla javascript and css animations. jQuery animations always seems jerky in my opinion.
var overlay = document.getElementById('overlay');
document.getElementById('open').onclick = function() {
overlay.style.top = 0;
}
document.getElementById('close').onclick = function() {
overlay.style.top = '-100%';
}
html, body {
height: 100%;
margin: 0;
}
#overlay {
background: red;
height: 100%;
width: 100%;
position: absolute;
top: -100%;
transition: top 1s ease-in-out;
}
<div id="overlay">
close
</div>
Open

Develop Reference

JavaScript is the programming language of the Web.

CSS + JS - overlay onmouseout child items issue - javascript

Related

How to display responsive 5 poker card images with correct aspect ratio?

Get all children's with document.querySelector

JS: Iterate through divs

How to set click event on all div with same class

Javascript to slide invisible div from top of the window

Categories

Resources