We Keep Coding

Jquery Div slider loop

I have a small problem. Div slides and reaching end it's quickly show div 1 without pause. Div 5 cannot see.
$(function(){
var width = '100vw';
var speed = 1500;
var pause = 3000;
var current = 1;
var $slider = $('.slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
setInterval(function(){
$slides.animate({'margin-left': '-='+width}, speed, function(){
current++;
if(current == $slide.length){
$slides.css('margin-left', 0);
current = 1;
}
});
}, pause);
});
But if I add delay
if(current == $slide.length){
$(this).delay(pause).queue(function(){
$slides.css('margin-left', 0);
});
current = 1;
}
$(function(){
var width = '100vw';
var speed = 1500;
var pause = 3000;
var current = 1;
var $slider = $('.slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
setInterval(function(){
$slides.animate({'margin-left': '-='+width}, speed, function(){
current++;
if(current == $slide.length){
$(this).delay(pause).queue(function(){
$slides.css('margin-left', 0);
});
current = 1;
}
});
}, pause);
});
.slider {
width: 100%;
height:auto;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 1px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: #bbb;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 100vw;
height: 100vh;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
.author-info {
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider > a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
margin: 0 0 0.5rem 0;
position: relative;
border:1px solid green;
}
.slider > a:active {
top: 1px;
}
.slider > a:focus {
background: #666;
}
/* Don't need button navigation */
#supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
<div class="slides">
<div id="slide-1" class="slide">Slide 1</div>
<div id="slide-2" class="slide">Slide 2</div>
<div id="slide-3" class="slide">Slide 3</div>
<div id="slide-4" class="slide">Slide 4</div>
<div id="slide-5" class="slide">Slide 5</div>
</div>
</div>
It's show Div 5 like it needed, but after showing div 1 it's not sliding anymore.
So what can I do to keep looping and shows each div given time?
Maybe someone can show how can make slider slide backwards after reaching last div and slides back to div one?

First : BAD solution for your problem : ( go to Second)
Your animation code stucks in a queue once the current == $slide.length , you should pass the next function as argument in the queue calback then use next() to trigger other function . as below :
if(current == $slide.length){
$(this).delay(pause).queue(function(next){ //<--- here next argument
$slides.css('margin-left', 0);
next(); // <----- next call
});
current = 1;
}
but this will not make the annimation work as expected
Second : proper simple solution
What I suggest is, set the animation left value as variable, then check if it's the last so slide to 0 other wise continue left view-width sliding
See working snippet :
$(function(){
var width = '100vw';
var speed = 1500;
var pause = 3000;
var current = 1;
var $slider = $('.slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
var leftAnnime = '-='+width;
setInterval(function(){
$slides.animate({'margin-left': leftAnnime }, speed, function(){
current++;
if( current == $slide.length ) {
leftAnnime = 0;
current = 0;
} else {
leftAnnime = '-='+width;
}
});
}, pause);
});
.slider {
width: 100%;
height:auto;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 1px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: #bbb;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 100vw;
height: 100vh;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
.author-info {
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider > a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
margin: 0 0 0.5rem 0;
position: relative;
border:1px solid green;
}
.slider > a:active {
top: 1px;
}
.slider > a:focus {
background: #666;
}
/* Don't need button navigation */
#supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
<div class="slides">
<div id="slide-1" class="slide">Slide 1</div>
<div id="slide-2" class="slide">Slide 2</div>
<div id="slide-3" class="slide">Slide 3</div>
<div id="slide-4" class="slide">Slide 4</div>
<div id="slide-5" class="slide">Slide 5</div>
</div>
</div>

When two div's overlapped - the color of the first one should be changed

I'm trying to change the div's background color on "white" whenever it's overlapping with a blue div. I'm trying my best, but obviously, I'm doing something wrong. Please, if it's don't bother you, help me understand why my code is not working.
Codepen: https://codepen.io/RaizRus/pen/zYrNGEK
let elOne = document.querySelector('.elementOne').getBoundingClientRect();
let elTwo = document.querySelector('.elementTwo').getBoundingClientRect();
let topOverlap = elOne.top + elOne.height;
let bottomOverlap = elOne.bottom + elOne.height;
if(elTwo.top <= topOverlap || elTwo.bottom <= bottomOverlap) {
document.querySelector('.elementOne').classList.add('white');
} else {
if(document.querySelector('.elementOne').classList.contains('white')) {
document.querySelector('.elementOne').classList.remove('white');
}
}
body {
height: 4000px;
background: grey;
display:flex;
flex-direction: column;
justify-content: start;
align-items: center;
}
.elementOne {
height: 50px;
width: 50px;
margin-top: 100px;
background-color: pink;
position: fixed;
z-index:9;
}
.elementTwo {
height: 70px;
width: 70px;
background-color: blue;
position: absolute;
top: 1040px;
}
.white {
background-color:white !important;
}
<body>
<div class="elementOne"></div>
<div class="elementTwo"></div>
</body>

That was a fun one, feel free to have a look!
The key pieces you were missing are:
window.addEventListener('scroll', () => {});
and
window.pageYOffset
let elOne = document.querySelector('.elementOne').getBoundingClientRect();
let elTwo = document.querySelector('.elementTwo').getBoundingClientRect();
window.addEventListener('scroll', () => {
let topOverlap = elTwo.top - elOne.bottom;
let bottomOverlap = elTwo.bottom - elOne.top;
let classList = document.querySelector('.elementOne').classList;
if (window.pageYOffset >= topOverlap && window.pageYOffset <= bottomOverlap) {
if (!classList.contains('white')) {
classList.add('white');
}
} else {
if (classList.contains('white')) {
classList.remove('white');
}
}
});
body {
height: 4000px;
background: grey;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
}
.elementOne {
height: 50px;
width: 50px;
margin-top: 100px;
background-color: pink;
position: fixed;
z-index: 9;
}
.elementTwo {
height: 70px;
width: 70px;
background-color: blue;
position: absolute;
top: 1040px;
}
.white {
background-color: white !important;
}
<body>
<div class="elementOne"></div>
<div class="elementTwo"></div>
</body>

facing problem to fix component left and right side positions?

i am working on a small component i am facing issue to control moving div. i want to stop moving div when it reaches at left or right side or other words it should stop when left or right position == 0;
i am working on a small component i am facing issue to control moving div. i want to stop moving div when it reaches at left or right side or other words it should stop when left or right position == 0;
var leftDivWidth = $('#left').width()/2;
applyRect = $('#left').css('clip', 'rect(0px,' + leftDivWidth + 'px, auto,0px)');
var isResizing = false,
lastDownX = 0;
$(function () {
var container = $('#container'),
left = $('#left'),
handle = $('#handle');
handle.on('mousedown', function (e) {
isResizing = true;
lastDownX = e.clientX;
});
$(document).on('mousemove', function (e) {
if (!isResizing)
return;
var offsetRight = e.clientX - container.offset().left;
if($(handle).left == 0){
alert('working');
}
handle.css('left', offsetRight);
left.css('clip', 'rect(0px,' + offsetRight + 'px,auto,0px)')
}).on('mouseup', function (e) {
isResizing = false;
});
});
body, html {
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
#container {
position: relative;
width: 100%;
margin: 0 auto;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: moz-none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
max-width: 1200px;
}
#container #left {
position: absolute;
width: 100%;
right: 0;
top: 0;
bottom: 0;
z-index: 9;
/*clip: rect(0px, 50%, 484px, 0px);*/
}
#container #handle {
display: block;
width: 50px;
height: 50px;
background: green;
color: yellow;
z-index: 999;
font-size: 25px;
line-height: 50px;
text-align: center;
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.fa{
font-family: fontawesome;
line-height: 52px;
}
#left img{
width: 100%;
position: absolute;
top: 0;
display: block;
}
#right img{
width: 100%;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="container">
<div id="right">
<img src="https://images.wallpaperscraft.com/image/astronaut_neon_art_148365_1920x1080.jpg">
</div>
<!-- Left side -->
<div id="left">
<img src="https://images.wallpaperscraft.com/image/astronaut_ring_neon_156673_1920x1080.jpg">
</div>
<div class="innerDiv">
<div id="handle"> <i class="fa fa-arrows"></i> </div>
</div>
<!-- Right side -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Just match it with the parentOffsetWidth and to lock movement just create flag lockMovement and simply set it to true when the conditon meets.
var leftDivWidth = $('#left').width()/2;
applyRect = $('#left').css('clip', 'rect(0px,' + leftDivWidth + 'px, auto,0px)');
var isResizing = false;
var lockMovement = false;
lastDownX = 0;
$(function () {
var container = $('#container'),
left = $('#left'),
handle = $('#handle');
handle.on('mousedown', function (e) {
if(!lockMovement){
isResizing = true;
lastDownX = e.clientX;
}
});
$(document).on('mousemove', function (e) {
if (!isResizing)
return;
var offsetRight = e.clientX - container.offset().left;
if($(handle)[0].offsetLeft >= $(handle)[0].offsetParent.offsetWidth){ //========> match the parent offsetwidth with the child offsetLeft
alert('working');
isResizing = false;
lastDownX=0;
lockMovement =true;
}
handle.css('left', offsetRight);
left.css('clip', 'rect(0px,' + offsetRight + 'px,auto,0px)')
}).on('mouseup', function (e) {
isResizing = false;
});
});
body, html {
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
#container {
position: relative;
width: 100%;
margin: 0 auto;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: moz-none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
max-width: 1200px;
}
#container #left {
position: absolute;
width: 100%;
right: 0;
top: 0;
bottom: 0;
z-index: 9;
/*clip: rect(0px, 50%, 484px, 0px);*/
}
#container #handle {
display: block;
width: 50px;
height: 50px;
background: green;
color: yellow;
z-index: 999;
font-size: 25px;
line-height: 50px;
text-align: center;
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.fa{
font-family: fontawesome;
line-height: 52px;
}
#left img{
width: 100%;
position: absolute;
top: 0;
display: block;
}
#right img{
width: 100%;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="container">
<div id="right">
<img src="https://images.wallpaperscraft.com/image/astronaut_neon_art_148365_1920x1080.jpg">
</div>
<!-- Left side -->
<div id="left">
<img src="https://images.wallpaperscraft.com/image/astronaut_ring_neon_156673_1920x1080.jpg">
</div>
<div class="innerDiv">
<div id="handle"> <i class="fa fa-arrows"></i> </div>
</div>
<!-- Right side -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Just add offset() to if-statement:
if($(handle).left <= 0){
alert('working');
}
if($(handle).offset().left <= 0){
alert('working');
}
And it's better to use <= than strict == equation.

Slider Height Images

I have an image slider with thumbnails and am having a bit of a problem. When you click on the thumbnail of the last image, the thumbnails below as well as the arrows in the carousel jump down a bit. It doesn't happen to any of the other images. It's a small problem but it's driving me crazy and I don't know why it's happening, since I made sure all the images were the same height. Here's the codepen.
$(document).ready(function(){
$('#imgDetail').animate({
opacity: '1'
},300);
});
$(document).ready(function(){
// get all images loaded
var images = $(".unidoor-class");
// thumbnails containers
var thumbnailContainer = $("#thumbnails");
// generate thumbnail images
generateThumbnails(images, thumbnailContainer);
// listeners for controls arrows
$(".prev-next-button").on("click touchstart", function() {
// get the images
var currentImageIndex = images.index($(".unidoor-class[data-active=true]"));
var isPrevious = $(this).hasClass("previous");
var nextIndex;
if (isPrevious) {
if (currentImageIndex === 0) {
nextIndex = images.length - 1;
}
if (currentImageIndex > 0) {
nextIndex = currentImageIndex - 1;
}
} else {
if (currentImageIndex === images.length - 1) {
nextIndex = 0;
}
if (currentImageIndex < images.length - 1) {
nextIndex = currentImageIndex + 1;
}
}
// remove any active class from images
images.removeClass("active").attr('data-active', "false");
// get the next active image and add active class to that next current image
var $nextImage = $(images[nextIndex]);
if ($nextImage.data('iframe')) {
$(images[nextIndex]).attr('data-active', "true");
$('#sketchfab-iframe').addClass('active').height($nextImage.height());
} else {
$(images[nextIndex]).addClass("active").attr('data-active', "true");
$('#sketchfab-iframe').removeClass('active');
}
});
$(".thumb").on("click touchstart", function(event){
event.preventDefault();
var images = $(".unidoor-class");
var indexSelected = $(this).data("img-index");
var currentShown = images.index($(".unidoor-class[data-active=true]"));
if (currentShown === indexSelected) return false;
images.removeClass("active").attr('data-active', "false");
if ($(this).data('iframe')) {
$(images[indexSelected]).attr('data-active', "true");
$('#sketchfab-iframe').addClass('active').height($(images[indexSelected]).height());
} else {
images.removeClass("active");
$(images[indexSelected]).addClass('active').attr('data-active', "true");;
$('#sketchfab-iframe').removeClass('active');
}
});
function generateThumbnails(images, container) {
var ul = $("<ul>");
images.each(function(index, element){
var currentThumb = $("<img>");
var li = $("<li>");
var src = $(this).attr("src");
currentThumb.attr("src", src);
currentThumb.attr("class", "thumb");
currentThumb.data("img-index", index);
var iframe = $(this).data('iframe');
if (iframe) {
currentThumb.data("iframe", iframe);
}
li.append(currentThumb);
ul.append(li);
});
container.append(ul);
}
});
// window.sr = ScrollReveal({reset: true});
// sr.reveal('.active', {mobile:true});
* {
margin: 0;
padding: 0;
}
body{
margin: 0;
padding:0;
font-size: 100%;
/* line-height: 1.6; */
/* font-family: Arial, Helvetica, sans-serif; */
/* height: 100% !important; */
}
#green-room {
background: #333 !important;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
#unidoor, .unidoor-class {
position: absolute;
width: 100%;
margin: 0 auto;
display: block;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
height: auto;
}
.unidoor-class.active {
position: relative;
opacity: 1;
}
#prev {
position: absolute;
/* font-weight: bold; */
color: black;
/* background-color: #fff; */
/* opacity: 0.5; */
left: 0;
top: 0;
bottom: 0;
}
#next {
position: absolute;
/* font-weight: bold; */
color: black;
/* background-color: #fff; */
/* opacity: 0.5; */
right: 0;
top: 0;
bottom: 0;
}
#prev p,
#next p
{
font-size: 3em;
}
#imgDetail {
position: relative;
width: 90%;
/* width: 900px;
height: 600px; */
margin: 0 auto;
overflow: hidden;
}
#imgDetail a {
text-decoration: none;
display: flex;
/* padding: 8px 16px; */
padding: 3% ;
justify-content: center;
align-items: center;
}
#imgDetail a:hover {
background-color: #333;
color: white;
opacity: 0.5;
}
#imgDetail ul {
margin: 0 auto;
display: block;
/* width: 50%; */
}
#thumbnails {
max-width: 1000px;
width: 100%;
display: inline-block;
text-align: center;
}
.thumb {
width: 21%;
height: auto;
/* margin: 15px 1% 0px 2%; */
margin-top: 15px;
cursor: pointer;
}
#imgDetail li {
display: inline;
/* margin-right: 10px; */
}
#thumbnails ul{
margin: 0 auto;
display: block;
}
#thumbnails li{
display: inline;
padding-right: 2%;
}
#thumbnails li:last-child{
padding-right: 0;
}
#green-room p {
display: block;
margin: 0 auto;
/* font-size: 1em !important; */
}
#green {
padding-top: 15px;
padding-bottom: 30px;
text-align: center;
color: white;
font-family: 'Lato', sans-serif;
margin: 0 auto;
/* width: 100% !important;*/
}
#media(max-width: 767px){
#green-room p {
margin-right: 5% !important;
margin-left: 5% !important;
/* font-size: .75em !important; */
}
#green {
/* font-size: .75em !important; */
}
}
#media(min-width: 768px){
#green-room p {
width: 90% !important;
}
#green {
width: 90% !important;
}
}
.footer {
padding-top: 30px;
background-color: #333;
}
#sketchfab-iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#sketchfab-iframe {
width: 100%;
height: 100%;
opacity: 0;
transition: opacity .5s;
}
#sketchfab-iframe.active {
opacity: 1;
position: relative;
}
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body id="green-room">
<div class="slideshow-container">
<div id="imgDetail">
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="unidoor-class active" data-active="true" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" class="unidoor-class" data-active="false" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="unidoor-class" data-active="false" />
<img data-iframe="sketchfab-iframe" src="https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/1243679/300/200/m2/fpnw/wm0/desert_04_01-.jpg?1462519267&s=294388259919b5be6294b07e96cda0b7" class="unidoor-class" data-active="false" />
<iframe id="sketchfab-iframe" width="600" height="400" src="https://sketchfab.com/models/bbea52bd14c84d65b7b5512bae94ceac/embed" frameborder="0" allowvr allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe>
<!--CONTROLS-->
<p>❬</p>
<p>❭</p>
</div>
<!--Thumbnails-->
<div id="thumbnails">
</div>
<p id="green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non iaculis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="footer">
</div>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal({reset: true});
sr.reveal('#unidoor');
</script>
</body>
</html>

