I was trying to build a clean countdown timer with a progress bar, I came up with this code I am not sure what seems to be the problem. CSS is working great I am pretty sure something is wrong with the JavaScript code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
/* Do not take in account */
html{padding-top:30px}a.solink{position:fixed;top:0;width:100%;text-align:center;background:#f3f5f6;color:#cfd6d9;border:1px solid #cfd6d9;line-height:30px;text-decoration:none;transition:all .3s;z-index:999}a.solink::first-letter{text-transform:capitalize}a.solink:hover{color:#428bca}
</style>
</head>
<body>
<script>
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60);
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(600, 600, $('#progressBar'));
</script>
<script> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="progressBar">
<div class="bar"></div>
</div>
</body>
</html>
You need to restructure your code. There are few errors found
1.Uncaught ReferenceError:
$ is not defined because link was added in between the tag it should be added with src attribute.
2.The $element argument is getting undefined because script is added before html and is unable to get the required data as it is called on page load so, I have moved it to bottom of the page.
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60);
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(600, 600, $('#progressBar'));
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
/* Do not take in account */
html{padding-top:30px}a.solink{position:fixed;top:0;width:100%;text-align:center;background:#f3f5f6;color:#cfd6d9;border:1px solid #cfd6d9;line-height:30px;text-decoration:none;transition:all .3s;z-index:999}a.solink::first-letter{text-transform:capitalize}a.solink:hover{color:#428bca}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="progressBar">
<div class="bar"></div>
</div>
</body>
</html>
Related
I was trying to build a clean countdown timer with a progress bar, I came up with this code I am not sure what seems to be the problem. I am pretty sure CSS is working all right and there has to be some problem with JavaScript.The countdown did not start instead I was left with just this barenter image description here
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<style>
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px;
/* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
/* Do not take in account */
html {
padding-top: 30px
}
a.solink {
position: fixed;
top: 0;
width: 100%;
text-align: center;
background: #f3f5f6;
color: #cfd6d9;
border: 1px solid #cfd6d9;
line-height: 30px;
text-decoration: none;
transition: all .3s;
z-index: 999
}
a.solink::first-letter {
text-transform: capitalize
}
a.solink:hover {
color: #428bca
}
</style>
</head>
<div id="progressBar">
<div class="bar"></div>
</div>
<body>
<script>
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({
width: progressBarWidth
}, 500).html(Math.floor(timeleft / 60) + ":" + timeleft % 60);
if (timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(600, 600, $('#progressBar'));
</script>
</body>
</html>
I Think You Have Error In Many Things Like You Have To Add Jquery cdn Before script ,Error in Script tag ,And Also You Have to add html elements before script tag
<!DOCTYPE html>
<html>
<head>
<style>
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
/* Do not take in account */
html{padding-top:30px}a.solink{position:fixed;top:0;width:100%;text-align:center;background:#f3f5f6;color:#cfd6d9;border:1px solid #cfd6d9;line-height:30px;text-decoration:none;transition:all .3s;z-index:999}a.solink::first-letter{text-transform:capitalize}a.solink:hover{color:#428bca}
</style>
</head>
<body>
<div id="progressBar">
<div class="bar"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60);
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(6000, 6000, $('#progressBar'));
</script>
</body>
</html>
Try This It Work Fine For Me
I found different error, move the jquery import, and add the function on document ready.
<!DOCTYPE html>
<html>
<head>
<style>
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
/* Do not take in account */
html{padding-top:30px}a.solink{position:fixed;top:0;width:100%;text-align:center;background:#f3f5f6;color:#cfd6d9;border:1px solid #cfd6d9;line-height:30px;text-decoration:none;transition:all .3s;z-index:999}a.solink::first-letter{text-transform:capitalize}a.solink:hover{color:#428bca}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script>
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60);
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
$(function() {
progress(600, 600, $('#progressBar')); });
</script>
<div id="progressBar">
<div class="bar"></div>
</div>
</body>
</html>
I am new to Javascript and CSS. I have a div that will contain an image. The below code, I pieced it together after watching some YouTube videos and going over some documentation, however I am sure that this is not the right code.
https://jsfiddle.net/0hp97a6k/
* {
margin: 0;
padding: 0;
}
body {
background-color: powderblue;
height: 2000px;
padding: 0 0;
}
div {
margin: 0;
}
.headerspace {
width: 100%;
height: 20px;
background-color: white;
}
.header {
width: 100%;
height: 300px;
background-color: maroon;
display: flex;
}
.logo {
width: 200px;
height: 200px;
background-color: red;
margin-top: 50px;
margin-left: 50px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="headerspace"></div>
<div class="header">
<div class="logo" id="logoid">
</div>
</div>
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function() {
var value = window.scrollY;
logo.style.marginleft = value * 0.5 + 'px';
})
</script>
</body>
</html>
How do I set the left margin based on scroll?
Also can scroll based properties be applied to two margins, say top and right at the same time?
marginleft should be marginLeft in your javascript
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function(){
var value = window.scrollY;
logo.style.marginLeft = value * 0.5 + 'px';
})
</script>
And then if you want to edit the left and top you can do the following
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function(){
var value = window.scrollY;
logo.style.marginLeft = value * 0.5 + 'px';
logo.style.marginTop = value * 0.5 + 'px';
})
</script>
To make sure the logo element goes back where it started you should edit the css like this
* {
margin: 0;
padding: 0;
}
body {
background-color: powderblue;
height: 2000px;
padding: 0 0;
}
div{
margin: 0;
}
.headerspace{
width: 100%;
height: 20px;
background-color: white;
}
.header{
width: 100%;
height: 300px;
background-color: maroon;
display: flex;
padding-top: 50px;
padding-left: 50px;
}
.logo{
width: 200px;
height: 200px;
background-color: red;
}
I have removed the margin from .logo because that will be overwritten and added those values as padding to the parent (.header)
I need to show a user some questions in a loop, and while displaying a question there needs to be displayed a countdown timer like this one:
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear');
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
$('document').ready(function() {
$('#start').click(function() {
progress(5, 5, $('#progressBar'));
});
});
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 100%;
background-color: #CBEA00;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button id='start'>Start</button>
<div id="progressBar">
<div></div>
</div>
The problem is: If I activate the timer (press the start button in the fiddle) while it's already started and going down, it starts to do crazy things: going up and down.
I guess this has to do with the recursive nature of setTimeout().
How do I reinitialize the timer (progressBar function) each time anew?
You have to clear the timeout. Like this:
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear');
if(timeleft > 0) {
if (window.timer) {
clearTimeout(window.timer)
}
window.timer = setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
$('document').ready(function() {
$('#start').click(function() {
progress(5, 5, $('#progressBar'));
});
});
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 100%;
background-color: #CBEA00;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button id='start'>Start</button>
<div id="progressBar">
<div></div>
</div>
Store the timeout in a variable and clear it when you want to start over.
var animating = null;
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear');
if(timeleft > 0) {
clearTimeout(animating);
animating = setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
$('document').ready(function() {
$('#start').click(function() {
progress(5, 5, $('#progressBar'));
});
});
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 100%;
background-color: #CBEA00;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button id='start'>Start</button>
<div id="progressBar">
<div></div>
</div>
I am a novice HTML coder and have a silly issue!
I want to have a customized progress bar that shows the progress once SUBMIT is clicked. I tried using the tag of HTML, but it did not do the job for me.
How can I have an animation like this integrated with my code: http://www.jqueryscript.net/chart-graph/Customizable-Liquid-Bubble-Chart-With-jQuery-Canvas.html#viewSource
I am not able to figure out in what section what code has to be put.
I have tried this,
<!DOCTYPE html>
<html>
<style>
#myProgress {
position: relative;
width: 100%;
height: 30px;
background-color: #ddd;
}
#myBar {
position: absolute;
width: 10%;
height: 100%;
background-color: #4CAF50;
}
#label {
text-align: center;
line-height: 30px;
color: white;
}
</style>
<body>
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar">
<div id="label">10%</div>
</div>
</div>
<br>
<button onclick="move()">Click Me</button>
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("label").innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
This doesn't work because I dont want the progress bar to be visible before I click submit.
in #myBar Css Property
Display:none
is Used and in Function Again This Property is Changed to Display:inline by
elem.style.display = "inline";
Here is The Modified Code.
<!DOCTYPE html>
<html>
<style>
#myProgress {
position: relative;
width: 100%;
height: 30px;
background-color: #ddd;
}
#myBar {
position: absolute;
width: 10%;
height: 100%;
background-color: #4CAF50;
display:none; /*Displays None */
}
#label {
text-align: center;
line-height: 30px;
color: white;
}
</style>
<body>
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar">
<div id="label"></div>
</div>
</div>
<br>
<button onclick="move()">Click Me</button>
<script>
function move() {
var elem = document.getElementById("myBar");
var label=document.getElementById("label");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.display = "inline"; //Sets Display property to its default value.
elem.style.width = width + '%';
label.innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
You can use this code if you have jquery 1.8. In this version of jquery you can get progress of animation using progress property. So you can use animate() instead of setInterval() to do this work. See example
$("button").click(function(){
var width = $(".progress").children("div").width();
if (width == 0){
var percent = $(".progress").data("percent");
$(".progress").children("div").width("0%").show().animate({
"width": percent + "%"
}, {
duration: 2000,
progress: function(a, p) {
var newPer = Math.round(percent * p);
$(".progress").children("div").html(newPer + "%");
}
});
}
});
.progress {
width: 100%;
height: 30px;
background-color: #eee;
border: 1px solid #ddd;
border-radius: 3px;
overflow: hidden;
}
.progress > div {
width: 0%;
height: 100%;
background: #1C90F3;
color: #fff;
display: none;
font-family: tahoma;
line-height: 30px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress" data-percent="80">
<div></div>
</div>
<br/>
<button>Animate progress</button>
I need to create an animation with JavaScript. I can't use CSS3. When one loads the page the progress bar should increase in width to the given parameter x.
I'm having trouble implementing it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#progressbar
{
background-color: black;
border-radius: 13px;
padding: 3px;
width:100%;
}
#progressbar2
{
background-color: orange;
width: 15%;
height: 20px;
border-radius: 10px;
text-align: center;
position: relative;
}
</style>
<script>
function func(x)
{
var result = x;
document.getElementById("progressbar2").style.width=result+"%";
document.getElementById("progressbar2").innerHTML=result +"%";
}
</script>
</head>
<body onload="func(50);">
<div id="progressbar">
<div id="progressbar2"></div>
</div>
</body>
</html>
You can use requestAnimationFrame() to accomplish what you're looking for. You can wrap up it all up in a function, like this:
// Move the progress bar to the given `n` over `overMs` ms.
function progressBarTo(id, n, overMs) {
function progressToStep(x) {
var result = x;
document.getElementById(id).style.width = result + "%";
document.getElementById(id).innerHTML = result.toFixed(2) + "%";
}
var start;
function animateBar(timestamp) {
if (!start) start = timestamp;
var progress = timestamp - start;
progressToStep((progress / overMs) * n);
if (progress < overMs) {
requestAnimationFrame(animateBar);
} else {
progressToStep(n);
}
}
requestAnimationFrame(animateBar);
}
progressBarTo("bar1", 20, 5000);
progressBarTo("bar2", 40, 2500);
progressBarTo("bar3", 60, 1500);
progressBarTo("bar4", 80, 750);
.outer-bar {
background-color: black;
border-radius: 13px;
padding: 3px;
width: 100%;
}
.inner-bar {
background-color: orange;
width: 0%;
height: 20px;
border-radius: 10px;
text-align: center;
position: relative;
}
<div class="outer-bar">
<div id="bar1" class="inner-bar"></div>
</div>
<div class="outer-bar">
<div id="bar2" class="inner-bar"></div>
</div>
<div class="outer-bar">
<div id="bar3" class="inner-bar"></div>
</div>
<div class="outer-bar">
<div id="bar4" class="inner-bar"></div>
</div>