Continuing the discussion from Reading progress bar for articles / one page sites :
I have tried to implement it but I am not able to show anything on my site.
I put this in custom head code:
<!Progress Bar>
<style>
progress {
/* Positioning */
position: fixed;
left: 0;
top: 0;
z-index: 100000000;
width: 100%;
height: 3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Get rid of the default border in Firefox/Opera. */
border: none;
/* Progress bar container for Firefox/IE10+ */
background-color: #333;
/* Progress bar value for IE10+ */
color: #E60000;
}
progress::-webkit-progress-bar {
background-color: transparent;
}
progress::-webkit-progress-value {
background-color: #333;
}
progress::-moz-progress-bar {
background-color: #333;
}
</style>
I put this in Footer Code:
<!Progress Bar JQuery>
<script>
$(document).on('ready', function() {
var winHeight = $(window).height(),
docHeight = $(document).height(),
progressBar = $('progress'),
max, value;
/* Set the max scrollable area */
max = docHeight - winHeight;
progressBar.attr('max', max);
$(document).on('scroll', function(){
value = $(window).scrollTop();
progressBar.attr('value', value);
});
});
</script>
And I made a Custom Code Field in my Header with an own class and put in this code:
<script>
{progress value="0"}{/progress}
</script>
Does anybody has a idea why it is not displayed at my site?
Thank you so much in advance!