Display popup on click of a box - javascript

I have a website here. When you click on the team tab, it will take you to the team section.
I am trying to create a popup here.The same pop up should work on clicking any of the points boxes:
points box
Now I am getting the popup below the points box (see in the website)
Code involved (only related to team section to keep the problem relevant):
$(document).ready(function() {
$('.counter col_fourth a').on('click', function(e) {
e.preventDefault();
var _this = $(this);
var block = _this.attr('href');
$(".counter col_fourth").removeClass("active");
_this.parent().addClass("active");
$(".counter col_fourth").hide();
$(block).fadeIn();
});
/**
* Fade in the Popup
*/
$('.counter col_fourth').on('click', function() {
$('#popup').fadeIn();
});
});
body {
font-family: Arial;
padding: 25px;
background-color: #f5f5f5;
color: #808080;
text-align: center;
}
/*-=-=-=-=-=-=-=-=-=-=-=- */
/* Column Grids */
/*-=-=-=-=-=-=-=-=-=-=-=- */
.team-leader-box {
.col_half {
width: 49%;
}
.col_third {
width: 32%;
}
.col_fourth {
width: 23.5%;
}
.col_fifth {
width: 18.4%;
}
.col_sixth {
width: 15%;
}
.col_three_fourth {
width: 74.5%;
}
.col_twothird {
width: 66%;
}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth {
position: relative;
display: inline;
display: inline-block;
float: left;
margin-right: 2%;
margin-bottom: 20px;
}
.end {
margin-right: 0 !important;
}
/* Column Grids End */
.wrapper {
width: 980px;
margin: 30px auto;
position: relative;
}
.counter {
background-color: #808080;
padding: 10px 0;
border-radius: 5px;
}
.count-title {
font-size: 40px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
.count-text {
font-size: 13px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
.fa-2x {
margin: 0 auto;
float: none;
display: table;
color: #4ad1e5;
}
}
.counter.col_fourth {
background-color: #fff;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="main-section team" id="team">
<div class="container">
<h2>team</h2>
<h6>Take a closer look into our amazing team. We won’t bite.</h6>
<div class="team-leader-block clearfix">
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-03s">
<div class="team-leader-shadow">
</div>
<img src="img/team-leader-pic1.jpg" alt="">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="50" data-speed="1500"></h2>
<p class="count-text ">points</p>
<p1>click to know</p1>
</div>
</div>
</div>
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-06s">
<div class="team-leader-shadow">
</div>
<img src="img/team-leader-pic2.jpg" alt="">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="30" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-09s">
<div class="team-leader-shadow">
</div>
<img src="img/team-leader-pic3.jpg" alt="">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="10" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
</div>
<div class="popup" id="popup">
<div class="popup__inner">
<header class="popup__header">
<a onclick="$('#popup').fadeOut()" id="popup-exit">esc</a>
</header>
<img src="http://www.fillmurray.com/124/124" alt="Bart Veneman" width="200" height="200" class="profile__image" />
<section class="profile__details">
<ul class="profile__stats">
<li>
<h3 class="profile_stat__heading">Gold</h3>
<div class="profile_stat__number">17</div>
</li>
<li>
<h3 class="profile_stat__heading">Silver</h3>
<div class="profile_stat__number">8</div>
</li>
<li>
<h3 class="profile_stat__heading">Bronze</h3>
<div class="profile_stat__number">21</div>
</li>
</ul>
<h2 class="profile__name" id="popup-name"></h2>
<h2 class="profile__name">Designation: </h2>
<h2 class="profile__name">Reporting Manager: </h2>
<h2 class="profile__name">Email: </h2>
<h2 class="profile__name">Date of Join: </h2>
<h2 class="profile__name" id="popup-score"></h2>
<h2 class="profile__name">Latest Week Points: </h2>
<h2 class="profile__name">Overall Points: </h2>
<h2 class="profile__name">Medals Rewarded:</h2>
<ul class="social">
<li><i class="fa fa-github"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-bitbucket"></i></li>
<li class="location">
<i class="fa fa-map-marker"></i>
<span>Bangalore, IN</span>
</li>
</ul>
</section>
</div>
</div>
</div>
</section>
I think I am making some mistake with the JavaScript.
I just want to display the same popup on clicking the points boxes as in pic above.

Related

Why is my website's grid collapsing the first time it's loaded?

I'm sorry for dropping so much code here, but I've been playing with this for over a week and I just can't figure it out.
So I am working on my personal website, and the problem is that the images in the the body's grid system overlap sometimes on the first load of the site. If you refresh it, it seems to work ok (most of the time). You can try yourself: tylerteacher.com . The strange thing is that the site works in the compatibility viewers in chrome and firefox.
I have tried adding margins and using the 'space-between' function in the css. I have double checked the html to make sure everything is properly linked to the css page, and I have also played with Javascript page and the slides per view functions.
I really appreciate the help!
let toggle = document.querySelector("#header .toggle-button");
let collapse = document.querySelectorAll("#header .collapse");
toggle.addEventListener('click' , function(){
collapse.forEach(col => col.classList.toggle("collapse-toggle"));
})
// with masonry
new Masonry("#posts .grid", {
itemSelector : '.grid-item',
gutter : 20
});
// swiper libray initialization
new Swiper('.swiper-container', {
direction : 'horizontal',
loop : true,
slidesPerView : 6,
autoplay : {
delay : 0
},
// responsive breakpoints
breakpoints : {
'#0' : {
slidesPerView : 2
},
// 888px
'#1.00' : {
slidesPerView : 3
},
// 1110px
'#1.25' : {
slidesPerView : 4
},
// 1330px
'#1.50' : {
slidesPerView: 5
}
}
})
// Sticky Navigation
window.onscroll = function(){ myFunction()};
// get the current value
let navbar = document.getElementById("header");
// get the navbar position
let sticky = navbar.offsetTop;
// sticky function
function myFunction(){
if(window.pageYOffset >= sticky){
navbar.classList.add("sticky");
}else{
navbar.classList.remove("sticky");
}
}
#import url('https://fonts.googleapis.com/css2?family=DM+Sans&family=Poppins&family=Roboto&display=swap');
/* root styling */
:root{
--light : #f8f9fa;
--secondary: #adb5bd;
--dark: #343a40;
--primary-color: #f15bb5;
--secondary-color: #2ec4b6;
--border : #e9ecef;
}
body{
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
* > *{
box-sizing: border-box;
}
/* global styling */
.text-light{
color: var(--light);
}
.text-secondary{
color: var(--secondary);
}
.text-dark{
color: var(--dark);
}
.text-primary{
color: var(--primary-color);
}
.bg-light{
background-color: var(--light);
}
.container{
max-width: 1200px;
padding: 0 15px;
margin: auto;
}
.img-fluid{
width: 100%;
}
.text-title{
font-family: 'DM Sans', sans-serif;
font-weight: bold;
}
.secondary-title{
font-family: 'Poppins' , sans-serif;
}
.display-1{
font-size: 22px;
}
.display-2{
font-size: 16px;
}
.display-3{
font-size: 14px;
}
.text-center{
text-align: center;
}
.text-right{
text-align: right;
}
.btn{
padding: 15px 20px;
border: none;
}
.btn-primary{
border-radius: 4px;
background-color: var(--secondary-color);
}
.object-fit{
max-height: 120px;
height: 80px;
width: 80px;
object-fit: fill;
justify-content: space-between;
}
.d-flex{
display: flex;
}
.flex-wrap{
flex-wrap: wrap;
}
.justify-content-center{
justify-content: center;
}
.justify-content-between{
justify-content: space-between;
}
.mt-2{
margin-top: 10px;
}
.mt-3{
margin-top: 50px;
}
.mb-3{
margin-bottom: 30px;
}
.m-0{
margin: 0;
}
.px-1{
padding-left: 5px;
padding-right: 5px;
}
.px-2{
padding-left: 20px;
padding-right: 20px;
}
.py-1{
padding-top: 10px;
padding-bottom: 10px;
}
.py-2{
padding-top: 20px;
padding-bottom: 20px;
}
.py-3{
padding-top: 30px;
padding-bottom: 30px;
}
.thumbnail{
width: 100%;
height: 500px;
object-fit: cover;
}
.rounded{
height: 120px;
width: 120px;
object-fit: fill;
border-radius: 99px;
}
.shadow{
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
/* section styling */
/* ------- Navigation Menu ---------- */
.navbar{
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
}
.nav-brand{
font-family: 'DM Sans', sans-serif;
font-weight: bold;
align-self: center;
font-size: 32px;
}
.collapse{
align-self: center;
}
.nav-link{
font-size: 18px;
margin: 12px;
color: var(--dark);
font-family: 'Poppins', sans-serif;
}
.nav-link:hover{
color: var(--primary-color);
}
.search-box{
display: inline;
border-right: 1px solid var(--secondary);
padding-right: 12px;
margin-right: 10px;
}
.toggle-button{
font-size: 21px;
background-color: transparent;
border: none;
position: absolute;
right: 0;
margin: 8px 10px;
display: none;
}
.toggle-button:focus{
outline: none;
}
/* ------- .Navigation Menu ---------- */
/* ----------- Main Section ---------- */
#site-main{
margin-top: 4em;
}
#posts{
margin-bottom: 5em;
}
.grid{
margin: 1 auto;
row-gap: 20px;
}
.grid .grid-item{
width: calc(33.3333% - 20px);
margin-bottom: 3em;
}
/* ----------- .Main Section ---------- */
/* ----------- sticky ------- */
.sticky{
position: fixed;
top: 0;
z-index: 99;
width: 100%;
}
.sticky + .content{
padding-top: 60px;
}
/* ----------- .sticky ------- */
/* Media Query */
.row{
display: flex;
}
.col-3{
flex: 0 0 33.3333%;
max-width: 33.3333%;
padding-right: 35px;
}
.col-8{
flex: 0 0 70%;
max-width: 70%;
}
.col-4{
flex: 0 0 30%;
max-width: 30%;
}
#media (max-width : 1024px){
.row{
flex-wrap: wrap;
}
.col-3{
flex: 0 0 50%;
max-width: 50%;
}
.col-8{
flex: 0 0 100%;
max-width: 100%;
}
.col-4{
flex: 0 0 100%;
max-width: 100%;
}
}
#media (max-width : 992px){
.navbar{
flex-direction: column;
}
#site-main{
margin-top: 14em;
}
}
#media (max-width : 768px){
.grid .grid-item{
width: calc(50% - 20px);
border-top: 1px solid #dfdfdf;
}
.col-3{
flex: 0 0 100%;
max-width: calc(100% - 50px);
padding-top: 40px;
}
}
#media (max-width : 574px){
.toggle-button{
display: initial;
}
.collapse{
max-height: 0;
overflow: hidden;
transition: all 0.8s cubic-bezier(0.51,-0.15, 0, 0.98);
}
.collapse .nav-link{
display: block;
text-align: center;
}
.search-box{
border-right: none;
}
.collapse-toggle{
max-height: 500px;
}
.grid .grid-item{
width: calc(100% - 20px);
border-top: 1px solid #dfdfdf;
}
#site-main{
margin-top: 6em;
justify-content: space-around;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TylerTeacher</title>
<!-- font awesome icons cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
crossorigin="anonymous" />
<!-- swiper slider css file -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css"
integrity="sha512-m3pAvNriL711NMlhkZHK6K4Tu2/RjtrzyjxZU8mlAbxxoDoURy27KajN1LGTLeEEPvaN12mKAgSCrYEwF9y0jA=="
crossorigin="anonymous" />
<!-- custom style.css file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header -->
<header id="header" class="shadow bg-light">
<nav class="container navbar">
<a href="/index.html" class="nav-brand text-dark">
TylerTeacher
</a>
<!-- toggle button -->
<button class="toggle-button">
<span><i class="fas fa-bars"></i></span>
</button>
<!-- collapse on toggle button click -->
<div class="collapse">
<ul class="navbar-nav">
Home
Resources
Classes
Testimonials
Contact
</ul>
</div>
<!-- collapse on toggle button click -->
<div class="collapse">
<ul class="navbar-nav">
<div class="search-box">
<i class="fas fa-search"></i>
</div>
<i class="fab fa-facebook-f"></i>
<a href="#" class="https://www.youtube.com/channel/UCDN9p8e-UAaPxtzfoVJnLMw"><i
class="fab fa-youtube"></i></a>
<a href="https://www.instagram.com/tyler.s.teacher/" class="nav-link"><i
class="fab fa-instagram"></i></a>
<i class="fab fa-tiktok"></i>
</ul>
</div>
</nav>
</header>
<!-- .Header -->
<!--main site-->
<main id="site-main">
<!-- Blog Post Section -->
<section id="posts">
<div class="container">
<div class="grid">
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin:auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/inspirational-word_EXZZBXPUS6.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Welcome to TylerTeacher.com
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around; ">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/grandmother-1822560_960_720.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Why online education is the future
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto" >
<div class="overflow-img">
<a href="#">
<img src="./Assets/inspirational-word_EXZZBXPUS6.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
How to overcome language anxiety
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/laptop-red-cup-coffee-notebook-pen-satchel-freephotoscc-thumb-2.jpg"
class="img-fluid" alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Podcasts are a great tool for language learners
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto" >
<div class="overflow-img">
<a href="#">
<img src="./Assets/man_studying_online.jpg" class="img-fluid"
alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
What makes some people better at learning languages?
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/negative-space-picnic-city-river-sunset-ben-duchac-thumb-1.jpg"
class="img-fluid" alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Tips for becoming a more confident communicator in English
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/listen-1702648_960_720.jpg" class="img-fluid"
alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
How listening can make you better at speaking English
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/Man_studying.jpg" class="img-fluid" alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
How to use online classes effectively
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin:auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/education_tiles.jpg" class="img-fluid"
alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Coming soon
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
</div>
<div class="text-center">
<button class="btn btn-primary secondary-title text-light">Load More Posts...</button>
</div>
</div>
</section>
<!-- .Blog Post Section -->
<!-- masonry libray for horizontal grid -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ=="
crossorigin="anonymous"></script>
<!-- swiper slider cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js"
integrity="sha512-1LlEYE0qExJ/GUfAJ0k2K2fB5sIvMv/q6ueo3syohvQ3ElWDQVSMUOf39cxaDWHtNu7M6lF6ZC1H6A1m3SvheA=="
crossorigin="anonymous"></script>
<!-- custom javascript main.js file -->
<script src="main.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>

