css

ezMark: jQuery Checkbox & Radiobutton Plugin

July 2010    web

ezMark is a jQuery Plugin that allows you to stylize Radio button and Checkbox easily. Its very small (minified version is ~1.5kb) compared to other similar scripts. It has been tested and works on all major browsers (IE 6/7/8, Firefox, Safari, Chrome) and it gracefully degrades.

It has the following Method:

$('selector').ezMark( [options] );

Basic Usage:

Include the CSS file:

Then include the jquery.js file and the plugin file:

Write the HTML tags normally, as you would type them

Now, call the following method in your JS (to apply on all checkbox & radiobutton across the page): 

$('input').ezMark();

Likewise, you can also use custom selectors for checkbox or radiobuttons: 

// to apply only to checkbox use:
$('input[type="checkbox"]').ezMark();

// for only radio buttons:
$('input[type="radio"]').ezMark();

Parameters:

options parameter accepts the following JSON properties:

Parameter’s (JSON) Properties: Explanation/Details of the Property
checkboxCls The Checkbox Class as per declaration on CSS.
checkedCls The Checkbox Class on Checked State
radioCls The Radio button’s Class as per CSS
selectedCls The Radio Button’s Class on selected State

To customize the default checkbox/radiobutton image, change the background image (checkbox-black.png/radio-black.png) and CSS (ez-checkbox/ez-radio) and (ez-checked/ez-selected) accordingly.

Customized Usage:

After you have customized/created your own css class. Simply call the ezmark method like below:

// to apply only to checkbox use:
$('input[type="checkbox"]').ezMark({
 checkboxCls: 'your-default-checkbox-class-name' ,
 checkedCls: 'your-checkbox-class-in-checked-state'
});

// for only radio buttons:
$('input[type="checkbox"]').ezMark({
 radioCls: 'your-default-radiobutton-class-name' ,
 selectedCls: 'your-radiobutton-class-in-selected-state'
});

View Demo

Download from Github

Download from jQuery Server

Displaying Star Rating using CSS Sprites

August 2009    web

Recently, I have been working on an Application which involved rating system. There are 2 cases where we would want to display ratings. On 1st case, we would just want to display the list of contents (videos, blogs etc.) with its rating (just displayed).

On another case, show the rating and also allow viewer to rate content. There are already several blogs relating to 2nd case (CSS Star Rating), so, I will only discuss the 1st case.

I use this technique to display both 0.5 star & 1 star rating. I start with a simple image of stars in 2 rows:

*

The Top row will be used to display full stars, (1,2,3 stars etc.)
The 2nd row of image will be used to display 1/2 stars, (0.5, 1.5, 2.5 stars etc.)

Declare a simple CSS Class called ‘rating-static’.

.rating-static {
  width: 60px;
  height: 16px;
  display: block;
  background: url('http://www.itsalif.info/blogfiles/rating/star-rating.png') 0 0 no-repeat;
}

The Trick is to use the background-position to display full or 0.5 stars from that image. So, I declare some CSS Class for the ratings (1/2 and full stars):

.rating-50 { background-position: 0 0; }
.rating-40 { background-position: -12px 0; } 
.rating-30 { background-position: -24px 0; }
.rating-20 { background-position: -36px 0; }
.rating-10 { background-position: -48px 0; }
.rating-0 { background-position: -60px 0; }

.rating-5  { background-position: -48px -16px; }
.rating-15 { background-position: -36px -16px; }
.rating-25 { background-position: -24px -16px; }
.rating-35 { background-position: -12px -16px; }
.rating-45 { background-position: 0 -16px; }

I Like to declare the rating class as their actual rating multiplied by 10. So, an 2.5 rating’s corresponding class is ‘.rating-25’. In this way, when I fetch the raw rating from back-end, I multiply it by 10 and just output it on the CSS class.

To display a 1.5 rating, just write the following:

To display a 2.5 rating, just write the following:

To display a 3 rating, just write the following:

Here’s a display of all the star ratings (0.5 to 1.0):










Thats it. Simple enough :).