Lab

Create a YouTube-like page load progress plugin in 30 lines of JavaScript

2015-04-22T00:00:00+05:00

Most of you would have probably seen the very thin, page load progress showing bar on top of websites like YouTube, Medium and many others.

In this post, I'll try to create a plugin to show a loading bar which could be used for anything.

Demo Source

How it works

Its simple. An element in body or anywhere on the page which would have its position to be fixed at top: 0px;. Its width would show the page load progress.

But we'll add the element and set its style with JavaScript once the page has loaded.

Note: Again, I'm not using jQuery here and will using pure JavaScript.

Let's listen to the DOMContentLoaded event to detect when page's DOM has loaded.

document.addEventListener("DOMContentLoaded", function(e) {
    // create a div
    var loadingBar = document.createElement( 'div' );

    // set its id so we could access it later
    loadingBar.id = 'loadingbar';

    // Give it some CSS
    loadingBar.style.cssText = 'position:fixed;top:0;left:0;display:block;height:1px;width:0%;background:#00B8D4;transition:1s width;-webkit-transition:1s width;-moz-transition:1s width;-ms-transition:1s width;z-index:99999';

    // Finally, append it to HTML
    document.body.appendChild( loadingBar );
});

So, here is what we did in the code above:

Created an empty div element
We assigned it an id so it would easier for access later
As I mentioned in start, the element needs some style. We added the basic CSS.
Now as the element is ready, we added it to the body element.

CSS in clean form

To make it easier for you to understand what we added to the element.

position: fixed;
top: 0px;
left: 0px;

display: block;
height: 1px;
width: 0%;
background: #00B8D4;

/* Bit of animation */
transition: 1s width;
-webkit-transition: 1s width;
-moz-transition: 1s width;
-ms-transition: 1s width;

/* This is supposed to keep it on top of other elements */
z-index: 99999;

Change Progress

Now that our element is in DOM. We can change its width to change the progress.

we can do something like:

loadingBar.style.width = '10%';

Plugin code

Now, here is this code turned into a complete plugin:

var loadingBar = {
        el: null,
        init: function() {
            loadingBar.el = document.createElement( 'div' );
            loadingBar.el.id = 'loadingbar';
            loadingBar.el.style.cssText = 'position:fixed;top:0;left:0;display:block;height:1px;width:60%;background:#00B8D4;transition:1s width;-webkit-transition:1s width;-moz-transition:1s width;-ms-transition:1s width;z-index:99999';
            document.body.appendChild( loadingBar.el );
        },
        setProgress: function( p ) {
            if( p >= 0 && p <= 100 ) {
                loadingBar.el.style.width = p + '%';
                loadingBar.onChange(p);
            }
        },
        // alias of setProgress
        prog: function( p ) {
            loadingBar.setProgress( p )
        },
        inc: function( ) {
            var pNow = loadingBar.el.style.width.slice(0,-1);
            loadingBar.setProgress( ++pNow );
        },
        dec: function( ) {
            var pNow = loadingBar.el.style.width.slice(0,-1);
            loadingBar.setProgress( --pNow );
        },
        color: function( clr ) {
            loadingBar.el.style.background = '#' + clr;
        },
        height: function( h ) {
            loadingBar.el.style.height = h + 'px';
        },
        onChange: function ( val ) {}
    }

Plugin Usage

Just call loadingBar.init(); after DOMContentLoaded.

Methods:

setProgress, prog: Pass an integer between 0 & 100 to set the progress of bar

inc: Increment progress by 1

dec: Decrement progress by 1

color: Pass HEX color code to change the color of bar. Do not pass the #

height: Pass an integer to change height of bar.

Examples:

loadingBar.prog(50); // Bring progress bar at half

loadingBar.color('e1e1e1') // Change the color of bar

How to detect when page has loaded with JavaScript

2015-04-21T00:00:00+05:00

Uncaught TypeError: Cannot read property 'innerHTML' of null

Or a similar error is what we'll get when we try to access an element before its loaded.

To avoid this, we should only access HTML elements when DOM has completely loaded.

How to know when DOM has loaded

Well, there's an event called DOMContentLoaded that we can listen to.

Like this:

document.addEventListener("DOMContentLoaded", function(e) {
    console.log("DOM Loaded, access elements without errors now");
});

Its handy piece of code that you'll see me using often. You can read more about DOMContentLoaded

References:

Page scroll progress with JavaScript

2015-03-18T00:00:00+05:00

I recently saw a blog had used the scroll progress of page in percentage on every post. I liked the idea so thought why not try it and create a JavaScript snippet. So here we are.

Note: I'm not using jQuery. Its plain JavaScript. But it can also be done with jQuery. Of course, the code below can be used with jQuery too.

Demo

Listen to scroll event

We'll add an addEventListener to window object. What are your thoughts on using document here instead?

window.addEventListener('scroll', function() {});
// in jQuery:
$(window).on('scroll', function(){});

But I suggest you attach this event after DOM has been loaded like so:

