keaglez

Best practice to clearing default text with jQuery

Posted on Programming and tagged with , ,

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:

 

1
<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.

Read more…

Blog redesign

Posted on Designing, Programming, Wordpress and tagged with , , , , ,

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

Read more…

Moving Stick Figure with CSS 3 and jQuery

Posted on Designing, Programming and tagged with , , ,

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… :D

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

Posted on Programming and tagged with , ,

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

Demo

Download

This file is released under the term of GNU GPL.

Hope you find it useful.

Thank you.

Installing Aptana Studio on Ubuntu 9.04

Posted on Computer, Programming and tagged with , , , , , ,

aptana

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

Read more…

Proudly powered by Wordpress