Simple jQuery and CSS3 Slideshow Tabs

A slideshow and tabs is pretty common nowadays in any modern website. There is a ton of way to do this and many free and paid tools available for this feature. This make it very easy to create and it will always amaze people who see it. Basically, we will need at least Javascript to do this, CSS to style the slideshow and tabs as we wanted, and then finally the special HTML markup which make it possible. There is also a slideshow which make use of Flash.

The solution I tried to made right now is a very simple and basic one. It make use of simple jQuery to catch the click event and switching tabs, as well as the slideshow, the CSS to style it as much as we wanted and a simple HTML markup in one unordered list.

Best practice to clearing default text with jQuery

Having default text that we later removed when retrieving user input is common in today’s website. Many web developer use this to enhance usability of the website, so user know what to type in what field. There is a lot of way to do this, using both focus and blur event. For example, this is the shortest and easiest way that is commonly used:


<input type="text" id="example-field" name="example-field" value="Your name" onfocus="if (this.value=='Your name') this.value=''" onblur="if (this.value=='') this.value='Your name'" />

However, this approach will be a pain when you are managing a lot of input fields. You will need to type the default text three times, which can lead to a trivial typo. Also, since we check againts the default value, we will not be able to accept this value. Here is the solution, by using the simplicity and power of jQuery, this is a clean and a better way to do this.

Blog redesign

Welcome to my new redesigned blog! It’s been a year and a half since the last time I changed the design. I have always wanted to change it, but I just always don’t have enough time. 🙂 I know I’m not that good enough in designing, but at least, this is the best design I ever made until now!

The idea behind this design is, to make a simple, usable layout and still looks beautiful. There is a lot of tutorial on the web that helped me when making this. I try to make the website small in size, so you’ll able to load it fast enough. There is also a cool trick on the background, which still make the markup small without much wrapping div over div to accomplish the effect. I also realize the importance on social networking nowadays, so I add links to some of my account. 🙂

Moving Stick Figure with CSS 3 and jQuery

With CSS 3, creating a stick figure is easy and fun. But it is even better if it can move. So here it is

Click here for the demo.

This currently worked on Google Chrome and Safari. However, in my test, Safari lagged a lot in the animation. So Google Chrome performed the best!

Enjoy… 😀

Update: This is also submitted on Smashing Magazine CSS 3 Contest, you can preview and download from there too. 🙂

Link Menu 1.0 – jQuery Plugin

Hello there.

I would like to share a jQuery plugin I created some day ago. This is called Link Menu, and currently on version 1.0. This plugin will add a menu box on your link when clicked or double clicked, you can set it on option.

I have used this on my blog if you noticed. 😉



This file is released under the term of GNU GPL.

Hope you find it useful.

Thank you.

Installing Aptana Studio on Ubuntu 9.04


Aptana Studio is a powerful IDE for web development. It supports HTML, CSS, Javascript and the server side script such as PHP, Ruby and Python. Even more, it support a wide variety of Javascript library. It based on Eclipse and available as a standalone application or as a plugin for Eclipse. Aptana Studio is available on Windows, Mac and Linux. And the best of all is, Aptana Studio is free. Here I will post how I install the recent version of standalone Aptana Studio, 1.5, on 32 bit Ubuntu 9.04 Jaunty Jackalope.

First of all, download the Aptana Studio on http://www.aptana.org, choose the Linux and 32 bit version, or change it accordingly to suit your machine. Before we start installing the Aptana Studio, we need to ensure we have installed the sun-java6-jre and sun-java6-plugin. To do that, simply type this in terminal

A little guide of using jQuery

JQuery is Javascript library that can help you write code smaller and easier to take a good care of event handling, animating, AJAX and more. With jQuery, we can make our webpages more beautiful. You can see that I used it for my side menu here. 🙂

This article didn’t intend to teach you how to became the jQuery master and I’m far away from a master. It just for the case you didn’t know about jQuery yet and want to start with it, then this will be a good guide for you. If you want a more complete tutorial, go to the jQuery documentation.

Fixing IE bugs and using Jquery

Now, the templates is better, as I use Jquery, I can get the actual window size on Internet Explorer 7+. Also with a little enhancement with Jquery, you can see the animation while showing or hiding the side menu. Also I update the graphics to a little smaller so you can see the content wider.

It still use fixed width, I will solve this later so if you are using wider screen, the head logo and menu will not separated from the main element. 🙂 I’m still testing this templates and will improve it day by day. Damn, I think I really interested on creating WordPress templates now. Maybe I will make a public templates soon.