iframe by default is an inline element
add style
display:block;
for
#sketchfab-iframe.active {
opacity: 1;
position: relative;
display: block;**
}
Codepen
Read more on https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element

Pause a document - HTML, CSS, JavaScript

I am making a styled HTML version of the typical JS 'alert()' box.
It is simply a nice that uses 'display: none;' and 'display: block;' to toggle the box.
However, this doesn't have the functionality of a JS 'alert()' box, as doing
for(var c = 0; c < 10; c++){ //like the joke? (c++)
cool.alert('You have seen '+c+' alerts');
}
will not create 10 successive alert boxes, but make the box's display 'block' 10 times.
Is there any way to pause the document until the alert box is closed so that the loop would be paused?
Here's all the relevant code:
<button onclick="cool.alert('Hi')">Alert box</button><div id='block'></div>
<div id='box'>
<p id='text'></p><hr id='hr'>
<div id='Ok' onclick='cool.alertclear()'>Ok</div>
</div>
<script>
var cover = document.getElementById('block');
var box = document.getElementById('box');
var text = document.getElementById('text');
var ok = document.getElementById('Ok');
var hr = document.getElementById('hr');
var cool = {
alert: function(input){
cover.style.display = 'block';
box.style.display = 'block';
ok.style.display = 'block';
text.innerHTML = input;
},
alertclear: function(){
cover.style.display = 'none';
box.style.display = 'none';
ok.style.display = 'none';
}
}
</script>
<style>
#block{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.6);
display: none;
z-index: 100;
}
#box{
position: absolute;
top: 25%;
left: 35%;
height: 30%;
width: 30%;
border-radius: 10px;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.2);
display: none;
z-index: 101;
color: #000;
padding: 10px;
cursor: default;
}
#text{
height: 60%;
word-break: break-all;
overflow-x: hidden;
overflow-y: auto;
}
#Yes{
position: absolute;
bottom: 5%;
right: 25%;
height: 15%;
width: 18%;
border-radius: 5px;
background: linear-gradient(left top, #00FF00, #00DD00);
background: -webkit-linear-gradient(left top, #00FF00, #00DD00);
cursor: hand;
text-align: center;
font-size: 1.5em;
color: white;
display: none;
}
#No{
position: absolute;
bottom: 5%;
right: 5%;
height: 15%;
width: 18%;
border-radius: 5px;
background: linear-gradient(left top, #ff6c6c, #ff4e4e);
background: -webkit-linear-gradient(left top, #ff6c6c, #ff4e4e);
cursor: hand;
text-align: center;
font-size: 1.5em;
color: white;
display: none;
}
#Ok, #Go{
position: absolute;
bottom: 5%;
right: 5%;
height: 15%;
width: 18%;
border-radius: 5px;
background: grey;
cursor: hand;
text-align: center;
font-size: 1.5em;
color: white;
display: none;
}
#Prompt{
position: absolute;
top: 30%;
left: 5%;
height: 40%;
width: 90%;
resize: none;
overflow-x: hidden;
overflow-y: auto;
word-break: break-all;
display: none;
}
#hr{
position: relative;
bottom: 0%;
}
</style>

You could keep track of the alerts like this:
var inputArr = [];
var showing = false;
var cool = {
alert: function(input){
if(!showing) {
cool.show(input);
showing = true;
} else {
inputArr.push(input);
}
},
alertclear: function(){
cover.style.display = 'none';
box.style.display = 'none';
ok.style.display = 'none';
if(inputArr.length>0) {
input = inputArr.shift();
cool.show(input);
} else {
showing = false;
}
},
show: function(input) {
cover.style.display = 'block';
box.style.display = 'block';
ok.style.display = 'block';
text.innerHTML = input;
}
}