Have a customized progress bar in HTML on click of a button - javascript

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>

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 do I change the left margin of div based on scroll and using javascript?

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)

Is there a way to stop my character going off the screen?

I have a game with a character that goes to a random position whenever you click on it. Also, I made it so the game automatically goes into full-screen. However, sometimes, the character goes way off-screen and (because there are no scroll bars in full-screen) you cant get to it. The code is below.
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Alfa Slab One' rel='stylesheet'> <!-- add the font used -->
<script type="text/javascript">
function move() { //move the bird
const height = screen.height; //set the screen params
const width = screen.width;
const box = document.getElementById("bird"); //search for the bird
let randY = Math.floor((Math.random() * height) + 1); //randomise the coords
let randX = Math.floor((Math.random() * width) + 1);
box.style.transform = `translate(${randX}px, ${randY}px)`; //move the bird
addScore(); //add the score
}
</script>
<script type="text/javascript">
function getreqfullscreen(){ //full screen it. I cant really understand how it works
var root = document.documentElement
return root.requestFullscreen || root.webkitRequestFullscreen || root.mozRequestFullScreen || root.msRequestFullscreen
}
function startFullScreen() {
var pagebody = document.getElementById("main");
var globalreqfullscreen = getreqfullscreen();
document.addEventListener('click', function(e){
var target = e.target
globalreqfullscreen.call(pagebody)
}, false)
}
</script>
<script type="text/javascript">
var points = 0;
function addScore() { //add the score
var pointcount = document.getElementById("scoreCount"); //get the score counter
//var points = 45; --used for testing
points = points + 1; //increment the points
pointcount.innerText = "score: " + points;
//pointCounter.removeChild(pointCounter.childNodes[0]); --used for an older prototype
}
/**************************************/
function startCountdown() { //initiate the timer - starts when the <body> loads
startFullScreen(); //make it full screen
var time = 9999999999999999999999; //would be 60, but I made it infinite
setInterval(function() { //decrease every second
var timer = document.getElementById("Timer"); //get the timer
time = time - 1; //decrement the timer
timer.innerText = "time: " + time;
if(time == 0) { //if you finished
var continuE = prompt("Would you like to restart? (type Y for yes and N for no (case sensitive)).");
if(continuE == "Y") {
window.location.reload();
} else {
history.go(-1);
}
}
},1000);
}
</script>
<style>
html {
cursor: crosshair;
background-color: #00b0e6;
user-select: none;
}
#bird {
position: absolute;
background-color: #ffffff;
cursor: crosshair;
transition: all 1s ease-in-out;
}
#bird:hover {
invert: 0 0 12px #ff0000;
}
/*
span {
height:10px;ss
width:200px;
border:5px double red;
color:#ff00ff;
background-color:#00ffff;
}
*/
p {
color: #ff00ff;
background-color: #000000;
border: 5px double red;
height: 60px;
width: 85px;
margin: 10px;
font-family: "Times New Roman";
}
.restartButton {
border-radius: 999px;
background-color: #ff00ff;
color: #00fffff;
border: 10px double blue;
transition: all 1s ease-out;
margin-left: 50%;
margin-right: 50%;
position: relative;
cursor: help;
}
.restartButton:hover {
border-radius: 999px;
background-color: #ffffff;
color: #4500fff;
border: 10px solid red;
}
#scoreCount {
color: #aff823;
position: fixed;
top: 0;
width: 10px;
height: 10px;
}
#Timer {
color: #aff823;
position: fixed;
top: 0;
left: 200px;
width: 10px;
height: 10px;
}
span {
font-family: Alfa Slab One;
}
#main {
background-color: #00b0e6;
}
</style>
</head>
<body onload="startCountdown()" id="body">
<div id="main">
<div id="pointCounter"><span id="scoreCount"></span><span id="Timer"></span></div>
<input type="button" value="RESTART" onclick="window.location.reload();" class="restartButton"/>
<img src="https://art.pixilart.com/81a784782ea5697.png" alt="" height="50px" width="50px" id="bird" onclick="move();">
</div>
<noscript>
YOU DO NOT HAVE JAVASCRIPT ENABLED. PLEASE ENABLE JAVASCRIPT ELSE THIS WEB PAGE WILL NOT WORK.
</noscript>
</body>
</html>
Because of how stack overflow works, it doesn't go into full-screen.
P.S. I have made it infinite time, it's meant to only be 60 seconds.

How to increase or decrease a progress bar width within given time with pure JavaScript?

I'm making a typing game, there is a 1-second interval function in my
game already but I need something animated in UI. It will visually
show the user how the time is running out.
In this code, I wanted to increase the progress bar from 0% to 100% in 7 seconds. Though I want decrease actually
How can I do this with pure javascript?
Timing is Important here, The whole decrease/increase process should be done within my given time
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 1);
// i want it to be done in 7 seconds
var time = 7000;
function frame() {
if (width >= time) {
clearInterval(id);
} else {
width++;
elem.style.width = (100*width)/time + '%';
elem.innerHTML = Math.round((100*width)/time) + '%';
}
}
}
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 0%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
<!DOCTYPE html>
<html>
<body>
<div id="myProgress">
<div id="myBar">0%</div>
</div>
<br>
<button onclick="move()">Start</button>
</body>
</html>
I would recommend using requestAnimationFrame first. Next, use a timer instead of counting how many times it is called. I made a few minor adjustments (you can call it with a different number to have a different delay).
RAF docs: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
function move(delay) {
var elem = document.getElementById("myBar");
var end = Date.now() + delay;
var frame = () => {
var timeleft = Math.max(0, end - Date.now());
elem.style.width = (100*timeleft)/delay + '%';
elem.innerHTML = (timeleft/1000).toFixed(1) + 's';
if (timeleft === 0) return;
requestAnimationFrame(frame);
};
requestAnimationFrame(frame);
}
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 100%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
<!DOCTYPE html>
<html>
<body>
<div id="myProgress">
<div id="myBar">7.0s</div>
</div>
<br>
<button onclick="move(7000)">Start</button>
</body>
</html>
Like this?
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 1);
// i want it to be done in 7 seconds
var time = 7000;
function frame() {
if (width >= time) {
clearInterval(id);
} else {
width++;
elem.style.width = 100-(100*width)/time + '%';
elem.innerHTML = 100-Math.round((100*width)/time) + '%';
}
}
}
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 100%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
<!DOCTYPE html>
<html>
<body>
<div id="myProgress">
<div id="myBar">100%</div>
</div>
<br>
<button onclick="move()">Start</button>
</body>
</html>

Javascript Progressbar animation using JavaScript only

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>

Categories