Category: How-to

MobileMe Login Form

Making Awesome Form’s Inline Labels with jQuery

Have you ever visit Apple’s MobileMe website? The login screen has form labels that are written within the value of their associated input field.

MobileMe Login Form
MobileMe Login Form

Inline labels are nothing new – in fact the easiest way to label a field is to simply set the field value up front and blow it away when the field gains focus. This is handy way for designers to save space and make their designs cleaner all-around. Unfortunately for us developers, simply setting the input value isn’t very semantic or usable then you can’t do it simple. I’ve just use a little jQuery to make it all happen.
Continue reading

Input vs. Button

Input vs Button – Which to use?

While working on form design, I encountered some issues when using images as submit buttons. The input with the type=”submit” is either too ugly (Firefox), a little buggy (Internet Explorer) or completely inflexible (Safari). The solution for most is to use image inputs and create the damn things ourselves.
View this example:
Continue reading

External Links

How to Open All External Links in a New Window/Tabs by using jquery

Do you ever know the way to open an external link in a new windows or tabs is one of The Top Ten Web Design Mistakes of 1999?

Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer’s carpet. Don’t pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management).
Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user’s machine, the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites.

I discovered right away is that the <a> tag does not allow the target attribute in XHTML Strict (nor does it in HTML Strict).

External Links
Open external links

However, the behavior of <a target="_blank"'> can be replicated in XHTML Strict with semantic markup and scripting.
Continue reading

Google's Ajax Libraries API

Google CDN: use AJAX Libraries API to Speed up your Ajax apps

Google's Ajax Libraries API
Google's Ajax Libraries API

I don’t use a lot of JavaScript, but as you probably know, I’m a fan of offloading things to other people when it can save me the hassle of doing it myself.
A CDN — short for Content Delivery Network — distributes your static content across servers in various, diverse physical locations. When a user’s browser resolves the URL for these files, their download will automatically target the closest available server in the network.
Continue reading

BoxOver, display tooltips using DHTML/Javascritps

BoxOver DHTML/Javascript Lightweight Tooltips
BoxOver DHTML/Javascript Lightweight Tooltips

BoxOver uses javascript / DHTML to show tooltips on a website. Implementation of the tooltips, however, requires no knowledge of DHTML or javascript. Move your mouse over the items below to see examples. BoxOver is free and distributed under the GNU license.

There are many tweaks which can be set to customise it to your needs by setting through a tag’s “title” attribute. Some of them are very useful.
Continue reading

Using WordPress plugins to make your website mobile friendly

In some earlier post, you has been known how to convert your website mobile friendly with online services and common problems when creating a website for mobile devices.

WordPress is a very popular PHP based Open Source blogging tool. By installing mobilizer plugins, your wordpress blog becomes mobile friendly, and all your earlier blog postings become ready to mobile-accessible with a minimum effort on your part. Below is amazing Plugins to view your WordPress Blog on any Mobile Device (iPhone, PDA…).
Continue reading

Make and Convert any Website that friendly Portable Devices

Currently, mobile network infrastructure supports for the connection with the Internet from mobile devices such as smartphones, PDA, mobile phone … Mobile (Smart. PDA) phones have become an inevitable tool for communication and keeping up with information.  The availability of WAP and regular browsers on mobile phones, a lot of people consume Internet content while on the go. With statistics from the Internet, I saw traffic in these devices is increasing every day. Future, this ratio certainly not less than desktop and laptop. Actually most of the current website does not support them well, readers will find the layout crash, structural distortions, completely different font on the browser device.

Make WordPress Website Ready for Mobile
Make WordPress Website Ready for Mobile

Characteristics of equipment is a small screen, processing capability and memory limitations. So by loading a complete webpage for desktop computers as a positive work overload for the device.
By converting your blog or website to a mobile version, you are sure of getting more visitors and be available for your readers even when they do not have access to a computer.
Continue reading