Dustin Kurtis came up with an excellent idea for the Svbtle blogging network (go visit Svbtle.com to see an example). He called them Kudos. They're little widgets next to each post that enable users to give "Kudos" to posts they really like. You hover over the widget, it gives a fun little animation, and changes the icon and count after a moment.
This is an example implementation of that for you to use in your own blog.
Start ->
-> Funky Animation Here->
-> Finish.
See the index.html example for information
<figure class="kudo kudoable" data-id="1">
<a class="kudobject">
<div class="opening">
<div class="circle"> </div>
</div>
</a>
<a href="#kudo" class="count">
<span class="num">0</span>
<span class="txt">Kudos</span>
</a>
</figure>
$(function()
{
// initialize the kudoer
$("figure.kudo").kudoable();
});
// bind to events on the kudos
$("figure.kudo").on("kudo:added", function(event)
{
var element = $(this);
var id = element.data('id');
// do something with the element?
console.log("Kudod", element);
});
After kudoing an object it will emit the following events:
kudo:active
is sent when you hover over the object (the circle is growing)kudo:inactive
is sent when you mouse-off the objectkudo:added
is sent when you successfully kudo somethingkudo:removed
is sent when you un-kudo something
Make some! ;) The animation of the text isn't bad but could use some love from a css wizard. Pull-requests will be happily applied.
Kudos currently depends on jQuery and the jQuery Cookie plugin, but as there is so little code it would be very easy to modify to use a different library if you had such a need.
This code is distributed under the MIT license, however, it includes a copy of jQuery which is dual licensed under MIT or GPL (your choice) and it also includes a copy of jQuery Cookie which is licensed under the MIT license. Portions of the CSS code are from the wordpress-svbtle Wordpress theme.