I'm trying to create a progress bar with a percentage text using only Javascript, but I don't know what value I need set in the function to limit the incrementation. The bar and the text keep increasing.
Need create 4 skills bar with 30% / 50% / 70% and 90%.
Help, plz! Accept any suggestions!
Here is my code.
<div class="progress">
<div class="progress-bar"></div>
<p value="30" class="text">30</p>
</div>
<script>
function update() {
let element = document.querySelector(".progress-bar");
let counter = document.querySelector(".text");
var width = 1;
var identity = setInterval(scene, 10);
function scene() {
if (width >= counter.value) {
clearInterval(identity);
} else {
width++;
element.style.width = width + '%';
counter.innerHTML = width * 1 + '%';
}
}
}
</script>
I am not sure if I am following the issue you are experiencing. I see your code can be improved and would solve some problems. Here what I suggest:
function update() {
let element = document.querySelector(".progress-bar");
let counter = document.querySelector(".text");
let width = 1;
setTimeout(scene, 1);
function scene() {
if (width < 100) {
width++;
element.style.width = width + '%';
counter.innerHTML = width * 1 + '%';
setTimeout(scene, 1);
} else {
//Complete action here
}
}
}
Welcome to Stackoverflow! Below you can see a working example of your code with minimal changes. I just defined that when the percenteage comes up to 100, it clears the interval on the page.
function update() {
let element = document.querySelector(".progress-bar");
let counter = document.querySelector(".text");
var percenteage = 0;
var identity = setInterval(scene, 50);
function scene() {
if (percenteage < 100) {
percenteage++;
element.style.width = percenteage + '%';
counter.innerHTML = percenteage + ' %';
} else {
clearInterval(identity);
console.log("Cleared!");
}
}
}
update();
.progress-bar {
height: 10px;
background-color: red;
}
<div class="progress">
<div class="progress-bar"></div>
<p value="30" class="text">30</p>
</div>
Related
I am currently trying to enable a disabled button, once a certain action is complete. In this case, a progress bar reaching 100%. My button looks like this:
var i;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width + "%";
}
}
}
}
<div id="myProgress">
<div id="myBar">0%</div>
</div>
<br><button onclick="move()">Run Experiment</button><br>
<button disabled id="btn1" onclick="location.href='https://google.com'" type="button">
Go to Google</button>
I'm thinking that there must be a possibility to have some sort of if else condition in the button itself. Ideally, I could do this in the body.
You already have a working conditional to stop the progress bar updates when 100% is reached. This is the place where you can activate the button. You can wrap that code to another function.
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
// Enable the button when the progres is 100%
var button = document.getElementById("btn1");
button.disabled = false;
button.innerHTML = "enabled Button";
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width + "%";
}
}
}
}
<button disabled id="btn1" type="button">disabled Button</button>
<div id="myProgress">
<div id="myBar">0%</div>
</div>
<br><button onclick="move()">Run Experiment</button><br>
I reduced timer to 10 ms to make snippet more representative
function move() {
var i=0;
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
document.getElementById("btn1").disabled = false;
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width + "%";
}
}
}
}
<div id="myProgress">
<div id="myBar">0%</div>
</div>
<br><button onclick="move()">Run Experiment</button><br>
<button disabled="enabled" id="btn1" onclick="location.href='https://google.com'" type="button">
Go to Google</button>
var progressContainer=document.getElementById("myProgress");
var progress = document.getElementById("myBar");
var googleBtn =document.getElementById("btn1");
var loading = false;
function move() {
if(loading)return;
loading =true;
var id = setInterval(frame, 50);
var width =parseInt(progress.offsetWidth /progressContainer.offsetWidth);
function frame() {
if (width >= 100) {
clearInterval(id);
googleBtn.disabled = false;
loading = false;
return;
}
width++;
progress.style.width = width + "%";
progress.innerHTML = width + "%";
}
}
#myProgress{
width:200px;
height:20px;
border:1px solid black;
background-color:#bbb;
}
#myBar{
width:0px;
background-color:green;
}
<div id="myProgress">
<div id="myBar">0%</div>
</div>
<br><button onclick="move()">Run Experiment</button><br>
<button disabled="enabled" id="btn1" onclick="location.href='https://google.com'" type="button">
Go to Google</button>
I have made a progress bar with decrease from width 100 to 0 using setInterval function. So basically every 20ms my width decrease from 1. Then when the width arrives at 0, I set the width to 100 to run the progress bar again. At every loop, I change the text inside my progress bar. What I'd like to do now is change the time interval (the 20ms) at every loop.
Si in my code, when I increase from one, my 20 is replaced by interval[i]... but I am stack to put setInterval inside a loop...
The code below works to change the text at every loop, but don't know how to improve it to change the time interval at every iteration of i...
function move() {
var message = ['test', 'test2', 'test3'];
var interval = [10, 20, 30]
var elem = document.getElementById("myBar");
var width = 100;
var i = 0;
var id = setInterval(frame, 20);
function frame() {
width = width - 1;
elem.style.width = width + "%";
elem.textContent = message[i];
if (width == 0 && i < 3) {
width = 100;
i++;
}
if (i == 3) {
clearInterval(id);
}
}
}
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 100%;
height: 30px;
background-color: #4CAF50;
}
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar"> </div>
</div>
<br>
<button onclick="move()">Click Me</button>
<html>
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 100%;
height: 30px;
background-color: #4CAF50;
}
</style>
<body>
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar"> </div>
</div>
<br>
<button onclick="move()">Click Me</button>
<script>
function move() {
var message = ['test','test2','test3'];
var interval = [10,20,30]
var elem = document.getElementById("myBar");
var width = 100;
var i = 0;
var id = setInterval(frame, interval[i]);
function frame() {
width = width - 1;
elem.style.width = width + "%";
elem.textContent = message[i];
if (width == 0 && i < 3) {
width = 100;
i++;
clearInterval(id);
id = setInterval(frame, interval[i]);
}
if (i == 3) {
clearInterval(id);
}
}
}
</script>
</body>
</html>
You could declare a variable outside function move that holds the iteration time step, like:
let iterationStep = 0;
Then inside
let iterationStep = 0;
function move() {
//...blabla
var id = setInterval(frame, interval[iterationStep]);
function frame() {
// blablabla
if (width == 0 && i < 3) {
width = 100;
i++;
// HERE
iterationStep = i;
}
//blablabla
}
}
So each time you are increasing i you are also increasing the value of iterationStep by i value. And it is the value that will be used to access the postition inside the array of intervals of the iteration once you click in move().
I have an issue with zooming in and out multiple elements with CSS zoom property, hard to explain it without showing the actual effect so I uploaded this on youtube:
here it is
I would like the font to zoom smoother than this, hopefully.
I've tried using scale property here but it ruins positioning, these are my current functions:
let zoom_param = 1;
function zooming_out(on_off) {
if (on_off == 0) {
if (zoom_param >= 0.1) {
zoom_out = setInterval(function() {
blocks.style.transition = 50 + 'ms';
blocks.style.zoom = zoom_param;
side_blocks.style.transition = 50 + 'ms';
side_blocks.style.zoom = zoom_param;
zoom_param -= 0.001;
}, 5);
}
} else {
clearInterval(zoom_out);
}
}
function zooming_in(on_off) {
if (on_off == 0) {
zoom_in = setInterval(function() {
blocks.style.transition = 50 + 'ms';
blocks.style.zoom = zoom_param;
side_blocks.style.transition = 50 + 'ms';
side_blocks.style.zoom = zoom_param;
zoom_param += 0.001;
}, 5);
} else {
clearInterval(zoom_in);
}
}
they are called by a mousedown and mouseup events (idk if it is important),
Thanks for help!
The CSS property zoom is not well supported. Try it with transform instead. No timers needed, the animation will be smooth as well. Hope this code snippets can help you.
var element = document.querySelector('.element');
element.style.transition = 'transform';
element.style.transitionTimingFunction = 'linear';
element.style.transformOrigin = 'left top';
element.style.transitionDuration = '2s';
let zoomMin = 1;
let zoomMax = 2;
document.querySelector('.zoom-in').addEventListener('click', function(e) {
zoomingIn();
});
document.querySelector('.zoom-stop').addEventListener('click', function(e) {
zoomingStop();
});
document.querySelector('.zoom-out').addEventListener('click', function(e) {
zoomingOut();
});
function zoomingStop() {
let scaleX = element.getBoundingClientRect().width / element.offsetWidth;
element.style.transform = 'scale(' + scaleX + ', ' + scaleX + ')';
}
function zoomingIn() {
element.style.transform = 'scale(' + zoomMax + ', ' + zoomMax + ')';
}
function zoomingOut() {
element.style.transform = 'scale(' + zoomMin + ', ' + zoomMin + ')';
}
div {
margin: 20px;
padding: 20px;
width: 100px;
height: 100px;
background: #0095ff;
}
<button class="zoom-in">zoomIn</button>
<button class="zoom-stop">stop</button>
<button class="zoom-out">zoomOut</button>
<div class="element">
<p>Some</p>
<p>Text</p>
</div>
I'm working on Some JS project And I'm trying to change scrolling speed and scroll to next division height of 100% ...
My idea for scrolling Down >
Detect InnerHTML height + detect scroll space from top , detect position using innerHTML height and a counter ....
when user scrolles down for fisrt time , position is 0 and scrollTop is more, so function is called and brings user to next div . (its OK)
but then ,what can I do to bring user back to previous div when user scrolls UP ?
Here are my codes :
<html>
<head>
<style>
body,html {
margin: 0;
height: 100%;
width: 100%;
}
.scrollers {
height: 100%;
width: 100%;
transition: all 1s;
-webkit-transition: all 1s;
}
#N1 {
background-color: #725a5a;
}
#N2 {
background-color: #4a478d;
}
#N3 {
background-color: #478d6f;
}
#N4 {
background-color: #8d8a47;
}
#status {
text-align: center;
width: 100%;
color: #000;
font-size: 20px;
position: fixed;
z-index: 10;
top: 5px;
}
</style>
<script>
var $firstPosition = 1;
window.onscroll = scroll;
var $counter = 0;
var $status = "play";
function scroll() {
var $sctop = document.body.scrollTop;
var $inrH = window.innerHeight;
var $secst;
if (($status=="pause") || ($secst=="pause")){
} else if ($status=="play"){
var $position = $counter * $inrH;
if ($sctop>$position) {
$counter++;
$position = $counter * $inrH;
$status = "pause";
$secst = "pause";
callMeInterval = setInterval( function() { if(!($sctop==$position)){window.scrollTo(0,$firstPosition);$firstPosition++;$sctop = document.body.scrollTop;document.getElementById("status").innerHTML = "sctop = " + $sctop + " $position = " + $position + "$counter = " + $counter; } else if($sctop==$position) {$status = "play";secst==""} }, 1 );
}
// Problem Starts Here
else {
$counter--;
$position = $counter * $inrH;
$status = "pause";
$secst = "pause";
callMeInterval = setInterval( function() { if(!($sctop==$position)) {$firstPosition--;window.scrollTo(0,$firstPosition);$sctop = document.body.scrollTop;document.getElementById("status").innerHTML = "sctop = " + $sctop + " $position = " + $position + "$counter = " + $counter; } else if($sctop==$position) {secst=="";$status = "play"} }, 1 );
}
}
}
</script>
</head>
<body>
<div id="status">
</div>
<div id="N1" class="scrollers">
</div>
<div id="N2" class="scrollers">
</div>
<div id="N3" class="scrollers">
</div>
<div id="N4" class="scrollers">
</div>
</body>
</html>
I'm sure the whole thing is just easier with JQUERY , but this is my project for Javascript Class . Thanks
You don't clear your interval, so this is the reason of flickering.
clearInterval(callMeInterval);
I recommend you to use requestAnimationFrame instead of using window.setInterval
Here you have working sample rebuild with requestAnimationFrame
var lastScrollPosition = document.body.scrollTop,
sectionNo = 0;
function doScroll(scrollPosition, step, first) {
var height = window.innerHeight,
min = height * sectionNo,
max = height * (sectionNo + 1);
scrollPosition += step;
if (min < scrollPosition && scrollPosition < max) {
// here should be some animation control
document.body.scrollTop = scrollPosition;
// Call next animation frame
window.requestAnimationFrame(doScroll.bind(null, scrollPosition, step));
} else {
// It fires, when scroll is done
lastScrollPosition = scrollPosition;
document.addEventListener("scroll", scrollListener);
}
}
function scrollListener(e) {
var scrollPosition = document.body.scrollTop,
step;
// Stop scroll listening
document.removeEventListener("scroll", scrollListener);
// Get direction
step = scrollPosition >= lastScrollPosition ? 5 : -5;
// Go back to initial position
document.body.scrollTop = lastScrollPosition;
// Animate
window.requestAnimationFrame(doScroll.bind(null, lastScrollPosition, step, true));
}
document.addEventListener("scroll", scrollListener);
Hi I am just trying to do an each loop on elements containing the class front but only first element is getting updated for some reason please help. May be it is a silly mistake but i am unable to find it.
jsfiddle:
http://jsfiddle.net/sVTCK/7/
HTML:
<div class="wrapper">
<div class="front"></div>
<div class="front"></div>
<div class="front"></div>
<div class="front"></div>
<div class="front"></div>
<div class="front"></div>
</div>
jquery:
function setSlide(rows, dimension) {
var topPos = 0;
var leftPos = 0;
$(".front").each(function(i, e) {
topPos++;
if (i % rows === 0) {
topPos = 0;
leftPos++;
}
var position = topPos * dimension + " " + (leftPos - 1) * dimension;
e.style.backgroundPosition = position;
e.innerHTML = e.style.backgroundPosition;
});
}
setSlide(3,200);
css:
.front{
width:200px;
height:200px;
background:url(some image);
border:1px solid black;
float:left
}
.wrapper{
overflow:hidden;
width:610px;
}
function setSlide(rows, dimension) {
var topPos = 0;
var leftPos = 0;
$(".front").each(function(i, e) {
topPos++;
if (i % rows === 0) {
topPos = 0;
leftPos++;
}
var position = topPos * dimension + 'px ' + (leftPos - 1) * dimension +'px';
e.style.backgroundPosition = position;
e.innerHTML = e.style.backgroundPosition;
});
}
setSlide(3,200);
THE WORKING DEMO.
ok I've refractored the javascript stlightly into jquery since your using it and moved from the vanilla javascript:
function setSlide(rows, dimension) {
var topPos = 0;
var leftPos = 0;
var front = $('.front');
$.each(front, function(index, val) {
topPos++;
if (index % rows === 0) {
topPos = 0;
leftPos++;
}
var position = topPos * dimension + "px, " + (leftPos - 1) * dimension + 'px';
$(this).css('backgroundPosition', position);
$(this).append(position);
});
}
setSlide(3,200);
http://jsfiddle.net/sVTCK/18/
If you can tell us what your trying to do with the if statement it would help to add the background-position...
You should be reallying on jQuery if you have it in page since it'll be quicker and you should also be caching your variables