Creating a Custom YouTube “Sparkbar”

I received a question about this a little while ago and I finally got around to making a blog post about it. The person was asking about making a custom YouTube percentage bar like the one you see on videos right above the thumbs up and thumbs down icons. Intrigued I looked at the code and boiled it down to something that perhaps you all could use for a project… whether it be based off of values generated in PHP or completely client-side. YouTube called this bar a “Sparkbar” for a reason that I am yet to be aware of. Looks like a regular bar to me. So here is a small demo.

The HTML

<div id="sparkbar">
    <div class="sparkbar-like"></div>
    <div class="sparkbar-dislike"></div>
</div>

<!-- Value could come from server-side (like PHP) or JavaScript. -->
<div id="sparkbar-update" style="clear: left;">
    Enter between 0 - 100: <input type="text" name="percentage" id="percentage" style="clear: left;"/>
    <input type="button" id="update-button" value="Update"/>
</div>

Here we create a container div that we call a sparkbar and within it are two divs side by side. One is for likes and is colored green and the other is gray. I used the same colors that YouTube uses but you can easily change the styling (below) to make it match your theme. The styling for all these divs is below in the CSS and is very simple. Below the sparkbar I created a simple input div so that you can enter a percentage value (from 0 – 100) and update the bar by clicking the button.

The CSS

#sparkbar {
    margin: 50px 0px;
    width: 150px;
    float: left;
    height: 2px;
    overflow: hidden;
}

div .sparkbar-like, div .sparkbar-dislike {
    float: left;
    height: 4px;
}

div .sparkbar-like {
    background-color: #590;
}

div .sparkbar-dislike {
    background-color: #ccc;
}

To get the divs to sit next to one another, we float them left and put them into the sparkbar which is also floated left. For display purposes I added some margins just so it is not butting up against the top of a window or anything. You can feel free to remove them in the fiddle I list below. Now to control the overall width of the sparkbar all you have to do is change the CSS width and the bars themselves will adjust since they are percentage based. You could even make the sparkbar itself percentage based for a lot of additional flexibility.

The JavaScript

$(function() {
    $("#update-button").click(function() {
        var percent = parseInt($("#percentage").val());

        if ((percent >= 0) && (percent <= 100)) {
            var sparkbar = $("#sparkbar").width();

            if (sparkbar >= 0) {
                // Based on 100 percentage and width of sparkbar
                var like_percentage = percent;
                var dislike_percentage = 100 - like_percentage;
                $(".sparkbar-like").css("width", like_percentage + "%");   
                $(".sparkbar-dislike").css("width", dislike_percentage + "%");
            }
        }
    });
});

We added a simple click handler for the button which reads from the percentage textbox to get a value. We parse that into an integer and based on the width of the sparkbar container, we can create a percentage of the likes. Subtracting that value from 100 of course will then give us the percentage of dislikes. We then set their widths using a little jQuery .css() calling and there you go, the sparkbar is created.

If you play around with the fiddle I have shown below you can also think about adding more than two divs and create percentage bars that are based on multiple percentage values. All you would have to do for this is create other divs that float alongside the dislikes div. As long as all the divs equal up to 100% you should be able to fit them into the same bar. I hope you enjoy this fiddle and feel free to let me know your input in the comments below.

The fiddle for this project: http://jsfiddle.net/wPauL/

Thanks for reading! 🙂