I have a one-page website with a section for a progress bar. I have a function for animation and all that, and I know how to start it when the page loads. But I don't know how to start it when I scroll to that section.
JS code :
window.onload = function() {
move();
};
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 95) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
If you want to trigger on scroll, you could do that through jquery.
$(element).scroll(() ={
function ()
}
But if you want to animate on scroll, I'd advise you to use a library called Gsap. Look in the scrollTrogger document.
Simply use the scroll event on the whole document:
document.addEventListener('scroll', function(e) {
move();
});
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 95) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
<div style="height:1000px;width:100%;">
<div style="height:200px">padding</div>
<div id="myBar" style="background:green;">my bar</div>
</div>
Related
I have two animations which both work, but I'd like to have it so the second animation starts only after the first animation has finished, I tried this with Javascript callbacks but can't seem to get it to work. I'm sure someone can show me how to do this. There must be other ways to do this too? I'd be really interested to find out what they are actually. It's amazing how many different ways there are too do things isn't it.
document.addEventListener("DOMContentLoaded", first, false);
var obj, height, goUp;
function first() {
obj = document.getElementById("thetext");
obj.style.position = "absolute";
obj.style.bottom = "10px";
height = document.body.clientHeight;
goUp = true
second();
}
function second() {
var pos = parseInt(obj.style.bottom, 10);
(goUp) ? pos++ : pos--;
obj.style.bottom = pos + "px";
if (pos < 0) {
goUp = true;
}
if (pos > height) {
goUp = false;
}
if (pos < 0) {
return;
}
setTimeout(second, 10);
}
var objz, width, goRight;
function animatefirst() {
objz = document.getElementById("tues");
objz.style.position = "absolute";
objz.style.left = "10px";
objz.style.bottom = "10px";
width = document.body.clientWidth;
goRight = true;
animatesecond();
}
function animatesecond() {
var position = parseInt(objz.style.left, 10);
(goRight) ? position++ : position--;
objz.style.left = position + "px";
if (position > width) {
goRight = false;
}
if (position < 0) {
goRight = true;
}
if (position < 0) {
return;
}
setTimeout(animatesecond, 10);
}
<body>
<p id="thetext">ANIMATION </p>
<p id="tues"> Tuesday</p>
</body>
I fixed this issue in a simple way, I just put my call to the next function just before the return; which closes the current function. So the call to the next function is not inserted until the part in the code where the first function has finished, to avoid overlapping functions. I'm surprised no one could help with this, but it must be a very busy site :)
if (pos < 0) {
nextfunction();
return;
}
I am trying to make progress bars using JS.
I am trying to loop through my classes to get the value of an attribute and thus increase the width of my progress bars.
function prog(){
var width = 1;
var elem = document.getElementsByClassName('bar');
var id = setInterval(frame, 10);
var attr = elem.getAttribute("data-progress");
function frame(){
if(width >= attr){
clearInterval(id);
} else {
width++;
for(i= 0; i < elem.length; i++){
elem[i].style.width = width + '%';
}
}
}
}
My question is, How do i access attr inside a loop in JS?
You can use a simple for ... of loop to go through all your elements :
function prog() {
let elem = document.getElementsByClassName('bar');
let width = 1;
for (let el of elem) { //HERE
let attr = el.getAttribute("data-progress");
let id = setInterval(_ => {
if (width >= attr) {
clearInterval(id);
} else {
width++;
for (i = 0; i < elem.length; i++) {
elem[i].style.width = width + '%';
}
}
}, 10);
}
}
I've searched so much but I can't figure it out how to configure my bars.
I plan to put 3 loading bars that execute automatically according time:
1st will start from 30 to 60 seconds
2nd from 300 to 1800 seconds
3rd from 1801 to 1860 seconds
My Code is this ( be aware that I don't know how to change this values, I tried but don't work properly... This is the help I need, the frame stuff )
var my1Bar = setTimeout(start1Bar, 30000);
var my2Bar = setTimeout(start2Bar, 300000);
var my3Bar = setTimeout(start3Bar, 1800000);
function start1Bar() {
var elem = document.getElementById("my1Bar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
function start2Bar() {
var elem = document.getElementById("my2Bar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
function start3Bar() {
var elem = document.getElementById("my3Bar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
Thank you all
startBar(3000,4000 ,"my1Bar");
startBar(4001,20000 ,"my2Bar");
startBar(20001,22000,"my3Bar");
function startBar(start_ms,end_ms,id){
return setTimeout(function(){
loadBar(start_ms,end_ms,id);
}, start_ms);
}
function loadBar(start_ms,end_ms,id){
var elem = document.getElementById(id);
var widthAtStart = 0;
var widthAtEnd = 100;
var timeDuration=end_ms-start_ms;
var remindWidth=widthAtEnd-widthAtStart;
var curWidth=widthAtStart;
var lastTime=Date.now();
var intervalId = setInterval(frame, 10);
function frame() {
var dt=Date.now()-lastTime;
lastTime=Date.now();
var w=remindWidth*dt/timeDuration;
if (curWidth >= widthAtEnd) {
clearInterval(intervalId);
elem.style.width = '100%';
} else {
curWidth+=w;
elem.style.width = curWidth + '%';
}
}
}
.bars>div{
position:relative;
width:100%;
height:22px;
padding:1px;
margin:2px;
background:#ccc;
}
.bars>div>div{
position:absolute;
height:20px;
width:0;
background:red
}
<div class="bars">
<div><div id="my1Bar"></div></div>
<div><div id="my2Bar"></div></div>
<div><div id="my3Bar"></div></div>
</div>
Here is a bit refactored version of your code. To run a progress bar you need to call startBar() function with the time you want it to start and end and the id of a progress bar element. For example, in the code below the first bar will start after 1 second and end after 6 seconds (running for 5 seconds in total).
I also used HTML5 progress element. It is much better than using divs as progress is semantic and you don't have to manipulate any css parameters, you just change it's value. Plus it has a bonus of looking native to the platform and browser it is rendered on. However, if you want to style it to look the same on all platforms, it can be a bit of a pain. Here is a styling guide for progress element
startBar(1, 6, "first");
startBar(3, 6, "second");
startBar(5, 8, "third");
function startBar(from, to, id) {
// Convert seconds to miliseconds
from *= 1000;
to *= 1000;
// Delay the start of the loop for 'from' seconds
setTimeout(function() {
var bar = document.getElementById(id);
var duration = to - from;
var start = Date.now();
// Start the loop
var loop = setInterval(function() {
var runningFor = Date.now() - start;
if (runningFor <= duration) {
bar.value = Math.ceil(runningFor / duration * 100);
} else {
bar.value = 100;
clearInterval(loop);
}
}, 10);
}, from);
}
progress {
width: 100%;
}
<progress id="first" value="0" max="100"></progress>
<progress id="second" value="0" max="100"></progress>
<progress id="third" value="0" max="100"></progress>
My javascript is not working in the way i want it to.
I have a textbox and a progresbar.
The javascript has to read the string from the textbox (TbProd1) and look which string it is. Every string has a different value in the progresbar (25%, 50% and 100%).
The textbox has 3 different options:
1: Vrijgegeven
2: Gepicked
3: Voltooid
The script wont compare my textbox string. Can somebody find my mistake?
Here is my code:
<script>
function move1() {
var textarea1 = document.getElementById('TbProd1');
var word1 = "Vrijgegeven";
var word2 = "Gepicked";
var word3 = "Voltooid";
var textValue = textarea1.value;
if (textValue == (word1)) {
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 25) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
}
}
}
else if (textValue == (word2)) {
var elem = document.getElementById("myBar");
var width = 25;
var id = setInterval(frame, 10);
function frame() {
if (width >= 50) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
}
}
}
else if (textValue == (word3)) {
var elem = document.getElementById("myBar");
var width = 50;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="content">
<div>
<asp:TextBox ID="TbProd1" runat="server"></asp:TextBox></div>
<div id="myProgress">
<div id="myBar">
<div id="LblProgBar1">0%</div>
</div>
</div>
</div>
</form>
</body>
</html>
<asp:TextBox> after compiling has unique identifier. So seems you can't find this control by 'TbProd1'. Try to use "ClientIDMode"="Static" first.
<asp:TextBox ID="TbProd1" runat="server" ClientIDMode="Static"></asp:TextBox>
How do you hook up the event to the textbox? The code itself does work, so I wonder if it isn't either an issue with the ID from the TextBox being different from what you expect or the event just not calling the move1() function.
function move1() {
var textarea1 = document.getElementById('TbProd1');
var word1 = "Vrijgegeven";
var word2 = "Gepicked";
var word3 = "Voltooid";
var textValue = textarea1.value;
if (textValue == (word1)) {
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 25) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
}
}
}
else if (textValue == (word2)) {
var elem = document.getElementById("myBar");
var width = 25;
var id = setInterval(frame, 10);
function frame() {
if (width >= 50) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
}
}
}
else if (textValue == (word3)) {
var elem = document.getElementById("myBar");
var width = 50;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
}
}
}
}
<form id="form1" runat="server">
<div id="content">
<div>
<input type="text" onkeyup="move1()" id="TbProd1" />
<div id="myProgress">
<div id="myBar">
<div id="LblProgBar1">0%</div>
</div>
</div>
</div>
</form>
try this getElementById
var textarea1=document.getElementById('<%=TbProd1.ClientID %>').value;
i think your problem is solved this solution
Ok I have some JS that depending on the percentage the progress bar will load and display the % inside the bar.
see working code bellow
$("#next-button").click(function() {
a.eventHub.publish("ui/nextclick")
});
UI.prototype.updatePercentile = function(a) {
if (this.isStandalone || -1 == a.percentile) $("#results-percentages")
.hide();
else {
$("#results-percentages")
.show(), $("#results-percentile-1")
.html(a.percentile), $("#results-suffix")
.html(a.suffix), $("#results-suffix-2")
.html(a.suffix), 1 === a.timesTaken ? ($("#results-timestaken")
.html(a.timesTaken + " time"), $("#results-percentile-2")
.html("100")) : ($("#results-timestaken")
.html(a.timesTaken + " times"), $("#results-percentile-2")
.html(a.percentile));
var b = 0;
$("#percentile-scale .scale-item")
.each(function() {
b += $(this)
.outerWidth()
}), $("#percentile-scale .scale-indicator").css("width", b * a.percentile / 100 + "%"),
$(".scale-marker").css("left", b * a.percentile / 100 + "%")
}
}
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 50);
function frame() {
if (width >= document.getElementById("results-percentile-2").innerHTML) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demo").innerHTML = width * 1 + '%';
}
}
}
however now i want to pull in a ne ID to add along side the percentage do it will display like 10th or 3rd depending on the score, however when i alter my JS to include the other ID (See bellow) it just shows the th, rd or st no the number.
HTML
<h3 style="text-align: left;"> You scored in the <em class="big-six"><span id="results-percentile-1"></span><span id="results-suffix-2"></span></em> percentile.
</h3>
<div class="myProgress">
<div id="myBar" style="width:0">
<div id="demo"><span id="results-suffix"></span></div>
<!--<div id="demo"></div>-->
</div>
JS
(function() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 50);
function frame() {
if (width >= Number(document.getElementById("results-percentile-2").innerHTML)) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demo").innerHTML = width * 1 + document.getElementById("results-suffix").innerHTML ;
}
}
}());
IDs MUST be unique. If you need multiple elements with the same identifier, use a class.
For example:
<div id="myBar" style="width:0">
<div class="demo"><span class="results-suffix"></span></div>
<div class="demo"></div>
</div>
And your javascript would change to:
function frame() {
if (width >= Number(document.getElementById("results-percentile-2").innerHTML)) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
var demoElems = document.getElementsByClassName('demo');
var i, innerHTML, resultsElems;
// loop through the list of elements
for(i = 0; i < demoElems.length; i++) {
resultsElems = demoElems[i].getElementsByClassName('results-suffix')
innerHTML = width * 1;
// only append the results-suffix element if it exists
if(resultsElems.length > 0) {
innerHTML += resultsElems[0].innerHTML;
}
demoElems[i].innerHTML = innerHTML;
}
}
}