It is caused by the Masonry. You have to let the page finish loading before you initialize it. This worked for me
window.addEventListener('load', function(){
new Masonry("#posts .grid", {
itemSelector : '.grid-item',
gutter : 20
});
// remove preload if added
});
Optional: Whiles the page loads, you can add a preloader to hide the page's disorganised stucture.

What you're experiencing is due to the Masonry script calculating the dimensions of the grid based on its content. While loading the page your images don't have a width and height because the browser doesn't know what they look like. Masonry doesn't wait and will render your grid anyway.
A fix for this is to let the browser know in advance what the dimensions of the image will be. You can do this by adding a width and height attribute to your img tag containing the width and height in pixels.
<img src="your-image.jpg" class="img-fluid" width="480" height="720" alt="" />
Alternatively you could wait for all images in your grid to load before initializing the Masonry script.
// Loads a single image.
const loadImage = src => new Promise(resolve => {
const image = new Image();
image.onload = () => resolve();
image.src = src;
});
// Get the container with all images.
// Loop over each image and wait for all of them to load.
async function allImagesLoaded(selector) {
const container = document.querySelector(selector);
if (container === null) {
return;
}
const images = container.querySelectorAll('img');
return Promise.all([...images].map(
src => loadImage(src)
));
}
// Load all images inside #posts .grid.
allImagesLoaded('#posts .grid').then(() => {
new Masonry("#posts .grid", {
itemSelector : '.grid-item',
gutter : 20
});
});

