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.

You must be familiar with css button with hovered and pressed-style, we always meet them around the internet world with ease. Fortunately, we can make them with a very simple css technique. By using built-in css pseudo selector (:hover and :active) we can manipulate a boring link navigator into a cute one.

Text masking is an alternative for us to display information what type of content user must input to our forms, as usual jQuery make our life easier, to implement that we just need to create the script that read user actions (focusing or bluring the input), read its value then decide to empty the input value or refill with its default value.

This is a very basic technique to show and hide HTML element, we just need to define the element then show or hide them with jQuery built-in function, $.slideToggle(). But if you see my sidebar in ‘Tags Collection’ section, you’ll notice that there’s a toggle to show or hide the tags collection (with undefined div’s height, of course) and that’s what i will explain.

Based on this great tutorial by vectips.com i created social media icon set, named PinkStrip. The icon set contains 12 icons that represent some social media website and apps, including, WordPress, Twitter, Tumblr, Stumbleupon, Picasa, Linkedin, GTalk, Google Buzz, Friendfeed, Facebook and Blogger.

Gmail compose has functionality to detect any content modification and confirm us before closing browser’s window because of unsaved content that we’ve modify, yes in this post i will try to explain how to make these function work on our webapps.

Authenticjobs has a nice navigation menu. How could it be nice? The navigation will automatically shifted to the menu that we choose. Now in this tutorial, I’d like to discuss how to make not only an animated navigation like that but also an informative one.

Today’s code snippet is how to automagically check/uncheck checkbox element by clicking a single row of a table using jQuery. Firstly we add click event on the table’s row, it will help us read click event on each row. Grab checkbox element on its row, check whether this checkbox was checked or not yet, then add checked or unchecked value on it.