lightbox with 2 different progress bar inside - javascript

I have created a lightbox in javascript and I have placed inside it a progress bar that I have also created it in javascript. My problem is that when I was trying to insert a second progress bar inside my lightbox only the first works. Any idea how to fix this?
this is my jsfiddle :http://jsfiddle.net/QHMKk/3/
and my code is this:
my javascript is:
function show() {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function start() {
var stepSize = 50;
setTimeout((function() {
var filler = document.getElementById("filler"),
percentage = 0;
return function progress() {
filler.style.height = percentage + "%";
percentage +=1;
if (percentage <= 100) {
setTimeout(progress, stepSize);
}
}
}()), stepSize);
}
function start() {
var stepSize = 50;
setTimeout((function() {
var filler2 = document.getElementById("filler2"),
percentage = 0;
return function progress() {
filler.style.height = percentage + "%";
percentage +=1;
if (percentage <= 100) {
setTimeout(progress, stepSize);
}
}
}()), stepSize);
}
this is my html:
OPEN
<div id="light" class="white_content_stats">
<div class="prog">
<div id="filler" class="filler"></div>
</div>
</br>
<div class="prog2">
<div id="filler2" class="filler2"></div>
</div>
<a href = "javascript:void(0)" onclick = " document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'; ">
</br>CLOSE</a>
and this is my CSS:
.black_overlay_stats{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 50%;
z-index:1001;
-moz-opacity: 0.6;
opacity:.70;
filter: alpha(opacity=70);
}
.white_content_stats {
display: none;
position:fixed;
top: 15%;
width: 300px;
padding: 30px;
margin-left:10px;
background-color:#F2F2F2;
border-radius: 0px;
box-shadow: 0px 0px 0px 20px rgba(0,0,0,0.6);
z-index:1002;
}
.prog {
height: 100px;
width: 30px;
border: 1px solid white;
position: relative;
}
.filler {
height: 0%;
width: 30px;
position: absolute;
bottom: 0;
background-color: grey;
}
.prog2 {
height: 100px;
width: 30px;
border: 1px solid white;
position: relative;
}
.filler2 {
height: 0%;
width: 30px;
position: absolute;
bottom: 0;
background-color: grey;
}

You define 2 functions with the same name start, so the second will be used and only it will be run, hence you can see only 1 progress bar works. You can modify the function start to make it accept an argument of id like this:
function start(id) {
//...
var filler = document.getElementById(id)
//...
}
Then call both start('filler') and start('filler2'):
OPEN
Updated Demo.
Note that you should not use inline event property.

Related

How to add a Vertical line at the end of a percentage bar HTML/Javascript

I am using the following HTML/Javascipt code to make the classic percentage bar.
function update() {
var element = document.getElementById("myprogressBar");
var width = 1;
var identity = setInterval(scene, 10);
function scene() {
if (width >= 70) {
clearInterval(identity);
} else {
width++;
element.style.width = width + '%';
element.innerHTML = width * 1 + '%';
}
}
}
#Progress_Status {
width: 50%;
background-color: #ddd;
}
#myprogressBar {
width: 1%;
height: 35px;
background-color: #4CAF50;
text-align: center;
line-height: 32px;
color: black;
}
<!DOCTYPE html>
<html>
<body>
<h3>Example of Progress Bar Using JavaScript</h3>
<p>Download Status of a File:</p>
<div id="Progress_Status">
<div id="myprogressBar">1%</div>
</div>
<br>
<button onclick="update()">Start Download</button>
</body>
</html>
What I would like to obtain and I am trying to achieve with .innerHTML is the following situation
The vertical line has to appear at the same level of the specified percentage.
For the vertical bar I used an added div nested inside the #Progress_Status container. It's styled to be absolute positioned and to change its offset in % in sync with the progress bar width.
For it to work, its container was set to position:relative as the reference frame.
function update() {
//fetches the vertical bar elements
var vbar = document.querySelector("#Progress_Status .percverticalbar");
var element = document.getElementById("myprogressBar");
var width = 1;
var identity = setInterval(scene, 10);
function scene() {
if (width >= 70) {
clearInterval(identity);
} else {
width++;
//updates the left offset of the vertical bar
vbar.style.left = `${width}%`;
element.style.width = width + '%';
element.innerHTML = width * 1 + '%';
}
}
}
#Progress_Status {
width: 50%;
background-color: #ddd;
position: relative;
}
.percverticalbar{
position: absolute;
height: 100px;
width: 5px;
background: gray;
top: -25px;
left: 0;
}
#myprogressBar {
width: 1%;
height: 35px;
background-color: #4CAF50;
text-align: center;
line-height: 32px;
color: black;
margin: 50px 0;
}
<h3>Example of Progress Bar Using JavaScript</h3>
<p>Download Status of a File:</p>
<div id="Progress_Status">
<div id="myprogressBar">1%</div>
<div class="percverticalbar"></div>
</div>
<br>
<button onclick="update()">Start Download</button>
You could just add an :after pseudo element and add the following styles to it. Keep in mind that the parent, in the case #myprogressBar should be relatively positioned.
#myprogressBar {
width: 1%;
height: 35px;
background-color: #4CAF50;
text-align: center;
line-height: 32px;
color: black;
position: relative;
}
#myprogressBar:after {
width: 5px;
height: 80px;
background: #333;
content: '';
position: absolute;
right: -5px;
top: 50%;
transform: translateY(-50%);
border-radius: 5px;
}

