Ringce : UI Badge

What is it?

UI Badge is a simple jQuery UI widget that allows dynamic position of an overlay on a specified element. A css class for the badge and an offset is all it takes to overlay the badge.

Demo

Feel free to play with the images below:

This will look fancier with a badge

How does it work?

The widget creates and inserts two layers(nested) inside the target element. The outer layer is positioned relative and the inner is positioned absolute. In order for the badge to be positioned top left of the target item, the offsets for left and top have to be negative so the inner element is pushed outwards.

Code

Actions

show(options): Displays the badge. Accepts options. This can be used to switch from one badge to another as well.

hide, toggle: Simple functions that behave same as the jQuery hide and toggle functions.

remove: Removes all traces of the widget from the DOM.

Options

cssClass: The class that represents the badge.

offset: {left, top} - Offset from approximate bottom left of the element. You may need to play with the values a little to achieve the desired effect.

Demo Example

$(function(){
  $("#badge-sender div").css('cursor', 'pointer');
$("#badge-reciever").badge();
$("#badge-sender div").click(function(){
    var this_class = $(this).attr("class");
    if($("#badge-reciever ." + this_class).length){
        $("#badge-reciever").badge('toggle');
    }
    else{
        $("#badge-reciever").badge('show', {offset:{left:-35, top:-35}, cssClass:this_class});
    }
});
});

Known Issues

The layers are created and inserted into the target element. So the target element must be a container.
Since the badge is pure css, the dimensions of the image cannot be controlled.

Backlog

Allow arbitrary elements to be positioned as badges.
Allow click event to be captured
Effects