From the previous post, I was explained how to stylize our own checkboxes by replacing the default checkbox with image. The technique is very simple, we just need to prepare the image for replace the checkbox, set the CSS and let jQuery replace them, if you missed that one you can read the tutorial here.

Groovershark has a nice style on displaying their widgets. As you can see from their website, the slider has three elements addition that make it more beauty, they’re gradient image on the left and the right side and the image as a border for the selected widget on the center. Yes, we’ll make that thing from stratch.

The following short code is a way to add a fade in effect to your webpage. The main task we want to do are hiding our webpage content then display it with fade in effect when the user load the webpage. These step will use two jQuery built-in function, hide() and fadeIn().

It take us some time to create our web UI element, so the UI pack will be very useful. Today I release an User Interface Element Pack in PSD format, it contains 19 elements including Loading Bar, Button in normal and clicked state, Button toggle, close, next, previous and paging icon and slider.

In previous tutorial i was explained how to replace a boring confirmation box into a cute one. You’ll no longer see a pop up confirmation box but a flying bubble confirmation box upside your link. Then I was thinking it will be very usefull for future application development to use this script and that’s why i decided to create it as a jQuery plugin.

Don’t let your link that have a critical action (such as delete some data or something else) fly away on their own self, we must put a confirmation before do the action to prevent user’s mistake. Now, let us make that one.

CSS Pseudo-selector come like a saviour, it makes our life easier by saving our time for traversing the Document Object Modelling (DOM). Especially for nth-child pseudo-selector, it can make us choose any element we want by pointing its index number (start from 1), it means we can easily choose any object element we want to modify.

Checkbox is one of the most frequently used element on the forms, plain checkbox will be nice if in the forms we made there are many checkbox or others forms element that are used, but how about we just need a single checkbox in our forms without any other forms element, a little bit horrible, i think.