Javascript Botton navigation is overlapping side nav

I have a navigation bar which is located at the bottom of the screen. on the bottom navigation I have a button called Add, once clicked it will open a modal. I had to use the Z-index style so that when the modal is open It's not possible to open the Top navigation menu.
I'm trying to figure out how to stop the Bottom navigation overlapping the Top navigation side menu once it is active.
// Materialize Initialization Nav Drop Down.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
// ----------------Models Materialize Framework----------------
document.addEventListener('DOMContentLoaded', function() {
let elems = document.querySelectorAll('.modal');
let instances = M.Modal.init(elems);
});
.nav-padding{
margin-top: 60px;
}
nav {
position: fixed;
z-index: 1001;
}
.trashbin {
padding-right: 30px !important;
padding-left: 30px !important;
}
/* */
body {
margin: 0 0 55px 0;
}
.bottom_nav {
position: fixed;
bottom: 0;
width: 100%;
height: 55px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
background-color: #ffffff;
display: flex;
overflow-x: auto;
z-index: 1002;
}
.nav__link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
min-width: 50px;
overflow: hidden;
white-space: nowrap;
font-family: sans-serif;
font-size: 13px;
color: #444444;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.1s ease-in-out;
}
.nav__link:hover {
background-color: #eeeeee;
}
.nav__link--active {
color: #009578;
}
.nav__icon {
font-size: 18px;
}
<!-- Google icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<nav class="nav-wraper black">
<ul>
<li class="right"><a href="#" class="white-text">Sign In
</a>
</li>
</ul>
<!-- Side Navagation -->
<ul id="slide-out" class="sidenav">
<li>
<li><a><i class="material-icons">fitness_center</i>
<p class="">Templates</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Bill</p>
</a></li>
<li></li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>&</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect ">
<p>Ben</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>The</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Flower​Pot</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Men</p>
</a></li>
<li>
<div class="divider"></div>
</li>
</ul>
<i class="material-icons">menu</i>
</nav>
<footer class="bottom_nav">
<a href="#" class="nav__link">
<i class="material-icons nav__icon">dashboard</i>
<span class="nav__text">Dashboard</span>
</a>
<a href="#" class="nav__link nav__link--active">
<i class="material-icons nav__icon">person</i>
<span class="nav__text">Profile</span>
</a>
<a href="#add_exercise_column" class="nav__link modal-trigger">
<i class="material-icons nav__icon">add_box</i>
<span class="nav__text">Add</span>
</a>
<div class="modal modal-position" id="add_exercise_column">
<div class="valign-wrapper center-align">
<div class="row">
<form class="col s12 valign-wrapper center-align">
<div class="input-field">
<div class="remove_label">
<label><h6>Add</h6></label>
</div>
<div class="removebtn-padding">
<input id="delete" class="del-exercise-btn modal-close btn black" type="submit" value="Submit">
</div>
</div>
</form>
</div>
</div>
</div>
<a href="#" class="nav__link">
<i class="material-icons nav__icon">lock</i>
<span class="nav__text">Privacy</span>
</a>
<a href="#" class="nav__link">
<i class="material-icons nav__icon">settings</i>
<span class="nav__text">Settings</span>
</a>
</nav>
</footer>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- app.JavaScript -->
<script src="app.js"></script>