How to set delay show and hide with JS

I have my code in below, I want to delay 3 seconds before the show in and when showing 3 texts is done, the last text will hide after 3 seconds (not repeat). My code not working as I want.
And I want to add some CSS show and hide effect like this:
But I don't know how I can do it.
Can you help me?
Thanks
var x = document.getElementById('x'),
s = ['Hello', 'What can I help you ?', 'Click me to get some help!'];
(function loop() {
s.length && (x.innerHTML = s.shift(), setTimeout(loop, 3000));
return false;
})();
.speech-bubble {
position: relative;
padding:20px;
}
.speech-bubble:after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: #00aabb;
border-right: 0;
margin-top: 15px;
margin-right: -10px;
}
span#x {
color: white;
font-family:roboto;
padding: 20px;
background: #00aabb;
position: absolute;
border-radius:5px;
right: 0px;
top: 50%;
}
.hideclass{display:none;}
<div class="speech-bubble"><span id="x" ></span></div>
Try the following code:
var x = document.getElementById('x');
s = ['Hello', 'What can I help you ?', 'Click me to get some help!'];
var times=0;
(function loop() {
var loops=setTimeout(loop, 3000);
if (times==3){
clearTimeout(loops);
$('#animate').addClass('bounceOut faster');
}
else{
s.length && (x.innerHTML = s.shift(), loops);
setTimeout( function(){$('#animate').removeClass('bounceIn faster');}, 2000);
$('#animate').addClass('bounceIn faster');
}
times++;
return false;
})();
.speech-bubble {
position: relative;
padding:20px;
}
.speech-bubble:after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: #00aabb;
border-right: 0;
margin-top: 15px;
margin-right: -10px;
}
span#x {
color: white;
font-family:roboto;
padding: 20px;
background: #00aabb;
position: absolute;
border-radius:5px;
right: 0px;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/>
<div class="animated bounceIn faster speech-bubble" id="animate"><span id="x" ></span></div>
times is used to count the loop count.
clearTimeout is to be done with loop.
$('#animate').removeClass('infinite bounceIn'); is to remove bounceIn animation
$('#animate').addClass('bounceOut'); is to add bounceOut animation
For faster animation, setTimeout is used to add delay.
var x = document.getElementById('x');
s = ['Hello', 'What can I help you ?', 'Click me to get some help!'];
var times=0;
(function loop() {
var loops=setTimeout(loop, 3000);
if (times==3){
clearTimeout(loops);
$('#animate').addClass('bounceOut faster');
}
else{
s.length && (x.innerHTML = s.shift(), loops);
setTimeout( function(){$('#animate').removeClass('bounceIn faster');}, 2000);
$('#animate').addClass('bounceIn faster');
}
times++;
return false;
})();
.speech-bubble {
position: relative;
padding:20px;
}
.speech-bubble:after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: #00aabb;
border-right: 0;
margin-top: 15px;
margin-right: -10px;
}
span#x {
color: white;
font-family:roboto;
padding: 20px;
background: #00aabb;
position: absolute;
border-radius:5px;
right: 0px;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/>
<div class="delay-1s animated bounceIn faster speech-bubble" id="animate"><span id="x" ></span></div>
Edit: for adding delay go add delay-xs on div class with x as the number of seconds you would like to delay. Don't forget to also update the timeout so that the animation work as intended.
Updated in snippet on <div class="delay-1s animated bounceIn faster speech-bubble" id="animate">
If you want to remove the delay just add the delay-1s on remove class in snippet. And add as needed.

