NetWaver » JavaScript & AJAX

Lightweight JavaScript Slideshow and Tab Interface Script

NetWaver — Wed, 22 Apr 2009 15:34:21 +0000

I was constantly looking for unobtrusive JavaScript tabs script which doesn’t require any framework for my personal project. I have found SimpleTabs by Komrade but there’s a bug on it plus it doesn’t degrades gracefully if JavaScript is disabled.

Today I have just found Yetii, which stands for Yet (E)Another JavaScript Tab Interface Implementation. It’s a lightweight, object-oriented coded tab interface script which doesn’t require any JavaScript library/frameworks. It degrades gracefully in browsers without JavaScript support. You can have many independent tab interfaces on a single page, specify initial tab, turn on automatic tabs rotation, add next/previous navigation, nest one tab interface inside another and define custom function to run after certain tab is clicked.

Though the script is intended for tab interface implementation, I found out that you can also use this script for another purpose. Just turn on automatic tabs rotation and add next/previous navigation – a lightweight JavaScript slideshow will born. You can now have an unlimited tab interface plus an unlimited slideshow from a simple, lightweight JavaScript.

Demo & Documentation: http://www.kminek.pl/lab/yetii/
License: BSD License

CSS Browser Selector

NetWaver — Sat, 18 Apr 2009 15:07:54 +0000

CSS Browser Selector is a very small (811 bytes) JavaScript which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser that can be merged into your normal classes. The idea came from 37 Signals browser selector idea and Rafael Lima just did it.

This one line JavaScript will greatly help web developers on CSS hacks. Maybe you can now say “Yes” to your customers if ever they asked you: “Will my site looks the same on most browsers?“. Putting aside the troublesome IE6, a very detail-oriented client will still give you headaches on consistent browser rendering. Let’s take for example Firefox 3.0.8 and Opera 9.64. Now create a simple form with radio buttons and checkboxes. When you view it on those browsers, they didn’t look the same. It’s fine in Firefox but in Opera, the labels just move up a little bit. With CSS Browser Selector, you can create a class specific for Opera to fix the line alignment.

Demo & Documentation: http://rafael.adm.br/css_browser_selector/
Download: http://github.com/rafaelp/css_browser_selector/tree/master
License: Creative Commons Attribution 2.5 Generic

24 HTML Form Elements Customization Techniques

NetWaver — Fri, 17 Apr 2009 10:51:28 +0000

HTML form elements do not render consistently across all browsers. While some form elements such as textbox and textarea can be styled through CSS to look the same on most browsers, others are ugly enough which can’t be ruled by CSS. Here are 24 solutions you can use to customize your form elements.

Checkbox and Radio Buttons

1.) FancyForm

FancyForm is a powerful replacement script used to provide the ultimate flexibility in changing the appearance and function of checkbox and radio buttons form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supporting browsers. It requires MooTools JavaScript framework.

2.) CRIR: Checkbox & Radio Input Replacement

This combination of JavaScript and CSS will hide checkbox and radio buttons. This will allow you to style the label however you wish using CSS, and the actual input control will be hidden. The form will still collect data as it normally would because the label itself will trigger the hidden input control. The form is still fully functional if JavaScript is disabled or not supported.

3.) Ryan Fait’s Custom Checkboxes & Radio Buttons

This JavaScript and CSS will allow you to use custom images for checkboxes, radio buttons and select lists. The unobtrusive script gracefully degrades, so if JavaScript is disabled, normal form input objects appear instead of your customized elements.

4.) ARC – Adam’s Radio/Checkbox Customization

The script parses a specified form for input types and associated labels. If the input type is found to be a radio button or checkbox then the widget is hidden and the label is altered to display a custom widget-style-image by modifying the label’s CSS style.

5.) prettyCheckboxes

6.) jQuery checkbox

7.) Articles & Tutorials On Customizing Checkbox and Radio Buttons

Select / Dropdown Box

1.) JavaScript Image Combobox

2.) jQuery Dropdown Check List

3.) Custom Select With Icons

4.) ComboBoxes Using MooTools

5.) Select Replacement

6.) Additional Select Box Customization (Won’t Work If JavaScript Disabled)

Almost All Form Elements

1.) Custom Form Elements (CFE)

Custom Form Elements unites all efforts in the web to enhance web-based XHTML forms in terms of style, usability and accessibility by using Javascript and/or CSS. Custom Form Elements work cross-browser, currently supporting most A-grade browsers.

2.) Emblematiq Niceforms

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.

3.) jQuery Plugin: jNice

Standalone Unobtrusive Tabs Script: SimpleTabs By Komrade

NetWaver — Wed, 15 Apr 2009 05:04:05 +0000

SimpleTabs is lightweight (2.5 KB compressed), unobtrusive tabs script which doesn’t require any JavaScript frameworks such as jQuery, Mootools etc. Some of it’s interesting features are:

It does not need different IDs per tab container in order to have multiple tab sets. So, you can have as many SimpleTabs tab sets as you want on the same page. This solve the most annoying features I found in other tab content script where you are limited to a single tab set.
It remembers the last tab clicked on and if you reload the page (e.g. navigate somewhere and return to the page containing the tabs) that specific tab is already active.

Single Bug

When I tried to implement this script on my project, I found at that putting

element inside the content page will cause the script not to work anymore. Unfortunately, I didn’t find any contact information where I send or ask for support regarding this bug.

Demo & Documentation: http://labs.komrade.gr/simpletabs/
License: GNU/GPL v2.0

7 AJAX Loading Icon Generators

NetWaver — Tue, 14 Apr 2009 15:07:31 +0000

If you want to inform your websites’ visitor that there are more information to be displayed or still to be loaded on your page, you may need a “loading” or “wait” icon, or I simply called it a preloader image. An Ajax loading icon is also most commonly used on AJAX-base sites and applications. However, not all of us have the skills to design and create such icons. Here, we present to you online tools that will generate an AJAX loading icons and some sites which have a collection of it that are ready for download.

Preloaders.net

Preloaders.net has a nice categorized collection of GIF preloaders. You can set your preloaders’ background (transparent is also available) and foreground color, size with contrains proportion option and it’s animation speed.

Ajaxload

Ajaxload.info is still in Beta and the only option for it’s loading icon that you can set is it’s background and foreground color.

Load Info

LoadInfo.net options for it’s loading icon are background and foreground color and three predefined sizes which are 16×16, 24×24 and 48×48.

Web Script Lab

Web Script Lab’s Ajax Loading GIF Generator options for it’s loading icon are background and foreground color and three predefined speed which are normal, fast and slow.

Chimply

Chimply is in Beta stage but it has also a nice collection of categorized Ajax loading icons. Common settings include background and foreground colors and it’s width. Many advanced options will appear depending on what type of preloader you are going to select.

mentalized Activity Indicators

SanBaldo Ajax Loading Animated GIF

If this post have missed any AJAX loading icon generators, please feel free to add them in the comment below.