Probably just need to change:
z-index: 1002;
to
z-index: 1000;
and move the modal outside of the footer.
// Materialize Initialization Nav Drop Down.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
// ----------------Models Materialize Framework----------------
document.addEventListener('DOMContentLoaded', function() {
let elems = document.querySelectorAll('.modal');
let instances = M.Modal.init(elems);
});
.nav-padding{
margin-top: 60px;
}
nav {
position: fixed;
z-index: 1001;
}
.trashbin {
padding-right: 30px !important;
padding-left: 30px !important;
}
/* */
body {
margin: 0 0 55px 0;
}
.bottom_nav {
position: fixed;
bottom: 0;
width: 100%;
height: 55px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
background-color: #ffffff;
display: flex;
overflow-x: auto;
z-index: 1000;
}
.nav__link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
min-width: 50px;
overflow: hidden;
white-space: nowrap;
font-family: sans-serif;
font-size: 13px;
color: #444444;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.1s ease-in-out;
}
.nav__link:hover {
background-color: #eeeeee;
}
.nav__link--active {
color: #009578;
}
.nav__icon {
font-size: 18px;
}
<!-- Google icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<nav class="nav-wraper black">
<ul>
<li class="right"><a href="#" class="white-text">Sign In
</a>
</li>
</ul>
<!-- Side Navagation -->
<ul id="slide-out" class="sidenav">
<li>
<li><a><i class="material-icons">fitness_center</i>
<p class="">Templates</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Bill</p>
</a></li>
<li></li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>&</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect ">
<p>Ben</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>The</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Flower​Pot</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Men</p>
</a></li>
<li>
<div class="divider"></div>
</li>
</ul>
<i class="material-icons">menu</i>
</nav>
<footer class="bottom_nav">
<a href="#" class="nav__link">
<i class="material-icons nav__icon">dashboard</i>
<span class="nav__text">Dashboard</span>
</a>
<a href="#" class="nav__link nav__link--active">
<i class="material-icons nav__icon">person</i>
<span class="nav__text">Profile</span>
</a>
<a href="#add_exercise_column" class="nav__link modal-trigger">
<i class="material-icons nav__icon">add_box</i>
<span class="nav__text">Add</span>
</a>
<a href="#" class="nav__link">
<i class="material-icons nav__icon">lock</i>
<span class="nav__text">Privacy</span>
</a>
<a href="#" class="nav__link">
<i class="material-icons nav__icon">settings</i>
<span class="nav__text">Settings</span>
</a>
</nav>
</footer>
<div class="modal modal-position" id="add_exercise_column">
<div class="valign-wrapper center-align">
<div class="row">
<form class="col s12 valign-wrapper center-align">
<div class="input-field">
<div class="remove_label">
<label><h6>Add</h6></label>
</div>
<div class="removebtn-padding">
<input id="delete" class="del-exercise-btn modal-close btn black" type="submit" value="Submit">
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- app.JavaScript -->
<script src="app.js"></script>

