Simple Vote Using JQuery Animate

March 26th, 2011 by aditia rahman / 17 Comments  

     

This is a very short post and simple idea to use JQuery animate function in voting system, I post this maybe it will useful for replacing voting system that using many images, the idea is just expanding the div element (css width property) using animate function, we just need to add the same value on the width element.

jquery simple vote

view demo

Because this is very short and simple I think I don’t need to separate the code or provide the download source.

All Code (HTML, JQuery, CSS)
<!DOCTYPE html>
<html>
<head>
<title>JQuery Simple Vote</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#container div a").click(function() {
        $(this).parent().animate({
           width: '+=100px'
        }, 500);

        $(this).prev().html(parseInt($(this).prev().html()) + 1);
        return false;
    });
});
</script>
<style type="text/css">
    * {
        font-family: Arial, "Free Sans";
    }
    #container {
        margin-top: 20px;
        color: #fff;
    }
    #container #question {
        display: block;
        padding: 20px;
        font-weight: bold;
        letter-spacing: -3px;
        margin-bottom: 20px;
        padding: 10px;
        font-size: 40px;
    }
    #container div {
        font-weight: bold;
        letter-spacing: -3px;
        background: #0099cc;
        margin-bottom: 15px;
        padding: 10px;
        font-size: 34px;
        color: #ffffff;
        border-left: 20px solid #333;
        width: 400px;
        -webkit-border-radius: 0.5em;
        -moz-border-radius: 0 0.5em 0.5em 0;
        border-radius: 0 1.5em 1.5em 0;
    }
    #container div a {
        border-radius: 0.3em;
        text-decoration: none;
        color: #0099cc;
        padding: 5px 15px;
        background: #333;
        margin: 0 20px;
    }
    #container div a:hover {
        color: #fff;
    }
    body {
        margin: 0;
        padding: 0;
        background: #ffffff url('trentanove.gif') repeat right top;
    }
</style>
</head>
<body>
  <div id="container">
      <span id="question">What is your favorite server side language?</span>
      <div><span>0</span><a href="">Vote</a>PHP</div>
      <div><span>0</span><a href="">Vote</a>Ruby</div>
      <div><span>0</span><a href="">Vote</a>Java</div>
      <div><span>0</span><a href="">Vote</a>ASP</div>
      <div><span>0</span><a href="">Vote</a>Perl</div>
      <div><span>0</span><a href="">Vote</a>ColdFusion</div>
  </div>
</body>
</html>

view demo

        submit to reddit Delicious

17 Comments Leave a Comment Subscribe RSS

Leave a Comment