Develop Reference

Div's Content Autoscaling with another Div Content

I would like to avoid this CSS Autoscaling bug that leaves huge blanks for long movie names. Would someone help me how to solve it? Here is my DIV and CSS code.
HTML:
<div class="col-md-2 w3l-movie-gride-agile">
<a href="single.html" class="hvr-shutter-out-horizontal"><img src="imagen/malefica.jpg" class="img-responsive" />
<div class="w3l-action-icon"><i class="fa fa-play-circle" aria-hidden="true"></i></div>
</a>
<div class="mid-1 agileits_w3layouts_mid_1_home">
<div class="w3l-movie-text">
<h6>Maléfica: La dueña de Mal</h6>
</div>
<div class="mid-2 agile_mid_2_home">
<p>2019</p>
<div class="block-stars">
<ul class="w3l-ratings">
<li><i class="fa fa-star" aria-hidden="true"></i>7.4</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="ribben">
<p>NEW</p>
</div>
</div>
CSS:
.w3l-movie-gride-agile {
text-align: center;
box-shadow: 0px 0px 10px rgb(255 255 255 / 35%);
margin-right: 0%;
margin-bottom: 3%;
position: relative;
padding-left: 0;
}
.col-md-2 {
width: 16.66666667%;
}

You can use flexbox to solve the issue
.w3l-movie-gride-agile{ display:flex; justify-content:space-around; align-items:space-between; width:100%; height:500px}

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>

Animate script and styling issue in jQuery

I have an issue with a jQuery script or maybe its combination with styling, but if you look at this jsfiddle: http://jsfiddle.net/mdLtvrpk/3/
Here is my script:
$('.holdingbox').hover(function() {
var rightbox = $('.rightbox', this);
var leftbox = $('.leftbox', this);
if (rightbox.hasClass('active')) {
rightbox.stop().animate({
width: '0px',
}, 500).removeClass('active');
leftbox.stop().delay(500).animate({
width: '100%',
left: '0px'
}, 1000).removeClass('hover');
} else {
rightbox.stop().delay(500).animate({
width: '80px',
float:'right'
}, 500).addClass('active');
leftbox.stop().animate({
left: '-90px',
width: '90%'
}, 500).addClass('hover');
}
});
})
And you can find the css and html through the jsfiddle link, I just figured it would be easier for anyone viewing just to see the code in action altogether.
You'll see that when you hover over each "Shipment Created" notification block, you'll see that it slides over and allows a "button" on the right to appear, but the problem is after the "button" grows past a certain width, it moves beneath the "Shipment Created" block, rather than next to it.
How can I get this to work next to each other, rather than opening a block beneath it?

