I am currently trying to create a music app based on the following video: https://youtu.be/OafpiyPa63I?t=13127
I am at the linked timestamp, and I have written the code exactly as shown in the video, but for some reason, when I try to seek, the input is set back to 0 and therefore so is the song. My code for this part:
let currentStart = document.getElementById('currentStart');
let currentEnd = document.getElementById('currentEnd');
let seek = document.getElementById('seek');
let bar2 = document.getElementById('bar2');
let dot = document.getElementsByClassName('dot')[0];
music.addEventListener('timeupdate', () => {
let music_curr = music.currentTime;
let music_dur = music.duration;
let min1 = Math.floor(music_dur / 60);
let sec1 = Math.floor(music_dur % 60);
if (sec1 < 10) {
sec1 = `0${sec1}`;
};
currentEnd.innerText = `${min1}:${sec1}`;
let min2 = Math.floor(music_curr / 60);
let sec2 = Math.floor(music_curr % 60);
if (sec2 < 10) {
sec2 = `0${sec2}`;
};
currentStart.innerText = `${min2}:${sec2}`;
let progressBar = parseInt((music_curr / music_dur) * 100);
seek.value = progressBar;
let seekbar = seek.value;
bar2.style.width = `${seekbar}%`;
dot.style.left = `${seekbar}%`;
});
seek.addEventListener('change', () => {
music.currentTime = seek.value * music.duration / 100;
});
<div class="bar">
<input type="range" id="seek" min="0" max="100">
<div class="bar2" id="bar2"></div>
<div class="dot"></div>
</div>
header .master_play .bar {
position: relative;
width: 43%;
height: 2px;
background: rgb(105,105,170,.1);
margin: 0px 15px 0px 10px;
}
header .master_play .bar .bar2 {
position: absolute;
background: #36e2ec;
width: 0%;
height: 100%;
top: 0;
transition: 1s linear;
}
header .master_play .bar .dot {
position: absolute;
width: 5px;
height: 5px;
background: #36e2ec;
border-radius: 50%;
left: 0%;
top: -1.5px;
transition: 1s linear;
}
header .master_play .bar .dot::before {
content: '';
position: absolute;
width: 15px;
height: 15px;
border: 1px solid #36e2ec;
border-radius: 50%;
left: -6.5px;
top: -6.5px;
box-shadow: inset 0px 0px 3px #36e2ec;
}
header .master_play .bar input {
position: absolute;
width: 100%;
top: -7px;
left: 0;
cursor: pointer;
z-index: 999999999999;
opacity: .5;
}
I'm not sure if I am in the wrong, or if the tutorial is outdated.
I figured out it was the platform I was running the code on. Somewhere it had clashed, so I was able to move it to a new host and it worked.
Related
i'm building a website portfolio with an interactive display at the top with some click events and hover. However i changed the 'body' class so i could fit it in with my website and then the javascript stopped working and i can't for the life of me figure it out?!
(sorry if i didnt show enough snippets..) I'm using scss but i used a transpiler to convert it into css when i switched it over to VSC..
the normal javscript like time and date work fine - it just seems to be the elements connected on the page / in the now 'display' div which i cant connect to anymore..
It works fine when the classes are with body - code:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
background: #CCBBFF;
z-index: -10;
display: flex;
justify-content: center;
align-items: center;
}
.mainDisp {
width: 1000px;
height: 550px;
border: 1px solid black;
// overflow: hidden;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
* {
position: absolute;
}
*:before,
*:after {
content: "";
position: absolute;
}
.lamp {
width: 120px;
height: 80px;
background: #494949;
-webkit-clip-path: polygon(50% 0%, 0 48%, 100% 48%);
clip-path: polygon(50% 0%, 0 48%, 100% 48%);
left: 45%;
top: 10%;
z-index: 4;
}
</head>
<body>
<div class="mainDisp">
<div class="lamp"></div>
<div class="innerLight hidden"></div>
<div class="string"></div>
....
but when i add a new class 'Display' and add the old body's classes the javascript just doesnt work anymore? Same Javascript for both..
code :
function openURL(url) {
window.open(url);
}
var book1 = document.querySelector('.book');
var super1 = document.querySelector('.super1');
var book2 = document.querySelector('.book.two');
var super2 = document.querySelector('.super2');
var book3 = document.querySelector('.book.three');
var super3 = document.querySelector('.super3');
var calculator = document.querySelector('.calculator');
var calc = document.querySelector('.calc');
var phone = document.querySelector('.phone');
var tipCalc = document.querySelector('.tipCalc');
var lightSwitch = document.querySelector('.switch');
var lamp = document.querySelector('.innerLight');
lightSwitch.addEventListener('click', function() {
lamp.classList.toggle('hidden');
})
book1.addEventListener('mouseover', function() {
super1.classList.remove('hidden')
});
book1.addEventListener('mouseout', function() {
super1.classList.add('hidden')
});
book2.addEventListener('mouseover', function() {
super2.classList.remove('hidden')
});
book2.addEventListener('mouseout', function() {
super2.classList.add('hidden')
});
book3.addEventListener('mouseover', function() {
super3.classList.remove('hidden')
});
book3.addEventListener('mouseout', function() {
super3.classList.add('hidden')
});
calculator.addEventListener('mouseover', function() {
calc.classList.remove('hidden')
});
calculator.addEventListener('mouseout', function() {
calc.classList.add('hidden')
});
phone.addEventListener('mouseover', function() {
tipCalc.classList.remove('hidden')
});
phone.addEventListener('mouseout', function() {
tipCalc.classList.add('hidden')
});
// CALENDAR DATE
const dayDisp = document.querySelector('#day');
const monthDisp = document.querySelector('#month');
var months = ['Jan','Feb','Mar','Apr','May','June','July','Aug','Sept','Oct','Nov','Dec'];
var now = new Date();
var date = now.getDate();
var month = months[now.getMonth()];
dayDisp.innerText = date;
monthDisp.innerText = month;
// MAIN CLOCK //
var hourHand = document.querySelector('.hour');
var minHand = document.querySelector('.min');
var secHand = document.querySelector('.sec');
function setDate() {
const now = new Date;
const secs = now.getSeconds();
const secondDegrees = ((secs / 60) * 360) + 90;
secHand.style.transform = `rotate(${secondDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + 90;
minHand.style.transform = `rotate(${minsDegrees}deg)`;
const hours = now.getHours();
const hourDegrees = ((hours / 12) * 360) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setDate, 1000);
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background: #fdf5e6;
}
html {
box-sizing: border-box;
}
-----------
.display {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
background: #CCBBFF;
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
z-index: -10;
* {
position: absolute;
box-sizing: inherit;
}
*:before, *:after {
position: absolute;
content: '';
box-sizing: inherit;
}
.mainDisp {
position: absolute;
width: 1000px;
height: 550px;
// border: 1px solid black;
z-index: -10;
box-sizing: inherit;
.lamp {
position: absolute;
width: 120px;
height: 80px;
background: #494949;
-webkit-clip-path: polygon(50% 0%, 0 48%, 100% 48%);
clip-path: polygon(50% 0%, 0 48%, 100% 48%);
left: 45%;
top: 10%;
z-index: 4;
}
.innerLight {
position: absolute;
z-index: 1;
width: 100%;
height: 900px;
-webkit-clip-path: polygon(50% 0%, 0 48%, 100% 48%);
clip-path: polygon(50% 0%, 0 48%, 100% 48%);
background: rgba(253,245,230, 0.4);
left: 1%;
top: 55px;
}
</head>
<body>
<div class="container">
<header>
<div class="intro">
<h1 class="name">NAME</h1>
</div>
<nav>
<li>About</li>
<li>Projects</li>
<li>Skills</li>
<li>Contact</li>
</nav>
</header>
<div class='display'>
<div class="mainDisp">
<div class="lamp"></div>
<div class="innerLight hidden"></div>
<div class="string"></div>
<div class="super1 hidden"></div>
<div class="super2 hidden"></div>
<div class="super3 hidden"></div>
<!-- <div class="window" onclick="openURL('https://codepen.io/Eejay/full/VQBvOm/')" target="_blank"> -->
<div class='windows'>
<div class="outside">
<div class="moon"></div>
</div>
<div class="inner"></div>
<div class="inner two"></div>
</div>
<div class="ledge"></div>
<div class="mainClock">
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
</div>
Any help appreciated! I know its probably something really simple but i can't put my finger on it....
Your Problem is that you set your z-index of .display to -10. Its not clickable anymore.
Setting it to 0 will fix your issue:
.display {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
background: #CCBBFF;
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
z-index: 0;
}
take a look at this forked codepen.
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've just started to study javascript, and checked the example from the website https://cssanimation.rocks/clocks/. But, unfortunatelly, one part in js script does not work. The code is like this:
/*
* Starts any clocks using the user's local time
* From: cssanimation.rocks/clocks
*/
(function() {
// Initialise the locale-enabled clocks
//initInternationalClocks();
// Initialise any local time clocks
initLocalClocks();
// Start the seconds container moving
//moveSecondHands();
// Set the intial minute hand container transition, and then each subsequent step
//setUpMinuteHands();
})();
function initLocalClocks() {
//get the local time using javascript
var date = new Date();
var seconds = date.getSeconds();
var minutes = date.getMinutes();
var hours = date.getHours();
var hands = [
{
hand: "hours",
angle: (hours * 30) + (minutes/2)
},
{
hand: "minutes",
angle: (minutes * 6)
},
{
hand: "seconds",
angle: (seconds * 6)
},
];
for (var j = 0; j < hands.length; j++){
var elements = document.querySelectorAll('.' + hands[j].hand);
// window.alert(elements.length);
for (var k = 0; k < elements.length; k++)
{
// window.alert(elements[k]);
elements[k].style.webkitTransform = 'rotateZ(' + hands[j].angle + 'deg)';
elements[k].style.transform = 'rotateZ(' + hands[j].angle + 'deg)';
if (hands[j].hand === 'minutes'){
elements[k].parentNode.setAttribute('data-second-angle', hands[j+1].angle)
}
}
}
}
// Set a timeout for the first minute hand movement (less than 1 minute), then rotate it every minute after that
function setUpMinuteHands() {
// Find out how far into the minute we are
var containers = document.querySelectorAll('.minutes-container');
var secondAngle = containers[0].getAttribute("data-second-angle");
if (secondAngle > 0) {
// Set a timeout until the end of the current minute, to move the hand
var delay = (((360 - secondAngle) / 6) + 0.1) * 1000;
setTimeout(function() {
moveMinuteHands(containers);
}, delay);
}
}
.footer{
color: black;
font-style: italic;
position: fixed; bottom: 0; left:0; right: 0; height: 30px;
float: left;
clear: both;
}
.clock {
border-radius: 50%;
background: #fff url(./images/ios_clock.svg) no-repeat center;
background-size: 88%;
height: 20em;
padding-bottom: 0%;
position: relative;
width: 20em;
}
.clock::after{
background: #000;
border-radius: 50%;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 5%;
height: 5%;
z-index: 10;
}
.minutes-container, .hours-container, .seconds-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.hours {
background: #000;
height: 20%;
left: 48.75%;
position: absolute;
top: 30%;
transform-origin: 50% 100%;
width: 2.5%;
}
.minutes {
background: #000;
height: 40%;
left: 49%;
position: absolute;
top: 10%;
transform-origin: 50% 100%;
width: 2%;
}
.seconds {
background: #000;
height: 45%;
left: 49.5%;
position: absolute;
top: 14%;
transform-origin: 50% 100%;
width: 1%;
z-index: 8;
}
#keyframes rotate {
100% {
transform: rotateZ(360deg);
}
}
.hours-container{
animation: rotate 43200s infinite linear;
}
.minutes-container{
animation: rotate 3600s infinite linear;
}
.seconds-container {
animation: rotate 60s infinite linear;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="script.js" ></script>
</head>
<body>
<article class="clock">
<div class="hours-container">
<div class="hours"></div>
</div>
<div class="minutes-container">
<div class="minutes"></div>
</div>
<div class="seconds-container">
<div class="seconds"></div>
</div>
</article>
</body>
<footer>
<div class="footer">All materials are taken from the website cssanimation.rocks
</div>
</footer>
</html>
And when I open page, javascript is executed, but array "elements" from the line:
var elements = document.querySelectorAll('.' + hands[j].hand)
is empty. I've checked via alert windows, and really, querySelectorAll does not return objects, but name of css class seems to be correct... I've tried the same in console (like: document.querySelectorAll('.hands'), and it returns the needed div...
Could you, please, help me - what can be wrong with it?...
P.S. When I've pasted snippet to this post, the js script seems working... Now I'm completely lost - is it something with my browser settings, or something?
Thank you very much in advance for any suggestion/help!
Against all reason, I'm trying to create a vanilla JavaScript carousel.
I am having two problems:
1. The images move left at widths of -680px as they should but when I tried to create the same function for the right button, the left value goes to 1370px making the picture off the screen.
2. I would like for it to slide left rather jump left (same for right), I managed to get it to do this but it doesn't work on the first slide, only from the second slide.
Here is the HTML code just for the carousel:
<div id = "container">
<div id = "carousel">
<div class = "slide"><img class = "slideImage" class = "active" src = "sithCover.png"></div>
<div class = "slide"><img class = "slideImage" src = "darthVader.png"></div>
<div class = "slide"><img class = "slideImage" src = "darthSidious.png"></div>
<div class = "slide"><img class = "slideImage" src = "kyloRen.png"></div>
</div>
</div>
<div id = "left" class = "button"></div>
<div id = "right" class = "button"></div>
Here is the CSS code:
#container {
position: absolute;
top: 200px;
left: 100px;
width: 680px;
height: 360px;
white-space: nowrap;
overflow:hidden;
}
#carousel {
position: absolute;
width: 2740px;
height: 360px;
white-space: nowrap;
overflow: hidden;
transition: left 300ms linear;
}
.slide {
display: inline-block;
height: 360px;
width: 680px;
padding: 0;
margin: 0;
transition: left 300ms linear;
}
.slideImage {
position:relative;
height: 360px;
width: 680px;
float: left;
}
.button {
position: absolute;
top: 340px;
height: 60px;
width: 60px;
border-bottom: 12px solid red;
}
#left {
left: 115px;
border-left: 12px solid red;
transform: rotate(45deg);
}
#right {
left: 693px;
border-right: 12px solid red;
transform: rotate(-45deg);
}
Here is the JavaScript:
var carousel = document.querySelector('#carousel');
var firstVal = 0;
document.querySelector('#left').addEventListener("click", moveLeft);
function moveLeft (){
firstVal +=685;
carousel.style.left = "-"+firstVal+"px";
};
document.querySelector('#right').addEventListener("click", moveRight);
function moveRight() {
firstVal +=685;
carousel.style.left = "+"+firstVal+"px";
};
Here is a JSFiddle so that you can see what I mean:
"https://jsfiddle.net/way81/8to1kkyj/"
I appreciate your time in reading my question and any help would be much appreciated.
Ofcourse it goes from -685px on left click and then to +1370pxthe next right click; You are always adding 685 to your firstVal variable.
firstVal = 0
//firstVal is worth 0
moveLeft()
//firstVal is now worth 685
moveRight()
//firstVal is now worth 1370.
The problem is that when you apply the firstVal to your CSS thing in the javascript, you create a string to get your negative value (where you apply the "-" sign infront of firstVal)
Instead, write them like this
function moveLeft (){
firstVal -=685; //note we now subtract, the "-" should appear when the number becomes negative
carousel.style.left = firstVal + "px";
};
function moveRight() {
firstVal +=685;
carousel.style.left = firstVal + "px";
};
var left = document.getElementById("left");
left.addEventListener("click", moveLeft, false);
var right = document.getElementById("right");
right.addEventListener("click", moveRight, false);
var carousel = document.getElementById("carousel");
var images = document.getElementsByTagName("img");
var position = 0;
var interval = 685;
var minPos = ("-" + interval) * images.length;
var maxPos = interval * images.length;
//slide image to the left side <--
function moveRight() {
if (position > (minPos + interval)) {
position -= interval;
carousel.style.left = position + "px";
}
if (position === (minPos + interval)) {
right.style.display = "none";
}
left.style.display = "block";
}
//slide image to the right side -->
function moveLeft() {
if (position < (maxPos - interval) && position < 0) {
position += interval;
carousel.style.left = position + "px";
}
if (position === 0) {
left.style.display = "none";
}
right.style.display = "block";
}
#container {
position: absolute;
top: 200px;
left: 100px;
width: 680px;
height: 360px;
white-space: nowrap;
overflow: hidden;
}
#carousel {
position: absolute;
width: 2740px;
height: 360px;
white-space: nowrap;
overflow: hidden;
transition: left 300ms linear;
}
.slide {
display: inline-block;
height: 360px;
width: 680px;
padding: 0;
margin: 0;
transition: left 300ms linear;
}
.slideImage {
position: relative;
height: 360px;
width: 680px;
float: left;
}
.button {
position: absolute;
top: 340px;
height: 60px;
width: 60px;
border-bottom: 12px solid red;
}
#left {
left: 115px;
border-left: 12px solid red;
transform: rotate(45deg);
display: none;
}
#right {
left: 693px;
border-right: 12px solid red;
transform: rotate(-45deg);
}
<div id="container">
<div id="carousel">
<div class="slide">
<img class="slideImage" class="active" src="sithCover.png" alt="slide1">
</div>
<div class="slide">
<img class="slideImage" src="darthVader.png" alt="slide2">
</div>
<div class="slide">
<img class="slideImage" src="darthSidious.png" alt="slide3">
</div>
<div class="slide">
<img class="slideImage" src="kyloRen.png" alt="slide4">
</div>
</div>
</div>
<div id="left" class="button"></div>
<div id="right" class="button"></div>
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.