Learn and share. The simplest harmony.

 

Create Groovershark-like Widget Slider

Posted on April 10, 2010 and got 1 shout so far

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.

 

[CodeSnippet] jQuery : Fade In Webpage

Posted on April 4, 2010 and got 6 shouts so far

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().

 

Free Web UI Element Pack

Posted on April 1, 2010 and got 31 shouts so far

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.

 

jQuery Plugin : jConfirmAction

Posted on March 29, 2010 and got 51 shouts so far

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.

 

[CodeSnippet] jQuery : Confirm User’s Action

Posted on March 26, 2010 and got 9 shouts so far

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.

 

Take Control of Your Table View

Posted on March 24, 2010 and got 1 shout so far

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.

 

Stylize Your Own Checkboxes

Posted on March 22, 2010 and got 19 shouts so far

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.

 

Engage 2 CSS Positions : Relative & Absolute

Posted on March 18, 2010 and got 1 shout so far

As a web developer or designer we must be frequently facing a task to create a webpage layout. In creating that, positioning a stacked-random element usually put through a nightmare for us, fortunately CSS and its beautiful properties help us cure that nightmare and in this post i will explain how to take advantage of the two CSS positions, relative and absolute.