If you change the widths of your 2 divs, you will find that it works. In your else statement, set the width of the rightbox to 19% and the leftbox to 79%. You can also remove the position of the leftbox ie left:-90px; To make it behave a little better, I also set the leftbox width in the if statement to 90%.
$(document).ready(function() {
$('.holdingbox').hover(function() {
var rightbox = $('.rightbox', this);
var leftbox = $('.leftbox', this);
if (rightbox.hasClass('active')) {
rightbox.stop().animate({
width: '0px',
}, 500).removeClass('active');
leftbox.stop().delay(500).animate({
width: '90%',
left: '0px'
}, 1000).removeClass('hover');
} else {
rightbox.stop().delay(500).animate({
width: '19%',
float: 'right'
}, 500).addClass('active');
leftbox.stop().animate({
width: '79%'
}, 500).addClass('hover');
}
});
})
ul.menu {
list-style-type: none;
}
.holdingbox {
position: relative;
top: 0;
width: 100%;
height: 50px;
}
.holdingbox .leftbox {
position: relative;
width: 90%;
top: 0;
left: 0;
display: inline-block;
padding: 1px;
}
.holdingbox .rightbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 0;
height: 42px;
vertical-align: top;
margin-right: 0;
background-color: lightgray;
}
.holdingbox .rightbox .content1 {
width: 100px;
position: absolute;
height: 40px;
left: 0;
top: 0;
right: 0;
padding-left: 1px;
}
.leftbox.hover {
width: 200px;
display: inline-block;
}
.rightbox.active {
float: none;
display: inline-block;
}
.rightbox {
float: right;
}
.holdingbox .rightbox .content1 {
width: 100% !important;
}
.leftbox.hover {
background-color: #F3F3F3;
}
//Menu Edit
.menu li a div img {
margin: auto 10px auto auto;
width: 40px;
height: 40px;
}
.menu li a h4 {
padding: 0;
margin: 0 0 0 45px;
color: #444444;
font-size: 14px;
position: relative;
}
.menu li a p {
margin: 0 0 0 45px;
font-size: 11px;
color: #888888;
}
.menu li a h4 small {
color: #999999;
font-size: 10px;
position: absolute;
top: 0;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="holdingbox">
<!-- start message -->
<!-- <a href="#">/shipments/i/{'url_string']-->
<div class="leftbox" style="width: 100%; left: 0px; overflow: hidden;">
<a href="http://192.168.1.178:8000/notifications/4d798673-fe2e-4294-81dd-49969df0dff6">
<div class="pull-left">
<!-- User Image -->
<img src="/images/clipboard.png" class="img-circle" alt="Shipment">
</div>
<!-- Message title and timestamp -->
<h4>
Shipment Created
<small><i class="fa fa-clock-o"></i> 2 hours ago</small>
</h4>
<!-- The message -->
<p>Pro Number - 214439</p>
</a>
</div>
<div class="rightbox" style="width: 0px; overflow: hidden;">
<div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
</div>
</div>
</li>
<li class="holdingbox">
<!-- start message -->
<!-- <a href="#">/shipments/i/{'url_string']-->
<div class="leftbox" style="width: 100%; left: 0px; overflow: hidden;">
<a href="http://192.168.1.178:8000/notifications/c7e7add5-eaa2-4b3c-84fe-062322567d5f">
<div class="pull-left">
<!-- User Image -->
<img src="/images/clipboard.png" class="img-circle" alt="Shipment">
</div>
<!-- Message title and timestamp -->
<h4>
Shipment Created
<small><i class="fa fa-clock-o"></i> 2 weeks ago</small>
</h4>
<!-- The message -->
<p>Pro Number - 2102000003</p>
</a>
</div>
<div class="rightbox" style="width: 0px; overflow: hidden;">
<div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
</div>
</div>
</li>
<li class="holdingbox">
<!-- start message -->
<!-- <a href="#">/shipments/i/{'url_string']-->
<div class="leftbox" style="overflow: hidden; width: 100%; left: 0px;">
<a href="http://192.168.1.178:8000/notifications/1c578226-f735-4d62-be19-7deab4c08dbe">
<div class="pull-left">
<!-- User Image -->
<img src="/images/clipboard.png" class="img-circle" alt="Shipment">
</div>
<!-- Message title and timestamp -->
<h4>
Shipment Created
<small><i class="fa fa-clock-o"></i> 2 weeks ago</small>
</h4>
<!-- The message -->
<p>Pro Number - 2102000002</p>
</a>
</div>
<div class="rightbox" style="width: 0px; overflow: hidden;">
<div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
</div>
</div>
</li>
<li class="holdingbox">
<!-- start message -->
<!-- <a href="#">/shipments/i/{'url_string']-->
<div class="leftbox" style="overflow: hidden; width: 100%; left: 0px;">
<a href="http://192.168.1.178:8000/notifications/c975030e-64e9-4481-8fd0-0004242515d8">
<div class="pull-left">
<!-- User Image -->
<img src="/images/clipboard.png" class="img-circle" alt="Shipment">
</div>
<!-- Message title and timestamp -->
<h4>
Shipment Created
<small><i class="fa fa-clock-o"></i> 2 weeks ago</small>
</h4>
<!-- The message -->
<p>Pro Number - 2102000001</p>
</a>
</div>
<div class="rightbox" style="width: 0px;">
<div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
</div>
</div>
</li>
<li class="holdingbox">
<!-- start message -->
<!-- <a href="#">/shipments/i/{'url_string']-->
<div class="leftbox" style="overflow: hidden; width: 100%; left: 0px;">
<a href="http://192.168.1.178:8000/notifications/6721dd8c-4f45-422f-81d0-80fa4fe128f9">
<div class="pull-left">
<!-- User Image -->
<img src="/images/clipboard.png" class="img-circle" alt="Shipment">
</div>
<!-- Message title and timestamp -->
<h4>
Shipment Created
<small><i class="fa fa-clock-o"></i> 3 weeks ago</small>
</h4>
<!-- The message -->
<p>Pro Number - 212222</p>
</a>
</div>
<div class="rightbox" style="width: 0px;">
<div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
</div>
</div>
</li>
<li class="holdingbox">
<!-- start message -->
<!-- <a href="#">/shipments/i/{'url_string']-->
<div class="leftbox">
<a href="http://192.168.1.178:8000/notifications/48780be4-52af-4278-b67a-6544eda95aae">
<div class="pull-left">
<!-- User Image -->
<img src="/images/clipboard.png" class="img-circle" alt="Shipment">
</div>
<!-- Message title and timestamp -->
<h4>
Shipment Created
<small><i class="fa fa-clock-o"></i> 4 weeks ago</small>
</h4>
<!-- The message -->
<p>Pro Number - 2010</p>
</a>
</div>
<div class="rightbox">
<div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
</div>
</div>
</li>
<li class="holdingbox">
<!-- start message -->
<!-- <a href="#">/shipments/i/{'url_string']-->
<div class="leftbox">
<a href="http://192.168.1.178:8000/notifications/ca2583eb-5146-471d-b285-5178c35ab0a1">
<div class="pull-left">
<!-- User Image -->
<img src="/images/clipboard.png" class="img-circle" alt="Shipment">
</div>
<!-- Message title and timestamp -->
<h4>
Shipment Created
<small><i class="fa fa-clock-o"></i> 4 weeks ago</small>
</h4>
<!-- The message -->
<p>Pro Number - 210200000</p>
</a>
</div>
<div class="rightbox">
<div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
</div>
</div>
</li>
<li class="holdingbox">
<!-- start message -->
<!-- <a href="#">/shipments/i/{'url_string']-->
<div class="leftbox">
<a href="http://192.168.1.178:8000/notifications/1e23de34-d699-4e3a-9110-e02ab5ce000b">
<div class="pull-left">
<!-- User Image -->
<img src="/images/clipboard.png" class="img-circle" alt="Shipment">
</div>
<!-- Message title and timestamp -->
<h4>
Shipment Created
<small><i class="fa fa-clock-o"></i> 4 weeks ago</small>
</h4>
<!-- The message -->
<p>Pro Number - 250006</p>
</a>
</div>
<div class="rightbox">
<div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
</div>
</div>
</li>
<li class="holdingbox">
<!-- start message -->
<!-- <a href="#">/shipments/i/{'url_string']-->
<div class="leftbox">
<a href="http://192.168.1.178:8000/notifications/da74371c-2aa2-45ef-9b5d-28210c3816bb">
<div class="pull-left">
<!-- User Image -->
<img src="/images/clipboard.png" class="img-circle" alt="Shipment">
</div>
<!-- Message title and timestamp -->
<h4>
Shipment Created
<small><i class="fa fa-clock-o"></i> 1 month ago</small>
</h4>
<!-- The message -->
<p>Pro Number - 214050</p>
</a>
</div>
<div class="rightbox">
<div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
</div>
</div>
</li>
<!-- end notification -->
</ul>

Image override another div when resizing to mobile view in browser

I am facing a problem with the image size and position when resizing to mobile view in the browser.
.extension {
display: table;
padding: 50 px 0 px 50 px;
width: 100 % ;
height: auto;
color: #fff;
background-color: #558C89;
background-size: cover;
font-size: 22px;
font-weight: 200;
margin: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
# extension img {
width: 350 px;
height: 275 px;
position: absolute;
}
footer {
padding: 50 px 0;
height: auto;
}
<section id="extension" class="extension">
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-8">
<h1>Download Our Extension</h1>
<p>extension
</p>
Download Extension
</div>
<div class="col-6 col-md-4">
<img src="img/iMacricket.png">
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Footer -->
<footer id="contact">
<div class="container">
<div class="row">
<div class="span9">
<div class="title-page">
<h2 class="title">Get in Touch</h2>
<hr class="small">
<h3 class="title-description">We are continually<br/>
</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-md-8">
<form id="contact-form" class="contact-form" action="#">
<p class="contact-name">
<input id="contact_name" type="text" placeholder="Full Name" value="" name="name" />
</p>
<p class="contact-email">
<input id="contact_email" type="text" placeholder="Email Address" value="" name="email" />
</p>
<p class="contact-message">
<textarea id="contact_message" placeholder="Your Message" name="message" rows="15" cols="40"></textarea>
</p>
<p class="contact-submit">
<a id="contact-submit" class="btn btn-lg btn-dark" href="#">Send Your Email</a>
</p>
</form>
</div>
<div class="col-6 col-md-4 text-center">
<h2>Contact Us</h2>
<hr class="small">
<ul class="list-unstyled">
<li><i class="fa fa-envelope fa-fw"></i> test#gmail.com
</li>
</ul>
<br>
<ul class="list-inline">
<li>
<i class="fa fa-facebook fa-fw fa-3x"></i>
</li>
<li>
<i class="fa fa-twitter fa-fw fa-3x"></i>
</li>
</ul>
<hr class="small">
</div>
</div>
<br/>
<p class="text-muted">Copyright © 2017 - Designed &</p>
</div>
<a id="to-top" href="#top" class="btn btn-dark btn-lg"><i class="fa fa-chevron-up fa-fw fa-1x"></i></a>
</footer>
I was trying to set the height:auto, and resize the image but without success.

Add class img to img attribute and add this style
<div class="col-6 col-md-4">
<div class="img">
<img src="img/iMacricket.png">
</div>
</div>
Style
.img{
width: 100%;
height: 200px;
}
.img img{
max-width: 100%;
max-height: 100%;
}

You have a specific width for the image. Consider changing the width property to max-width: 350px; and height to max-height: 275px; and replace width and height to 100% , which will be fluid for any device.
#extension img {
width: 100%;
max-width: 350px;
height: 100%;
max-height: 275px;
position: absolute;
}

Display popup on click of a box

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.