Text Center on Progress Bar

I am trying to place the percentage total in the center of the colored progress bar but am struggling to do so.
I have tried placing the <p> tag within the different <div> tags but can't quite work it out.
Can anyone help?
// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 1000;
// on page load, animate percentage bar to data percentage length
// .stop() used to prevent animation queueing
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength);
}
.progress-size {
width: 100%;
height: 50px;
}
.progress-wrap {
border: 1px solid #FFFFFF;
background: #3498DB;
height: 50px;
margin: 0px 0;
overflow: hidden;
position: relative;
}
.progress-bar {
background: #ddd;
left: 0;
position: absolute;
top: 0;
}
.progress-value {
vertical-align: middle;
line-height: 50px;
padding-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap" data-progress-percent="25">
<div class="progress-bar progress-size"></div>
</div>
<p class="progress-value progress-size alt text-center">25%</p>
You can just position the text absolutely inside the bar and then set the right to 100 minus the percentage:
// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 1000;
// on page load, animate percentage bar to data percentage length
// .stop() used to prevent animation queueing
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength);
$('.progress-value').stop().animate({
right: 100 - $('.progress-wrap').data('progress-percent') + '%'
}, animationLength);
}
.progress-size {
width: 100%;
height: 50px;
}
.progress-wrap {
border: 1px solid #FFFFFF;
background: #3498DB;
height: 50px;
margin: 0px 0;
overflow: hidden;
position: relative;
}
.progress-bar {
background: #ddd;
left: 0;
position: absolute;
top: 0;
}
.progress-value {
line-height: 50px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 100%;
text-align:center;
margin:0;
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap" data-progress-percent="25">
<div class="progress-bar progress-size"></div>
<p class="progress-value alt text-center">25%</p>
</div>
You don't need positioning here. Simply put your .progress-value element into the wrapper and use the padding-left attribute to animate the percentage value as well. To center the value, you can i.e. use an offset and half of your total progress value: (progressTotal-15)/2
Here is the working example:
// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 1000;
// on page load, animate percentage bar to data percentage length
// .stop() used to prevent animation queueing
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength);
$('.progress-value').stop().animate({
paddingLeft: (progressTotal-15)/2
}, animationLength);
}
.progress-size {
width: 100%;
height: 50px;
}
.progress-wrap {
border: 1px solid #FFFFFF;
background: #3498DB;
height: 50px;
margin: 0px 0;
overflow: hidden;
position: relative;
}
.progress-bar {
background: #ddd;
left: 0;
position: absolute;
top: 0;
}
.progress-value {
padding-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap" data-progress-percent="25">
<div class="progress-bar progress-size"></div>
<p class="progress-value progress-size alt text-center">25%</p>
</div>
Please check, hope this will helpful form you
https://codepen.io/Thakur92411/pen/aRoEoa1
<div class="progress-wrap" data-progress-percent="25">
<div class="valuetext">25%</div>
<div class="progress-bar progress-value progress-size"></div>
</div>

I am not able to add and remove the classes

My Code:
window.addEventListener('scroll', scrollWhere);
function scrollWhere(e) {
var windowScroll = $(window).scrollTop();
var idScroll = $('.me').offset().top;
var height = $("#half-who").height();
if (windowScroll > idScroll) {
$('.me').addClass('me-fixed');
} else {
$('.me').removeClass('me-fixed');
}
}
I want to add a class when the scroll is past a certain point and remove it when is smaller than that certain point.
Get your idScroll value outside scrollWhere function as because it re-initiate calculation again and again and returns different values each time as because it has a fixed position. check below snippet for reference.
window.addEventListener('scroll', scrollWhere);
var idScroll = $('.me').offset().top;
function scrollWhere(e) {
var windowScroll = $(window).scrollTop();
//var height = $("#half-who").height();
if (windowScroll > idScroll) {
$('.me').addClass('me-fixed');
} else {
$('.me').removeClass('me-fixed');
}
}
.container {
height: 300vh;
width: 100%;
background-color: grey;
padding: 0;
margin: 0;
}
.content {
height: 100px;
width: 100%;
background-color: cyan;
}
.me {
height: 50px;
width: 100%;
background-color: red;
}
.me-fixed {
position: fixed;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content"></div>
<div class="me"></div>
</div>
Here's a simple example to add a class when scroll passing a certain point. Hope you can get an idea. >>> JSFiddle
$(window).scroll(function(){
var winH = $(window).scrollTop();
var ruler = $('.ruler').position().top;
if(ruler < winH){
$('.nav').addClass('me-fixed');
}
else{
$('.nav').removeClass('me-fixed');
}
});
body{
height: 1500px;
}
.nav{
height: 50px;
background: #a1bfbe;
color: #000;
width: 100%;
position: relative;
top: 250px;
text-align: center;
}
.nav.me-fixed{
background: #c2debf;
}
p{
font-size: 20px;
display: none;
}
.me-fixed p{
display: block;
}
.ruler{
position: fixed;
top: 150px;
border-bottom: 1px solid red;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<p>
Fixed
</p>
</div>
<div class="ruler">
</div>
Also if you can provide the html and css structure, it will be easy to identify the issue.

A javascript slider array issue

Having a slider with images implementation from array, cant figure out why images dont want to be shown up from array, tryed to make a path but it didnt work.I want this code to reflect this image every time a push the button: fpoimg.com/100x100.
Im trying to fix it only with clean javascript.
Here is a sandbox
var slider = {
slides: ['100x100', '100x100', '100x100', '100x100'],
frame:0,
set:function(image){
path = path || 'http://fpoimg.com/';
document.getElementById('scr').style.backgroundImage ="url ("+path+ image+")";
},
init:function() {
this.set(this.slides[this.frame]);
},
left:function() {
this.frame--;
if(frame < 0) this.frame = this.slides.length - 1;
this.set(this.slides[this.frame]);
},
right:function() {
if(this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() {
slider.init();
setInterval(function() {
slider.right();
},5000);
};
.scr {
margin:20px auto;
width: 600px;
height: 320px;
margin-top:20px;
background-color: white;
background-size:cover;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 150px;
font-size: 30px;
text-align: center;
background:none;
border:none;
}
.left {
left:25px;
}
.right {
right:25px;
}
<body>
<button class="left" onclick="slider.left();"><</button>
<div class="scr"></div>
<button class="right" onclick="slider.right();">></button>
</body>
On Line 6 of your Javascript, you have used getElementById('scr'). You have no element with an Id or scr, you needed to use getElementsByClassName('scr')
Your new code:
var slider = {
slides: ['100x100', '100x100', '100x100', '100x100'],
frame: 0,
set: function(image) {
path = path || 'http://fpoimg.com/';
document.getElementsByClassName('scr').style.backgroundImage = "url (" + path + image + ")";
},
init: function() {
this.set(this.slides[this.frame]);
},
left: function() {
this.frame--;
if (frame < 0) this.frame = this.slides.length - 1;
this.set(this.slides[this.frame]);
},
right: function() {
if (this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() {
slider.init();
setInterval(function() {
slider.right();
}, 5000);
};
.scr {
margin: 20px auto;
width: 600px;
height: 320px;
margin-top: 20px;
background-color: white;
background-size: cover;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 150px;
font-size: 30px;
text-align: center;
background: none;
border: none;
}
.left {
left: 25px;
}
.right {
right: 25px;
}
<body>
<button class="left" onclick="slider.left();">
</button>
<div class="scr"></div>
<button class="right" onclick="slider.right();"></button>
</body>
It seems you've got getElementById() when you meant getElementsByClassName()

Categories