document.addEventListener('DOMContentLoaded', function() {
    window.addEventListener('scroll', function() {});
});
// in jQuery
$(function() {
    $(window).on('scroll', function(){});
})();

Calculate the progress

Here is the formula I spent a lot of time to make.

progress = (document.body.scrollTop / ( document.body.scrollHeight - window.innerHeight ) ) * 100;

We'll do this calculation on every scroll event. Means we'll be doing it like:

document.addEventListener('DOMContentLoaded', function() {
    window.addEventListener('scroll', function() {
        progress = (document.body.scrollTop / ( document.body.scrollHeight - window.innerHeight ) ) * 100;

        // console.log(progress);
    });
});

Do something with progress

I'll just define another function to be called whenever progress is updated.

fucntion updateProgress( progress ) {
    // Do whatever you like
    console.log( progress );
}

var progress = 0;
document.addEventListener('DOMContentLoaded', function() {
    window.addEventListener('scroll', function() {
        progress = (document.body.scrollTop / ( document.body.scrollHeight - window.innerHeight ) ) * 100;

        updateProgress( progress );
    });
});

And we are done. Now you can use that progress in percentage to do whatever you want.

Extra bit

I also wanted to track the time it took for full page scroll. So I added the following code.

function updateProgress( progress ) {
    // Do whatever you like
    console.log( 'You have scrolled:', progress, '%' );
}

function endOfPage( time ) {
    // in miliseconds
    console.log( 'The time you took to reach end:', time/1000, 'Seconds' );
}

var progress = 0,
end = false,
timeStart = null,
timeEnd = null;

document.addEventListener('DOMContentLoaded', function() {
    window.addEventListener('scroll', function() {
        if(timeStart == null)
            timeStart = Date.now();

        progress = (document.body.scrollTop / ( document.body.scrollHeight - window.innerHeight ) ) * 100;

        updateProgress( progress );

        if(progress >= 100 && !end) {
            timeEnd = Date.now();
            end = true;
            endOfPage( timeEnd - timeStart ); // Call the other function
        }
    });
});

Gist

I've also created a gist for this purpose.

How to use:

scrollProgress (el, updateFunc, endFunc);

el: It accepts window or id of an element.

updateFunc: Function to be called on every update of scroll. Progress percentage will be passed as parameter.

endFunc: Function to be called when scroll has reached the end for the first time. Total time taken in milliseconds will be passed.

Example:

scrollProgress (window, updateFunc, endFunc);
// or
scrollProgress ('idOfDiv', function(p) {
    console.log(p + '% Scrolled');
}, function(time) {
    console.log('End reached in', time/1000, 'Seconds');
});

Creating material design labels with CSS

2015-03-17T00:00:00+05:00

A few months ago Google released design guidelines, Material Design.

Along with many other elements, it also provides details on form labels. In this post I have experimented with CSS to implement that design. We will not be using any JavaScript. Just CSS. For those who can't wait to read till end and want to know the technique involved, here it is: position: absolute;

What we do is make the label element come over input and when input is focused, we make label go up.

Demo

HTML Markup

Lets start by defining our HTML markup first. We'll simply use:

<div class="field">
    <input type="text" id="name" />
    <label for="name">Your Name</label>
</div>

Here we used the outer <div class="field"> to contain our elements as we are going to use position absolute.

CSS

Now comes the basic CSS.

.field {
    position: relative;
}
.field input {
    display: block;
    width: 100%;
    padding: 5px;
    outline: none;
    color: #727272;
    font-size: 20px;
    font-weight: 100;
    border: 0;
    border-bottom: 1px solid #424242;
}
.field input:focus {
    border-bottom: 1px solid #00B8D4;
}
.field label {
    display: block;
    padding: 5px;
    padding-left: 7px;
    color: #424242;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.6s; /* add browser specific prefix */
}
/* To change the color of label and input text when cursor is in input field or over it */
.field input:focus + label, input:hover + label {
    color:  #00B8D4;
}

With this CSS we've set come basic styling for our input field and label. Also notice, we made both of them display:block to cover the full width of outer element which in this case is .field

Make it happen

Now here's the real piece of code that make our label as we want.

First we'll bring the label on input. position: absolute to rescue.

.field label {
    position: absolute;
    top: 0;
}

We've brought the label over input. How do we make it go up when cursor enters the input? Simple; use CSS pseudo selector :focus like this:

.field input:focus + label {
    top: -18px;
    width: 100%;
    font-size: 12px;
}

Note: You can also use :valid instead/with :focus to make the change when user has entered at least one character. :valid will, of course, depend on the type of input.

Welcome to my lab

2015-03-08T00:00:00+05:00

Hey There!

Thank you for paying me a visit. This is my experiment lab where I'll be sharing my ideas and work on web.

What I like to work on most is:

HTML5
JavaScript
PHP

And that's what I'll be using to present my ideas. I'll be working on tutorials, guides and innovative usage of existing APIs/services.

You can follow my on Twitter for updates or subscribe to receive emails about new content.