May 14, 2011
Give your users a dose of familiarity with iOS style badges. Badger will easily add a beautiful badge to your element without the need for images. Modelled after the badges found on the iPhone and iPad, Badger is an incredibly attractive way to notify your users in a manner that they may already be familiar with.
This is a div that has it's position set to relative. Why? Because if the element does not have a static position, the badge will keep climbing the parent ladder until it gets to one that does before finally ending with the HTML element.
This time we'll see how it looks with words. Badges are meant to be a small, simple, notification so I wouldn't recommend using more than 4 or 5 characters in your message. You'll notice that the font-size for strings is a tad smaller than the numbers. Simply put, it just looks better that way.
Badger is almost nonexistent in size. 2.4kb in total for the full and 1.8kb for the minified version.
Download full Download minified GitHubAdding Badger couldn't be easier. Add jQuery to your head section along with the Badger files.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="badger.js"></script> <link rel="stylesheet" href="badger.css" type="text/css" />
Then, simply call Badger with the element of your choice!
<script>
$(document).ready(function() {
$('#MyDiv').badger('5');
});
</script>
Badger can add and subtract but your best bet will always be to pass in only the string of what you want displayed. If you want to know what Badger just displayed, simply add a callback function.
$('#MyDiv').badger('+2', function(r) { alert(r); });
Badger is styled after the badges found on iOS devices (iPhone/iPad). If you'd like something alternate, the stylesheet is short and sweet. Modify the appropriate classes to achieve the exact badge you're looking for. Just remember to set the border radius to half of the badge's height to get the circle effect.
Licensed under the MIT License