Develop Reference

Image Slider not go to next or prev item

(I face a problem when i click on prev chevron the slider works for once and stops after the next click)
I am a beginner in JavaScript and I am trying to build my own slider code. at first when you click on the next chevron the code is working well but when I click on the prev chevron the code is stopped after the second click.
$(document).ready(function(){
var currentImg = $('.slider-img .active');
var nextImg = currentImg.next();
var prevImg = currentImg.prev();
//slide to right
$('.next').on('click', function(){
if(!currentImg.is(':last-child')){
currentImg.delay(1000).removeClass('active');
nextImg.addClass('active');
}else{
currentImg.delay(1000).removeClass('active');
$('.slider-img div').eq(0).addClass('active');
}
});
//Slide to left
$('.prev').on('click', function(){
if(!currentImg.is(':first-child')){
currentImg.delay(1000).removeClass('active');
prevtImg.addClass('active');
}else{
currentImg.delay(1000).removeClass('active');
$('.slider-img div:last-child').addClass('active');
}
});
});
there is the full code on codepen bellow

Because you declare your variable outside of click event, when document is ready currentImg is first element, after you click, currentImg need to detect again because right now it's second element, so for avoid this issue, move your variable inside your click handler:
$('.next').on('click', function(){
var currentImg = $('.slider-img .active');
var nextImg = currentImg.next();
var prevImg = currentImg.prev();
if(!currentImg.is(':last-child')){
currentImg.delay(1000).removeClass('active');
nextImg.addClass('active');
}else{
currentImg.delay(1000).removeClass('active');
$('.slider-img div').eq(0).addClass('active');
}
});
An improved version is:
$(document).ready(function() {
var firstChild = $('.slider-img div.item').eq(0);
var lastChild = $('.slider-img div.item:last-child');
//slide to right
$('.next').on('click', function() {
var currentImg = $('.slider-img .active');
var nextImg = currentImg.next();
if (!currentImg.is(':last-child')) {
currentImg.delay(1000).removeClass('active')
nextImg.addClass('active')
} else {
currentImg.delay(1000).removeClass('active')
firstChild.addClass('active');
}
});
//Slide to left
$('.prev').on('click', function() {
var currentImg = $('.item.active');
var prevImg = currentImg.prev();
if (currentImg.is(':first-child')) {
currentImg.delay(1000).removeClass('active')
lastChild.addClass('active')
} else {
currentImg.delay(1000).removeClass('active')
prevImg.addClass('active');
}
});
});
* {
padding: 0;
margin: 0;
}
.slider {
position: relative;
width: 600px;
height: 500px;
margin: 30px auto 0;
}
.slider ul {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
z-index: 3;
}
.slider ul li {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #cccccc;
list-style: none;
margin: 0 10px;
display: inline-block;
cursor: pointer;
}
.slider ul li.active {
background-color: #000;
}
.slider-img div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
}
.slider-img div.active {
opacity: 1;
}
.slider-img img {
max-width: 100%;
height: 100%;
}
.slider p {
position: absolute;
z-index: 2;
top: 50%;
color: #cccccc;
padding: 20px;
cursor: pointer;
}
.slider .next {
right: 0;
}
.item1 {
background-color: red
}
.item2 {
background-color: green
}
.item3 {
background-color: purple
}
.item4 {
background-color: yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="slider">
<ul>
<li class="dot active" onclick="currentSlide(1)"></li>
<li class="dot" onclick="currentSlide(2)"></li>
<li class="dot" onclick="currentSlide(3)"></li>
<li class="dot" onclick="currentSlide(4)"></li>
</ul>
<div class="slider-img">
<div class="item item1 active"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>
<p class="next">
>
</p>
<p class="prev">
< </p>
</section>

The problem is that you do not set the variable to the new value once the prev or next button is clicked.
That is how it works, even though your approach is a bit complicated:
(Also I recommend to use let instead of var for your variable declaration)
$(document).ready(function(){
let currentImg = $('.slider-img .active');
let nextImg = currentImg.next();
let prevImg = currentImg.prev();
//slide to right
$('.next').on('click', function(){
if(!currentImg.is(':last-child')){
currentImg.delay(1000).removeClass('active');
nextImg.addClass('active');
currentImg = nextImg;
nextImg = currentImg.next();
}else{
currentImg.delay(1000).removeClass('active');
$('.slider-img div').eq(0).addClass('active');
currentImg = $('.slider-img .active');
nextImg = currentImg.next();
}
});
$('.prev').on('click', function(){
if(!currentImg.is(':first-child')){
currentImg.delay(1000).removeClass('active');
prevImg.addClass('active');
currentImg = prevImg;
prevImg = currentImg.prev();
}else{
currentImg.delay(1000).removeClass('active');
$('.slider-img div:last-child').addClass('active');
currentImg = $('.slider-img .active');
prevImg = currentImg.prev();
}
});
});
*{
padding: 0;
margin: 0;
}
.slider{
position: relative;
width:600px;
height: 500px;
margin: 30px auto 0;
}
.slider ul{
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
z-index: 3;
}
.slider ul li{
width:12px;
height: 12px;
border-radius: 50%;
background-color: #cccccc;
list-style: none;
margin:0 10px;
display: inline-block;
cursor: pointer;
}
.slider ul li.active{
background-color: #000;
}
.slider-img div{
position: absolute;
top:0;
left:0;
bottom: 0;
right: 0;
opacity: 0;
}
.slider-img div.active{
opacity: 1;
}
.slider-img img{
max-width: 100%;
height: 100%;
}
.slider p{
position: absolute;
z-index: 2;
top: 50%;
color: #cccccc;
padding: 20px;
cursor: pointer;
}
.slider .next{
right: 0;
}
.item1{background-color:red}
.item2{background-color:green}
.item3{background-color:purple}
.item4{background-color:yellow}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<section class="slider">
<ul>
<li class="dot active" onclick="currentSlide(1)"></li>
<li class="dot" onclick="currentSlide(2)"></li>
<li class="dot" onclick="currentSlide(3)"></li>
<li class="dot" onclick="currentSlide(4)"></li>
</ul>
<div class="slider-img">
<div class="item item1 active"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div> </div>
<p class="next">
<i class="fas fa-chevron-right">next</i>
</p>
<p class="prev">
<i class="fas fa-chevron-left">prev</i>
</p>
</section>

Custom jQuery carousel transition bug

I am working on a custom image carousel, with jQuery and CSS. I am trying to avoid using a multiple-features carousel plugin download from Github, for performance reasons.
My aim is to obtain a vertical transition, like the one on www.pcgarage.ro, but without using the plugin they (might) have used. For this purpose, I have written:
var $elm = $('.slider'),
$slidesContainer = $elm.find('.slider-container'),
slides = $slidesContainer.children('a'),
slidesCount = slides.length,
slideHeight = $(slides[0]).find('img').outerHeight(false);
//Set slide height
$(slides).css('height', slideHeight);
// Append bullets
for (var i = 0; i < slidesCount; i++) {
var bullets = '' + i + '';
if (i == 0) {
// active bullet
var bullets = '' + i + '';
// active slide
$(slides[0]).addClass('active');
}
$('.slider-nav').append(bullets);
}
// Set (initial) z-index for each slide
var setZindex = function() {
for (var i = 0; i < slidesCount; i++) {
$(slides[i]).css('z-index', slidesCount - i);
}
}
setZindex();
$('.slider-nav a').on('click', function() {
activeIdx = $(this).text();
$('.slider-nav a').removeClass('activeSlide');
$(this).addClass('activeSlide');
setActiveSlide();
slideUpDown();
});
var setActiveSlide = function() {
$(slides).removeClass('active');
$(slides[activeIdx]).addClass('active');
}
var slideUpDown = function() {
// set top property for all the slides
$(slides).css('top', slideHeight);
// then animate to the next slide
$(slides[activeIdx]).animate({
'top': 0
});
}
body {
margin: 0;
padding: 0;
}
body * {
box-sizing: border-box;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.slider {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
.slider .slider-nav {
position: absolute;
left: 10px;
bottom: 10px;
z-index: 30;
}
.slider .slider-nav a {
display: block;
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 3px;
text-indent: -9999px;
background: #fff;
}
.slider .slider-nav a.activeSlide {
background: transparent;
border: 2px solid #fff;
}
.slider .slider-container {
width: 100%;
text-align: center;
}
.slider .slider-container a {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.slider .slider-container img {
transform: translateX(-50%);
margin-left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider slider-homepage">
<div class="slider-nav"></div>
<div class="slider-container">
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</a>
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</a>
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=north" alt="">
</a>
</div>
</div>
</div>
The problem with my code is the (obvious) white screen that accompanies every transition, whose cause I do not understand.
Where is my mistake?

I have added some variable and function to fix this issue kindly check the script.
var $elm = $('.slider'),
$slidesContainer = $elm.find('.slider-container'),
slides = $slidesContainer.children('a'),
slidesCount = slides.length,
slideHeight = $(slides[0]).find('img').outerHeight(false);
//Set slide height
$(slides).css('height', slideHeight);
// Append bullets
for (var i = 0; i < slidesCount; i++) {
var bullets = '' + i + '';
if (i == 0) {
// active bullet
var bullets = '' + i + '';
// active slide
$(slides[0]).addClass('active');
}
$('.slider-nav').append(bullets);
}
// Set (initial) z-index for each slide
var setZindex = function () {
for (var i = 0; i < slidesCount; i++) {
$(slides[i]).css('z-index', slidesCount - i);
}
}
setZindex();
var displayImageBeforeClick = null;
$('.slider-nav a').on('click', function () {
displayImageBeforeClick = $(".slider-container .active");
activeIdx = $(this).text();
if($(slides[activeIdx]).hasClass("active")){ return false; }
$('.slider-nav a').removeClass('activeSlide');
$(this).addClass('activeSlide');
setActiveSlide();
slideUpDown();
});
var setActiveSlide = function () {
$(slides).removeClass('active');
$(slides[activeIdx]).addClass('active');
}
var slideUpDown = function () {
// set top property for all the slides
$(slides).not(displayImageBeforeClick).css('top', slideHeight);
// then animate to the next slide
$(slides[activeIdx]).animate({
'top': 0
});
$(displayImageBeforeClick).animate({
'top': "-100%"
});
}
body {
margin: 0;
padding: 0;
}
body * {
box-sizing: border-box;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.slider {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
.slider .slider-nav {
position: absolute;
left: 10px;
bottom: 10px;
z-index: 30;
}
.slider .slider-nav a {
display: block;
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 3px;
text-indent: -9999px;
background: #fff;
}
.slider .slider-nav a.activeSlide {
background: transparent;
border: 2px solid #fff;
}
.slider .slider-container {
width: 100%;
text-align: center;
}
.slider .slider-container a {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.slider .slider-container img {
transform: translateX(-50%);
margin-left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider slider-homepage">
<div class="slider-nav"></div>
<div class="slider-container">
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=east" alt="">
</a>
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=south" alt="">
</a>
<a href="#">
<img src="https://picsum.photos/1200/300/?gravity=north" alt="">
</a>
</div>
</div>
</div>

Add Transition to your ".slider .slider-container a" with a transition-duration and transition-timing-function.... for reference you can see https://www.w3schools.com/css/css3_transitions.asp

Fade in a large amount of objects sequentially with JavaScript or jQuery?

I am trying to get 900 dots to fade in one after the other. My current code generates them from one single div and then assigns a number class to them.
$(document).ready(function(){
function generate() {
var circle = $('.circle');
var container = $('#container');
for (var i = 0; i <= 900; i++) {
circle.clone().attr('class', 'circle ' + i).appendTo(container);
}
}
generate();
});
<style>
#container {
width: 1250px;
margin:0 auto;
max-width:1770px;
height: 670px;
overflow:hidden;
background-color:pink;
position:relative;
}
.circle {
border-radius: 50%;
width: 10px;
height: 10px;
background-color:#8AB5DC;
margin:10px;
float:left;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div id="container">
<div class="circle">
</div>
</div>

Does this work for you:
$(document).ready(function () {
function generate() {
var duration = 400;
var delayFactor = 40;
var circle = $('.circle');
var container = $('#container');
for (var i = 0; i <= 900; i++) {
circle.clone().attr('class', 'circle ' + i).appendTo(container).hide();
}
$('.circle').each(function (index) {
$(this).delay(index * delayFactor).fadeIn(duration);
});
}
generate();
});
#container {
width: 1250px;
margin:0 auto;
max-width:1770px;
height: 670px;
overflow:hidden;
background-color:pink;
position:relative;
}
.circle {
border-radius: 50%;
width: 10px;
height: 10px;
background-color:#8AB5DC;
margin:10px;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="container">
<div class="circle"></div>
</div>
Play with the duration and delayFactor values. Hope this helps.

Cant Move my image to the right using jquery(Image Slider)

Image Slider Problem
actually i am a beginner in jquery.My aim is to create a brilliant image slider.I already create image slider using jquery from lot of tutorials.
code part
slider.js
$(document).ready(function(){
$(".slider li:first-child").addClass("active");
setTimeout(autoAddClass, 5000);
$('.next').click(function() {
nextslide();
});
$('.previous').click(function() {
previousslide();
});
});
function nextslide()
{
$('.slider li:first-child').hide('slide', {direction: 'left'}, 1000);
//$('.slider li:first-child').fadeOut().next().fadeIn().end().appendTo('.slider');
}
function previousslide(){
$('.slider li:first-child').fadeOut();
$('.slider li:last-child').prependTo('.slider').fadeOut();
$('.slider li:first-child').fadeIn();
setTimeout(autoAddClass, 5000);
}
function autoAddClass(){
var next = $(".active").removeClass("active").next();
if(next.length)
$(next).addClass('active');
else
$('.slider li:first-child').addClass('active');
setTimeout(autoAddClass, 5000);
}
*{
margin: 0;
padding: 0;
}
.full_width{
/*display: inline-block;*/
display: block;
width: 100%;
}
.full_width.language_header{
height: 50px;
background-color:#000;
/*margin-bottom: -5px;*/
}
.full_width.slider_header{
height: 600px;
background-color:#fff;
/*margin-bottom: -5px;*/
overflow: hidden;
}
.main_content{
/*display: inline-block;*/
display: block;
width:100%;
float:left;
}
.wrapper{
margin: 0 auto;
max-width: 1125px;
width: 100%;
}
.main_slider{
width: 100%;
float: left;
}
.active{
display: block;
}
ul{
list-style: none;
}
li{
display: block;
display: none;
}
.previous{
color: #000;
}
.next{
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="full_width slider_header">
<div class="wrapper">
<div class="main_content">
<div class="main_slider">
Previous
Next
<ul class="slider">
<li><img height="100%" width="100%" alt="#Welcome" src="img/pic1.jpg"></li>
<li><img height="100%" width="100%" alt="#Welcome" src="img/pic3.jpg"></li>
<li><img height="100%" width="100%" alt="#Welcome" src="img/pic2.jpg"></li>
<li><img height="100%" width="100%" alt="#Welcome" src="img/pic4.jpg"></li>
<li><img height="100%" width="100%" alt="#Welcome" src="img/pic5.jpg"></li>
</ul>
</div>
The problem is when i click the next pervious button(from screen shot) the 1st image will move on to right and the second one is load. i the current it doesn't happen please help.

So here is an example of what you can do.
I simplified you html. You don't need that many classes for a Jquery slider.
Simply what i did is this:
This is where all the magic happens:
.slider img {
transition: left 1s;
}
This makes it flow from the left to the right.
Left can only be used with position and is also set.
.slider img {
position: absolute;
}
The animation happens when we set the css propert in Jquery:
$active.css('left', wid);
Dont get confused by the wid its just a measurement: var wid = $active.width();
Now with previous button!
last edit: Its now a slidable div with a heading you can edit the div hover you would like.
$(".slider .slide:first-child").addClass("active");
//setInterval(nextslide, 5000);
$('.next').click(function () {
nextslide();
});
$('.previous').click(function () {
previousslide();
});
function nextslide() {
var $active = $('.slider .active');
var wid = $active.width();
$active.css('left', wid);
var $next;
if ($active.next().length != 0)
$next = $active.next();
else
$next = $('.slider .slide').first()
$next.addClass("next")
setTimeout(function () {
$next.addClass('active');
$next.removeClass("next");
$active.removeClass('active');
$active.css('left', 0);
}, 1000);
}
function previousslide() {
var $active = $('.slider .active');
var $previous;
if ($active.prev().length != 0) {
$previous = $active.prev();
} else
$previous = $('.slider .slide').last();
var wid = $previous.width();
$previous.css('left', wid);
setTimeout(function () {
$active.removeClass("active");
$active.addClass("previous");
$previous.addClass('active');
$previous.css('left', 0);
}, 1000);
setTimeout(function () {
$active.removeClass("previous");
}, 2000);
}
* {
margin: 0;
padding: 0;
}
.slider .slide {
transition: left 1s;
position: absolute;
height: 100%;
width: 100%;
left: 0;
background-color: white;
}
.slide img {
max-width: 100%;
}
.slider .next {
z-index: 98;
}
.slider .previous {
z-index: 98;
}
.slider .active {
z-index: 99;
}
.slider {
position: relative;
height: 400px;
width: 400px;
overflow: hidden;
border: solid black 2px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<div class="btn-group">
<button class="previous">previus</button>
<button class="next">Next</button>
</div>
<div class="slider">
<div class="slide">
<h4>Now with text and kittens!</h4>
<img src="https://www.math.ku.edu/~wsanders/Kittens/new%20kittens/Cute-little-kittens-550x365.jpg" />
</div>
<div class="slide">
<h4>I hope this helps you out</h4>
<img src="http://maxcdn.thedesigninspiration.com/wp-content/uploads/2012/08/Cuddling-Kittens-002.jpg" />
</div>
<div class="slide">
<h4>Its not so hard to modify the code. You should really try it yourself.</h4>
<img src="https://tyrannyoftradition.files.wordpress.com/2012/05/cutest-kitten-hat-ever-13727-1238540322-17.jpg" />
</div>
</div>
</main>

How to make the code that is workable three pop-up boxes for one pop-up box only?

I'm following code which is showing the pop-up boxes at the bottom of screen when user clicks on a name of user (the user list is appearing on top right side of your screen.)
<!doctype html>
<html>
<head>
<title>Facebook Style Popup Design</title>
<style>
#media only screen and (max-width : 540px)
{
.chat-sidebar
{
display: none !important;
}
.chat-popup
{
display: none !important;
}
}
body
{
background-color: #e9eaed;
}
.chat-sidebar
{
width: 200px;
position: fixed;
height: 100%;
right: 0px;
top: 0px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid rgba(29, 49, 91, .3);
}
.sidebar-name
{
padding-left: 10px;
padding-right: 10px;
margin-bottom: 4px;
font-size: 12px;
}
.sidebar-name span
{
padding-left: 5px;
}
.sidebar-name a
{
display: block;
height: 100%;
text-decoration: none;
color: inherit;
}
.sidebar-name:hover
{
background-color:#e1e2e5;
}
.sidebar-name img
{
width: 32px;
height: 32px;
vertical-align:middle;
}
.popup-box
{
display: none;
position: fixed;
bottom: 0px;
right: 220px;
height: 285px;
background-color: rgb(237, 239, 244);
width: 300px;
border: 1px solid rgba(29, 49, 91, .3);
}
.popup-box .popup-head
{
background-color: #6d84b4;
padding: 5px;
color: white;
font-weight: bold;
font-size: 14px;
clear: both;
}
.popup-box .popup-head .popup-head-left
{
float: left;
}
.popup-box .popup-head .popup-head-right
{
float: right;
opacity: 0.5;
}
.popup-box .popup-head .popup-head-right a
{
text-decoration: none;
color: inherit;
}
.popup-box .popup-messages
{
height: 100%;
overflow-y: scroll;
}
#carbonads {
max-width: 300px;
background: #f8f8f8;
}
.carbon-text {
display: block;
width: 130px;
}
.carbon-poweredby {
float: right;
}
.carbon-text {
padding: 8px 0;
}
#carbonads {
padding: 15px;
border: 1px solid #ccc;
}
.carbon-text {
font-size: 12px;
color: #333333;
text-decoration: none;
}
.carbon-poweredby {
font-size: 75%;
text-decoration: none;
}
#carbonads {
position: fixed;
top: 5px;
left: 5px;
}
</style>
<script>
//this function can remove a array element.
Array.remove = function(array, from, to) {
var rest = array.slice((to || from) + 1 || array.length);
array.length = from < 0 ? array.length + from : from;
return array.push.apply(array, rest);
};
//this variable represents the total number of popups can be displayed according to the viewport width
var total_popups = 0;
//arrays of popups ids
var popups = [];
//this is used to close a popup
function close_popup(id)
{
for(var iii = 0; iii < popups.length; iii++)
{
if(id == popups[iii])
{
Array.remove(popups, iii);
document.getElementById(id).style.display = "none";
calculate_popups();
return;
}
}
}
//displays the popups. Displays based on the maximum number of popups that can be displayed on the current viewport width
function display_popups()
{
var right = 220;
var iii = 0;
for(iii; iii < total_popups; iii++)
{
if(popups[iii] != undefined)
{
var element = document.getElementById(popups[iii]);
element.style.right = right + "px";
right = right + 320;
element.style.display = "block";
}
}
for(var jjj = iii; jjj < popups.length; jjj++)
{
var element = document.getElementById(popups[jjj]);
element.style.display = "none";
}
}
//creates markup for a new popup. Adds the id to popups array.
function register_popup(id, name)
{
for(var iii = 0; iii < popups.length; iii++)
{
//already registered. Bring it to front.
if(id == popups[iii])
{
Array.remove(popups, iii);
popups.unshift(id);
calculate_popups();
return;
}
}
var element = '<div class="popup-box chat-popup" id="'+ id +'">';
element = element + '<div class="popup-head">';
element = element + '<div class="popup-head-left">'+ name +'</div>';
element = element + '<div class="popup-head-right">✕</div>';
element = element + '<div style="clear: both"></div></div><div class="popup-messages"></div></div>';
document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;
popups.unshift(id);
calculate_popups();
}
//calculate the total number of popups suitable and then populate the toatal_popups variable.
function calculate_popups()
{
var width = window.innerWidth;
if(width < 540)
{
total_popups = 0;
}
else
{
width = width - 200;
//320 is width of a single popup box
total_popups = parseInt(width/320);
}
display_popups();
}
//recalculate when window is loaded and also when window is resized.
window.addEventListener("resize", calculate_popups);
window.addEventListener("load", calculate_popups);
</script>
</head>
<body>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=qnimate" id="_carbonads_js"></script>
<div class="chat-sidebar">
<div class="sidebar-name">
<!-- Pass username and display name to register popup -->
<a href="javascript:register_popup('narayan-prusty', 'Narayan Prusty');">
<img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
<span>Narayan Prusty</span>
</a>
</div>
<div class="sidebar-name">
<a href="javascript:register_popup('qnimate', 'QNimate');">
<img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
<span>QNimate</span>
</a>
</div>
<div class="sidebar-name">
<a href="javascript:register_popup('qscutter', 'QScutter');">
<img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
<span>QScutter</span>
</a>
</div>
<div class="sidebar-name">
<a href="javascript:register_popup('qidea', 'QIdea');">
<img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
<span>QIdea</span>
</a>
</div>
<div class="sidebar-name">
<a href="javascript:register_popup('qazy', 'QAzy');">
<img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
<span>QAzy</span>
</a>
</div>
<div class="sidebar-name">
<a href="javascript:register_popup('qblock', 'QBlock');">
<img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
<span>QBlock</span>
</a>
</div>
</div>
</body>
</html>
Now my issue is I want to display one name and only one pop-up box for that name at right bottom corner. And the pop-up box should close if user clicks anywhere except the pop-up box.
How should I achieve this?
N.B.: I've not created a jsfiddle since I'm not aware of how to make it but if you just create one HTML file on your machine and copy-paste my code you will be able to run the code in your browser.

Bind the following events with the popup.
$(':selector').bind({
mouseover : function(){
mouseIn = 1;
},
mouseout : function(){
mouseIn = 0;
},
click : function(){
mouseIn = 1;
}
});
$(document).click(function(){
if($(":selector").is(":focus")){
mouseIn == 1;
};
if(mouseIn == 0){
$(':selector').slideUp();
}
});