This is a tutorial that will teach you how to implement the Highlight Effect in JavaScript using the famous libraries Script.aculo.us, JQuery & MooTools.

In Script.aculo.us, Effect.Highlight flashes the color as the background of the element. It is mostly used to draw attention to the part of the page where the effect is applied (could be a completed AJAX Call).

To initialize the effect we have to set the ID of the element that will be highlighted (for instance a DIV) and the right options (startcolor, endcolor, restorecolor, keepBackgroundImage).

Read more from this entry…

Do you have a F.A.Q. page and you wish to add some cool effects on it? This tutorial helps you to do that. I will show you how to add the effects using the power of JQuery.

Before going through the setup process, check the demo of the fancy F.A.Q. page.

To add the Scroll and the Color Fading effects I’ve used 2 JQuery plugins: Scroll.To & highlightFade. The former is used to add a scroll effect to the target element (ie: a question containing the answer) and the later is used to add a color fade effect to the text that should be read.

Read the rest of this entry…

Using the famous libraries JQuery, MooTools and Script.aculo.us you can easily scroll overflowed elements and the screen itself. Here’s how you can use this cool effect in each library:

JQuery.ScrollTo is an excellent, easy to implement and fully customizable plugin useful to scroll elements or the window itself. There are many ways to specify the target position and many options to customize the animation and the final position. There are 2 additional plugins that can be used with this ScrollTo: jQuery.LocalScroll & jQuery.SerialScroll.

Read more from this entry…

Do you need to add advanced interaction controls to your HTML Table without refreshing the browser page? Checkout the following list of Data Grids:

tablesorter is an awesome JQuery plugin that turns a standard HTML table with HEAD and TBODY tags into a sortable table without page refreshes.

Features:

• Multi-column sorting
• Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. – you can add your own easily
• Support for ROWSPAN and COLSPAN on TH elements
• Extensibility via widget system
• Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
• Small code size

The script is very easy to setup and it has a full documentation that will help you to customize it.

[Homepage | Download | Demo]

DataTables is an excellent JQuery Plugin for sorting tables. It’s a highly flexible tool which adds advanced interaction controls to any HTML tables:

Quick feature list:

• Variable length pagination
• ‘On the fly’ filtering
• Multi-column sorting with data fly detection
• Smart handling of column widths
• Multilingual
• State saving
• Hidden columns
• AJAX auto loading of data
• Customizable via CSS

[Homepage | Download | Demo]

Read more from this entry…

An AutoTab is used to automatically set focus to the next form element when the maximum size of the current element has been reached. The user is spared from click in or tab to the next field. This thing can definitely provide a better experience to the user who is filling the form.

Below, we have created a list with some free JavaScript Auto Tabs, meant to help you in choosing a script that will improve the usability of your forms:

Cut & Paste Auto tab (form field) script from JavaScript Kit

Implementation
1. Insert the JS Code in the BODY section of your page:

<script>
/*
Auto tabbing script- By JavaScriptKit.com

http://www.javascriptkit.com

This credit MUST stay intact for use
*/

function autotab(original,destination) {
if (original.getAttribute && original.value.length == original.getAttribute("maxlength"))
destination.focus()
}
</script>

2. Insert the onKeyUp attribute for the field where the function will be called:

<input type="text" name="first" size=4
onKeyup="autotab(this, document.form_name_here.second)" maxlength=3>

[Read more...]

Auto Tab from javascript.internet.com

Implementation
1. Include the following script in the HEAD section of your page:

<script type="text/javascript" src="autoTab.js"></script>

2. In the form:

<form>
Phone Number :
<input onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3"> -
<input onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3"> -
<input onKeyUp="return autoTab(this, 4, event);" size="5" maxlength="4">
</form>

To get the JS file’s content go to this address then select ‘Source Code’.

[Read more...]

Auto-Tab by Matt Kruse

Implementation
1. Include the following script in the HEAD section of your page:

<script type="text/javascript" src="autotab.js"></script>

(click here to download the js file)
2. Form:

<form>
<input type=text name="Phone_1" size=3 maxlength=3 onKeyDown="TabNext(this,'down',3)"
onKeyUp="TabNext(this,'up',3,this.form.Phone_2)">
-
<input type=text name="Phone_2" size=3 maxlength=3 onKeyDown="TabNext(this,'down',3)"
onKeyUp="TabNext(this,'up',3,this.form.Phone_3)">
-
<input type=text name="Phone_3" size=4 maxlength=4>
</form>

[Read more...]

Autotab: jQuery auto-tabbing and filter plugin

Implementation
1. Include the necessary JQuery files:

<script type="text/javascript" src="latest-jquery-version.js"></script>
<script type="text/javascript" src="jquery.autotab.js"></script>

2. Add text fields including an ID:

<form>
<div><strong>Phone Number:</strong></div>
<input type="text" name="area_code" id="area_code" maxlength="3" size="3" /> -
<input type="text" name="number1" id="number1" maxlength="3" size="3" /> -
<input type="text" name="number2" id="number2" maxlength="4" size="5" />
</form>

3. Initialize autotab on the text fields with a ready() handler:

<script type="text/javascript">
$(document).ready(function() {
$('#area_code').autotab({ target: 'number1', format: 'numeric' });
$('#number1').autotab({target:'number2', format:'numeric', previous:'area_code'});
$('#number2').autotab({ previous: 'number1',format: 'numeric'});
});
</script>

[Read more...]