Open one div at a time and close all others which are opened jquery

Trying to implement a show/hide description box.
If the user clicks on the first showDesc link it opens it's description box.
Then if the user clicks the second showDesc link it opens it's description box and should close all the others which are opened.
it below :
Below is my code:
$(".showDesc").click(function () {
$(".descContainer").toggleClass("show");
});
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
display: none;
line-height: 24px;
background-color: #fdfdfd;
}
.descContainer.show {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
display: block;
line-height: 24px;
background-color: #fdfdfd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<section>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
</section>
</main>

Your issue is because you're changing the class on all the .descContainer elements at once, not just the one related to the clicked .showDesc.
To fix this you need to use DOM traversal to get the closest('.feedContainer) then next() to get the element you want to toggle, like this:
$(".showDesc").click(function() {
var $target = $(this).closest('.feedContainer').next(".descContainer").toggleClass("show");
$(".descContainer").not($target).removeClass('show'); // hide other open elements
});
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0, 0, 0, .08);
display: none;
line-height: 24px;
background-color: #fdfdfd;
}
.descContainer.show {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0, 0, 0, .08);
display: block;
line-height: 24px;
background-color: #fdfdfd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<section>
<article class="feedBox mainSmooth">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer"></div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
<article class="feedBox mainSmooth">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer"></div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
</section>
</main>

You don't need jQuery for that, you don't even need javascript for that. Setting ids and internals links on your HTML + using the :target CSS pseudo-class will do.
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
line-height: 24px;
display:none;
}
.descContainer:target {
display:block;
}
<main>
<section>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc" href="#1">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer" id="1">
<div>Description Text</div>
</div>
</article>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc" href="#2">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer" id="2">
<div>Description Text</div>
</div>
</article>
</section>
</main>

How can I add <li> to <ul> for chat application?

function addMessageToBody(chat)
{
var htmlSTR = "";
htmlSTR = "<p>another paragaraph</p>";
//htmlSTR += "<li class="left"><span class="username">Doruk</span>";
//alert(htmlSTR);
//$("#message-lists").html(main);
}
<body background="Orange.png">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://91.234.35.26/iwiki-admin/v1.0.0/admin/js/jquery.nicescroll.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-white border-top-green">
<div class="panel-body chat">
<div class="row chat-wrapper">
<div class="col-md-4">
<div class="compose-area">
</div>
<div>
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 550px;">
<div class="chat-list-wrapper" style="overflow-y: auto; width: auto; height: 550px;">
<ul class="chat-list" id="olasimesajlar">
<li class="text-center">
Olası Mesajlar </li>
<li>Liste Numara 2 </li>
<li>Liste Numara 3 </li>
<li>Liste Numara 4</li>
<li>Liste Numara 5</li>
<li>Liste Numara 6</li>
<li>Liste Numara 7</li>
<li>Liste Numara 8</li>
<li>Liste Numara 9</li>
<li>Liste Numara 10</li>
<li>Liste Numara 11</li>
<li>Liste Numara 12</li>
<li>Liste Numara 13</li>
<li>Liste Numara 14</li>
</ul>
</div><div class="slimScrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 478.639px; background: rgb(0, 0, 0);"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div></div>
</div>
</div>
<div class="col-md-8">
<div>
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 452px;">
<div class="message-list-wrapper" style="overflow: hidden; width: auto; height: 452px;">
<ul class="message-list" id="message-lists">
<li class="text-center">
<a href="javascript:void(0);" class="btn btn-default" >Load More Messages</a>
<!-- <button id="loadmoremessages" onclick="loadMoreMessages()">Load More Messages</button> -->
</li>
<li class="left">
<span class="username">Ozan</span>
<small class="timestamp">
<i class="fa fa-clock-o"></i>3 mins ago
</small>
<span class="avatar available tooltips" data-toggle="tooltip " data-placement="right" data-original-title="Yanique Robinson">
<img src="https://pbs.twimg.com/profile_images/597340997157298176/2XUqrs3R.jpg" alt="avatar" class="img-circle">
</span>
<div class="body">
<div class="message well well-sm" id="mesajleft">
..........
</div>
<div class="clearfix"></div>
<div class="message well well-sm">
<p>.... .........</p>
</div>
</div>
</li>
<li class="right" id="rightside">
<span class="username">Rasim Ozan</span>
<small class="timestamp">
<i class="fa fa-clock-o"></i>3 secs ago
</small>
<span class="avatar tooltips" data-toggle="tooltip " data-placement="left" data-original-title="Kevin Mckoy">
<img src="https://pbs.twimg.com/profile_images/597340997157298176/2XUqrs3R.jpg" alt="avatar" class="img-circle">
</span>
<div class="body">
<div id="mesajright" class="message well well-sm">
Czczczczczczczczccz
</div>
</div>
</li>
</ul>
</div><div class="slimScrollBar" style="width: 7px; position: absolute; top: 265px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 187.092px; background: rgb(0, 0, 0);"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div></div>
<div class="compose-box">
<div class="row">
<div class="col-xs-12 mg-btm-10">
<textarea name="messageinput" id="btn-input" class="form-control input-sm" placeholder="Type your message here..."></textarea>
</div>
<div class="col-xs-4" id="deneme">
</div>
<div class="col-xs-12">
<button id="sendbutton" onclick="myFunction()" class="btn btn-green btn-sm pull-right">
<i class="fa fa-location-arrow"></i> Send
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have this HTML and JavaScript code. This is a kind of chat application. So every time when button pressed I want to add messages to screen. My css is complex so I want to do that as passing HTML code into it via JavaScript. LİKE
<li class="left">
<span class="username">Ozan</span>
<small class="timestamp">
<i class="fa fa-clock-o"></i>3 mins ago
</small>
<span class="avatar available tooltips" data-toggle="tooltip " data-placement="right" data-original-title="Yanique Robinson">
<img src="https://pbs.twimg.com/profile_images/597340997157298176/2XUqrs3R.jpg" alt="avatar" class="img-circle">
</span>
<div class="body">
<div class="message well well-sm" id="mesajleft">
..........
</div>
<div class="clearfix"></div>
<div class="message well well-sm">
<p>.... .........</p>
</div>
</div>
</li>
adding/append this HTML code via JavaScript dynamically to ul section.
How can I do that ?

