I would like to be able to make my progress bar increase, based on how far I've scrolled and how much is left.
I've tried this: jsFiddle and it doesn't seem to work, I based my script off someone's script that made a block move horizontally based on scroll %.
My code:
<progress id="progressbar" value="0" max="100"></progress>
<br />
<br />
<br />
Lorem<br />
Ipsum<br />
Dolor<br />
.
.
.
.
JS:
$(document).ready(function () {
$(window).scroll(function () {
var s = $(this).scrollTop(),
d = $(document).height(),
scrollPercent = (s / d);
var position = (scrollPercent);
$("#progressbar").progressbar('value', position);
});
});
To move your survey's Progress Bar, head over to the Style tab of your survey and scroll to the bottom of the survey preview to access the link for the HTML/CSS Editor. On the Custom HTML tab scroll to the very bottom of the HTML and find the following code: [template("progress bar")].
Click Add-ons > ProgressBar > Show Progress Bar.Click Continue.
Use the <progress> tag to create a progress bar in HTML. The HTML <progress> tag specifies a completion progress of a task. It is displayed as a progress bar. The value of progress bar can be manipulated by JavaScript.
The logic is like this
totalValue = (documentHeight - windowHeight);
currntValue = scrolledValue;
percentage = (currntValue/ totalValue ) * 100
http://jsfiddle.net/PvVdq/71/
$(document).ready(function () {
$(window).scroll(function () {
var s = $(this).scrollTop(),
d = $(document).height()-$(window).height(),
scrollPercent = (s / d)*100;
$("#progressbar").attr('value', scrollPercent);
});
});
Try this
$(window).scroll(function () {
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
scrollPercent = (s / (d-c)) * 100;
var position = scrollPercent;
$("#progressbar").attr('value', position);
});
Hope this helps, Thank you
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With