Skip to content

Instantly share code, notes, and snippets.

@maticrivo

maticrivo/readingIndicator.js

Last active September 12, 2017 12:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save maticrivo/6231922 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save maticrivo/6231922 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. maticrivo revised this gist Aug 15, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions readingIndicator.js
    View file
    Original file line number Diff line number Diff line change
    @@ -31,10 +31,10 @@

    this.onScroll = function onScroll(e) {
    var percentage = Math.floor(((getScrollPosition() + getWindowHeight()) / getMaxDocumentHeight()) * 100),
    color = percentage >= 95 ? "#0000ff" : "#ff0000";
    color = (percentage >= 95) ? "#0000ff" : "#ff0000";

    bar.style.backgroundColor = color;
    bar.style.width = percentage + "%";
    bar.style.backgroundColor = color;
    };

    function getWindowHeight() {
  2. maticrivo revised this gist Aug 15, 2013. 1 changed file with 20 additions and 8 deletions.
    28 changes: 20 additions & 8 deletions readingIndicator.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,15 @@
    (function(){
    var Indicator = function(){
    var self = this, bar;
    var self = this, bar, latestKnownScrollY, ticking;

    this.init = function init() {
    latestKnownScrollY = window.scrollY;
    ticking = false;

    self.createIndicator();

    window.onscroll = onScroll;
    onScroll();
    window.addEventListener('scroll', self.onScroll, false);
    self.onScroll();
    };

    this.createIndicator = function createIndicator() {
    @@ -20,13 +23,19 @@
    bar.style.height = "1px";
    bar.style.backgroundColor = "#ff0000";
    bar.style.zIndex = 99999999;
    bar.style.WebkitTransition = 'all 0.5s';
    bar.style.MozTransition = 'all 0.5s';

    document.body.appendChild(bar);
    };

    function onScroll(e) {
    bar.style.width = Math.floor(((getScrollPosition() + getWindowHeight()) / getMaxDocumentHeight()) * 100) + "%";
    }
    this.onScroll = function onScroll(e) {
    var percentage = Math.floor(((getScrollPosition() + getWindowHeight()) / getMaxDocumentHeight()) * 100),
    color = percentage >= 95 ? "#0000ff" : "#ff0000";

    bar.style.backgroundColor = color;
    bar.style.width = percentage + "%";
    };

    function getWindowHeight() {
    return window.innerHeight
    @@ -47,11 +56,14 @@
    }

    function getScrollPosition() {
    return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
    return window.pageYOffset
    || document.body.scrollTop
    || document.documentElement.scrollTop
    || 0;
    }

    self.init();
    };

    new Indicator();
    })();
    }());
  3. maticrivo revised this gist Aug 14, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions readingIndicator.js
    View file
    Original file line number Diff line number Diff line change
    @@ -19,6 +19,7 @@
    bar.style.width = "0%";
    bar.style.height = "1px";
    bar.style.backgroundColor = "#ff0000";
    bar.style.zIndex = 99999999;

    document.body.appendChild(bar);
    };
  4. maticrivo revised this gist Aug 14, 2013. 1 changed file with 20 additions and 17 deletions.
    37 changes: 20 additions & 17 deletions readingIndicator.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,8 @@
    (function(){
    var Indicator = function(){
    var self = this,
    bar,
    windowHeight, documentHeight,
    isSelectorIdRegex = /#[^\s]*$/;
    var self = this, bar;

    this.init = function init() {
    windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
    documentHeight = Math.max(document.body.scrollHeight || 0, document.documentElement.scrollHeight || 0, document.body.offsetHeight || 0, document.documentElement.offsetHeight || 0, document.body.clientHeight || 0, document.documentElement.clientHeight || 0);

    self.createIndicator();

    window.onscroll = onScroll;
    @@ -30,22 +24,31 @@
    };

    function onScroll(e) {
    var percentage = Math.floor(((getScrollPosition() + windowHeight) / documentHeight) * 100);
    bar.style.width = percentage + "%";
    bar.style.width = Math.floor(((getScrollPosition() + getWindowHeight()) / getMaxDocumentHeight()) * 100) + "%";
    }

    function getWindowHeight() {
    return window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight
    || 0;
    }

    function getMaxDocumentHeight() {
    return Math.max(
    document.body.scrollHeight || 0
    ,document.documentElement.scrollHeight || 0
    ,document.body.offsetHeight || 0
    ,document.documentElement.offsetHeight || 0
    ,document.body.clientHeight || 0
    ,document.documentElement.clientHeight || 0
    );
    }

    function getScrollPosition() {
    return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
    }

    var $ = function querySelector(selector, scope) {
    if (isSelectorIdRegex.test(selector)) {
    return document.getElementById(selector.replace('#', ''));
    } else {
    return (scope || document).querySelectorAll(selector);
    }
    };

    self.init();
    };

  5. maticrivo created this gist Aug 14, 2013.
    53 changes: 53 additions & 0 deletions readingIndicator.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,53 @@
    (function(){
    var Indicator = function(){
    var self = this,
    bar,
    windowHeight, documentHeight,
    isSelectorIdRegex = /#[^\s]*$/;

    this.init = function init() {
    windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
    documentHeight = Math.max(document.body.scrollHeight || 0, document.documentElement.scrollHeight || 0, document.body.offsetHeight || 0, document.documentElement.offsetHeight || 0, document.body.clientHeight || 0, document.documentElement.clientHeight || 0);

    self.createIndicator();

    window.onscroll = onScroll;
    onScroll();
    };

    this.createIndicator = function createIndicator() {
    bar = document.createElement('div');
    bar.style.position = "fixed";
    bar.style.top = 0;
    bar.style.left = 0;
    bar.style.right = 0;
    bar.style.display = "block";
    bar.style.width = "0%";
    bar.style.height = "1px";
    bar.style.backgroundColor = "#ff0000";

    document.body.appendChild(bar);
    };

    function onScroll(e) {
    var percentage = Math.floor(((getScrollPosition() + windowHeight) / documentHeight) * 100);
    bar.style.width = percentage + "%";
    }

    function getScrollPosition() {
    return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
    }

    var $ = function querySelector(selector, scope) {
    if (isSelectorIdRegex.test(selector)) {
    return document.getElementById(selector.replace('#', ''));
    } else {
    return (scope || document).querySelectorAll(selector);
    }
    };

    self.init();
    };

    new Indicator();
    })();