You are using jQuery, so you can simply do it like
$("#message-lists").append(htmlSTR);
But if the html of your message rows (li-s) are big and difficult you should rather do it with JSON responses and build the message rows on client side with js (based on the received data). Also I would recommend using some javascript template engine like Mustache or Handlebars.

One option is to use innerHTML:
var element = document.getElementById('message-lists');
element.innerHTML = element.innerHTML + "<p>another paragaraph</p><li
class='left'><span class='username'>Doruk</span>";

Add an event listener for your button.
In your event handler function, append your htmlSTR. This gets run every time your button gets clicked.
As you seem to be using jQuery, you can do this:
$(function(){
var htmlSTR = "<li><p>another paragaraph</p></li>";
var $ul = $('#olasimesajlar');
var $button = $('#id_of_your_button');
$button.click(buttonClickHandler);
function buttonClickHandler(){
$ul.append(htmlSTR);
}
});

Javascript/Jquery - Target closest relevant block to show content in a stream of similar cards

I have a set of cards. Here is the DEMO.
even if i only put 3 cards in the demo i have an infinite number if cards in the real app.
When you hover on the first card, and then click on the "plus" icon that appears, a block of info covers the whole card and show info specific to this card.
What I don't manage to do is: when a user clicks on the "plus "icon of any card, like the second, third ...the user should see the info of this card appear (just like it does for the first card).
Constraint:
I could indeed put a number for each card like id "#card345", "#card567" and so on, and use javascript to put this variable id inside the javascript script to only target this id number.
For performance reasons, I would like not to do it this way, that is to say not use any VARIABLE such as the id of the card inside the javascript code. and only use a jquery/javascript code to target the "closest" block to show. I heard of "closest" or next() but I don't manage to do it. I'm open to any css or javascript/jquery solution.
Code
HTML
<div class="center jumbotron">
<div id="deal-zone">
<ul class="cards-list">
<li class="card 353">
<div class="card-content">
<div id="info-overlay">
<div class="close-overlay">
<a>close</a>
</div>
some info some longer info and this is really long now i wonder how long it can get
</div>
<div class="card-image">
<figure>
<a href="/operations/thisiscool">
<img style="opacity: 1; display: block;" id="HPImageBanner_353" src="http://vp-eu.scene7.com/is/image/vpeu/0/00_54093_FR_brandvisualnbrandvisualfr">
<!-- operation card's short details on 2-column view-->
</a>
<figcaption id="tek" class="card-short-info">
<a class="moreInfo" id="BtnHomeOperationExpand_5331345" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i id="plusbutton" class="glyphicon glyphicon-plus detail-icon_353"></i>
</a>
<div class="short-info-content">
<a id="dateSales_53120" class="dateSales _saleLink" href="/operations/la-semaine-de-la-beaute-a-paris-111">Jusqu'au <span class="outstandingwords">12 novembrex</span></a>
</div>
</figcaption>
</figure>
</div>
</div>
<div id="collapseTwo" class="collapse left-aligned" role="tabpanel" aria-labelledby="headingTwo">
<div class="infoSales">
<a id="info" class="moreInfo"></a>
this is the big details i want
</div>
</div>
</li>
<!-- cards in the stream of deal -->
<li class="card 354">
<div class="card-content">
<div id="info-overlay">
<div class="close-overlay">
<a>close</a>
</div>
some info some longer info and this is really long now i wonder how long it can get
</div>
<div class="card-image">
<figure>
<a href="/operations/thisiscool">
<img style="opacity: 1; display: block;" id="HPImageBanner_353" src="http://vp-eu.scene7.com/is/image/vpeu/5/00_51449_FR_brandvisualnbrandvisualfr">
<!-- operation card's short details on 2-column view-->
</a>
<figcaption id="tek" class="card-short-info">
<a class="moreInfo" id="BtnHomeOperationExpand_5331345" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i id="plusbutton" class="glyphicon glyphicon-plus detail-icon_353"></i>
</a>
<div class="short-info-content">
<a id="dateSales_53120" class="dateSales _saleLink" href="/operations/la-semaine-de-la-beaute-a-paris-111">Jusqu'au <span class="outstandingwords">12 novembrex</span></a>
</div>
</figcaption>
</figure>
</div>
</div>
<div id="collapseTwo" class="collapse left-aligned" role="tabpanel" aria-labelledby="headingTwo">
<div class="infoSales">
<a id="info" class="moreInfo"></a>
this is the big details for the second card number i want
</div>
</div>
</li>
<li class="card 355">
<div class="card-content">
<div id="info-overlay">
<div class="close-overlay">
<a>close</a>
</div>
some info some longer info and this is really long now i wonder how long it can get
</div>
<div class="card-image">
<figure>
<a href="/operations/thisiscool">
<img style="opacity: 1; display: block;" id="HPImageBanner_353" src="http://vp-eu.scene7.com/is/image/vpeu/1/00_53818_FR_brandvisualnbrandvisualfr">
<!-- operation card's short details on 2-column view-->
</a>
<figcaption id="tek" class="card-short-info">
<a class="moreInfo" id="BtnHomeOperationExpand_5331345" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i id="plusbutton" class="glyphicon glyphicon-plus detail-icon_353"></i>
</a>
<div class="short-info-content">
<a id="dateSales_53120" class="dateSales _saleLink" href="/operations/la-semaine-de-la-beaute-a-paris-111">Jusqu'au <span class="outstandingwords">12 novembrex</span></a>
</div>
</figcaption>
</figure>
</div>
</div>
<div id="collapseTwo" class="collapse left-aligned" role="tabpanel" aria-labelledby="headingTwo">
<div class="infoSales">
<a id="info" class="moreInfo"></a>
this is the big details for the THIRd card i want
</div>
</div>
</li>
</ul>
</div>
</div>
CSS
#info-overlay {
display:none;
z-index:999;
position:absolute;
height:100%;
width:100%;
background-color:grey;
}
.close-overlay {
float:right;
padding:5px;
}
#deal-zone {
margin-top: 20px;
}
#deal-zone ul {
padding: 0;
}
.cards-list {
list-style: none;
display: block;
height: auto;
}
.card {
width: 47%;
display: inline-block;
margin: 0 1% 21px 1%;
}
.card-content {
background: #fff;
position: relative;
}
.card-image {
vertical-align: top;
position: relative;
line-height: 0;
overflow: hidden;
padding-bottom: 33.88%;
}
.card-image img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
color: red;
}
.container .jumbotron {
padding-left: 0px;
padding-right: 0px;
}
.card-short-info {
width: 100%;
height: 13%;
position: absolute;
color: #464650;
padding: 0px 1em;
font-size: 0.8em;
background-color: grey;
bottom:0;
display: none;
}
.moreInfo {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
float: right;
font-size: 16px;
line-height: normal;
color: #464650;
}
.short-info-content {
position:relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: left;
}
.card-short-info a.dateSales {
color: #464650;
}
.card-long-info {
width: 100%;
height: 100%;
position: absolute;
color: #464650;
padding: 0px 1em;
font-size: 0.8em;
background-color: grey;
bottom:0;
display: none;
}
JS
$(".card-image").hoverIntent({
sensitivity:100,//sensitivity threshold (must be 1 or higher)
interval:100,//milliseconds for onMouseOver polling interval
timeout:100,//milliseconds delay before onMouseOut
over:function(){
$('.card-short-info',this).slideToggle(100);
},
out:function(){
$('.card-short-info',this).slideToggle(300);
}
});
$(".close-overlay").click(function(){
$("#info-overlay").hide();
});
$("#plusbutton").click(function(){
$("#info-overlay").show();
});

