Category: jQuery

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

Lazy Loader

Improve Your Page Performance With jQuery Lazy Loader

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load. Lazyloader inspired by YUI ImageLoaderUtility by Matt Mlinac.

Lazy Loader
Lazy Loader

Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it needed. It can give to efficiency in the program’s operation if properly and appropriately used.

Continue reading

15+ promising jQuery Lightbox-Clones plugins

Lightbox, and the newer Lightbox 2, is a JavaScript application used to display large images using modal dialogs. On a Lightbox-enabled page, a user can click an image to have it magnified in a Lightbox window, which resizes itself according to the size of the image using a gliding animation. Lightbox determines which images will be shown in the modal window through the XHTML “rel” attribute, which is used on an <a> element wrapped around the <img alt="" /> element. Lightbox also provides a way to attach captions to images and to run a slide show, which can be navigated using the arrow keys.

Fancy lightbox alternative
Fancy lightbox alternative

The script has gained widespread popularity due to its simple yet elegant style and easy implementation. While it was initially developed from scratch, Lightbox has since been modified to use a number of JavaScript libraries (such as the Prototype Javascript Framework and jQuery for its animations and positioning), to reduce the size of the code. The release of Lightbox encouraged other developers to work on similar projects, resulting in products such as 15+ Promising jQuery Lightbox plugins.
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 &#060;a target="_blank"'&#062; can be replicated in XHTML Strict with semantic markup and scripting.
Continue reading

Animated Drop Down Menu with jQuery

25 sexy jQuery Drop Down Multi Level Menu

Drop-down menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit. There are lots of drop down menus already out there. Here you’ll find 25 sexy jQuery and CSS based drop-down or just multi level menu tutorials with down loadable files and explanations as well.
Continue reading