pollBar();

Create a bar that grows dynamically based upon numbers that can be imported from a MySQL database.

by ZachWills

HTML

<div id="output">   
    <div id="likes">&nbsp;</div>
    <div id="dislikes">&nbsp;</div>
</div>

CSS

body{
    color:black;   
}
#output{
    height:100px;
}
#likes{
    background-color:#00ff00;
    width:0px;
}
#dislikes{
    background-color:#ff0000;
    width:0px;
    
}

JavaScript

$(document).ready(function() {
    function pollBar(flikes, fdislikes) {
        //establsih variable for likes & dislikes
        var likes = flikes;
        var dislikes = fdislikes;

        //determine how many total likes/dislikes there are
        var total = likes + dislikes;

        //specify the totalwidth you want your bars 
        //combined to be, and divide that by the total
        //# of likes/dislikes to determine
        var barwidth = 500 / total;
        var percent = 100 / total;

        //multiply the number of likes times the bar
        //width, this will give you how many pixels
        //each bar needs to be in relation to one another 
        var likewidth = barwidth * likes;
        var dislikewidth = barwidth * dislikes;
        var likepercent = percent * likes;
        var dislikepercent = percent * dislikes;
        var realLikeP = Math.round(likepercent);
        var realDislikeP = Math.round(dislikepercent );

        $("#likes").append(realLikeP + "%");
        $("#dislikes").append(realDislikeP + "%")
        $("#likes").animate({
            "width": likewidth
        });
        $("#dislikes").animate({
            "width": dislikewidth
        });

        //$("#likes").hover(function() {
        //    $(this).fadeIn("slow").html(likes);
        //}, function() {
        //    $(this).html("&nbsp;");
        //});

        //$("#dislikes ").hover(function() {
        //    $(this).fadeIn("slow").html(dislikes);
        //}, function() {
        //    $(this).html("&nbsp;");
        //});

        $("#output").append("<br />" + likes + " likes, " + dislikes + " dislikes.");

    }
    pollBar(950, 1075);
});