ID of an element must be unique, so use info-overlay and plusbutton as classes
$(".card-image").hoverIntent({
sensitivity: 100, //sensitivity threshold (must be 1 or higher)
interval: 100, //milliseconds for onMouseOver polling interval
timeout: 100, //milliseconds delay before onMouseOut
over: function() {
$('.card-short-info', this).slideToggle(100);
},
out: function() {
$('.card-short-info', this).slideToggle(300);
}
});
$(".close-overlay").click(function(e) {
e.preventDefault();
$(this).closest('.card-content').find(".info-overlay").hide();
});
$(".plusbutton").click(function(e) {
e.preventDefault();
$(this).closest('.card-content').find(".info-overlay").show();
});
.info-overlay {
display: none;
z-index: 999;
position: absolute;
height: 100%;
width: 100%;
background-color: grey;
}
.close-overlay {
float: right;
padding: 5px;
}
#deal-zone {
margin-top: 20px;
}
#deal-zone ul {
padding: 0;
}
.cards-list {
list-style: none;
display: block;
height: auto;
}
.card {
width: 47%;
display: inline-block;
margin: 0 1% 21px 1%;
}
.card-content {
background: #fff;
position: relative;
}
.card-image {
vertical-align: top;
position: relative;
line-height: 0;
overflow: hidden;
padding-bottom: 33.88%;
}
.card-image img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
color: red;
}
.container .jumbotron {
padding-left: 0px;
padding-right: 0px;
}
.card-short-info {
width: 100%;
height: 13%;
position: absolute;
color: #464650;
padding: 0px 1em;
font-size: 0.8em;
background-color: grey;
bottom: 0;
display: none;
}
.moreInfo {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
float: right;
font-size: 16px;
line-height: normal;
color: #464650;
}
.short-info-content {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: left;
}
.card-short-info a.dateSales {
color: #464650;
}
.card-long-info {
width: 100%;
height: 100%;
position: absolute;
color: #464650;
padding: 0px 1em;
font-size: 0.8em;
background-color: grey;
bottom: 0;
display: none;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/1.8.1/jquery.hoverIntent.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
<div class="center jumbotron">
<div id="deal-zone">
<ul class="cards-list">
<li class="card 353">
<div class="card-content">
<div class="info-overlay">
<div class="close-overlay">
<a>close</a>
</div>
some info some longer info and this is really long now i wonder how long it can get
</div>
<div class="card-image">
<figure>
<a href="/operations/thisiscool">
<img style="opacity: 1; display: block;" id="HPImageBanner_353" src="http://vp-eu.scene7.com/is/image/vpeu/0/00_54093_FR_brandvisualnbrandvisualfr">
<!-- operation card's short details on 2-column view-->
</a>
<figcaption id="tek" class="card-short-info">
<a class="moreInfo" id="BtnHomeOperationExpand_5331345" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i class="plusbutton glyphicon glyphicon-plus detail-icon_353"></i>
</a>
<div class="short-info-content">
<a id="dateSales_53120" class="dateSales _saleLink" href="/operations/la-semaine-de-la-beaute-a-paris-111">Jusqu'au <span class="outstandingwords">12 novembrex</span></a>
</div>
</figcaption>
</figure>
</div>
</div>
<div id="collapseTwo" class="collapse left-aligned" role="tabpanel" aria-labelledby="headingTwo">
<div class="infoSales">
<a id="info" class="moreInfo"></a>
this is the big details i want
</div>
</div>
</li>
<!-- cards in the stream of deal -->
<li class="card 354">
<div class="card-content">
<div class="info-overlay">
<div class="close-overlay">
<a>close</a>
</div>
some info some longer info and this is really long now i wonder how long it can get
</div>
<div class="card-image">
<figure>
<a href="/operations/thisiscool">
<img style="opacity: 1; display: block;" id="HPImageBanner_353" src="http://vp-eu.scene7.com/is/image/vpeu/5/00_51449_FR_brandvisualnbrandvisualfr">
<!-- operation card's short details on 2-column view-->
</a>
<figcaption id="tek" class="card-short-info">
<a class="moreInfo" id="BtnHomeOperationExpand_5331345" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i class="plusbutton glyphicon glyphicon-plus detail-icon_353"></i>
</a>
<div class="short-info-content">
<a id="dateSales_53120" class="dateSales _saleLink" href="/operations/la-semaine-de-la-beaute-a-paris-111">Jusqu'au <span class="outstandingwords">12 novembrex</span></a>
</div>
</figcaption>
</figure>
</div>
</div>
<div id="collapseTwo" class="collapse left-aligned" role="tabpanel" aria-labelledby="headingTwo">
<div class="infoSales">
<a id="info" class="moreInfo"></a>
this is the big details for the second card number i want
</div>
</div>
</li>
<li class="card 355">
<div class="card-content">
<div class="info-overlay">
<div class="close-overlay">
<a>close</a>
</div>
some info some longer info and this is really long now i wonder how long it can get
</div>
<div class="card-image">
<figure>
<a href="/operations/thisiscool">
<img style="opacity: 1; display: block;" id="HPImageBanner_353" src="http://vp-eu.scene7.com/is/image/vpeu/1/00_53818_FR_brandvisualnbrandvisualfr">
<!-- operation card's short details on 2-column view-->
</a>
<figcaption id="tek" class="card-short-info">
<a class="moreInfo" id="BtnHomeOperationExpand_5331345" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i class="plusbutton glyphicon glyphicon-plus detail-icon_353"></i>
</a>
<div class="short-info-content">
<a id="dateSales_53120" class="dateSales _saleLink" href="/operations/la-semaine-de-la-beaute-a-paris-111">Jusqu'au <span class="outstandingwords">12 novembrex</span></a>
</div>
</figcaption>
</figure>
</div>
</div>
<div id="collapseTwo" class="collapse left-aligned" role="tabpanel" aria-labelledby="headingTwo">
<div class="infoSales">
<a id="info" class="moreInfo"></a>
this is the big details for the THIRd card i want
</div>
</div>
</li>
</ul>
</div>
</div>

Why don't use the closest() function?
Here's the docs.
Something like
$("#plusbutton").click(function(e){
$(e.target).closest('.card').find('.info-overlay').show();
}
And beside the code, I would strongly suggest you not to use IDS, use classes instead for elements names, since they're not unique.
Also, for the opposite reason, do not use the card ID as a class: use an ID here (if you really need the card ID). And remember that you shouldn't use only the number. Better something like: id="card-353"
Take a look:
https://jsfiddle.net/58Ltod03/4/
I've just edited your fiddle, if I understand your question, now it works properly.
Still, please clean up your html code :)

Categories

Resources