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.

Here’s a simple implementation example. It works for anchor elements.

First, we need to include the jquery library, the Scroll.To plugin and one if its “sons”: LocalScroll.

<script type="text/javascript" src="/js/jquery.latest.js"></script>
<script type="text/javascript" src="/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="/js/jquery.localscroll-1.2.7-min.js"></script>

Now let’s initialize the scrolling:

<script type="text/javascript">
<!--
$(document).ready(function()
{
$.localScroll({
		queue:true,
		duration:1000
});
});
-->
</script>

$.localScroll() gets all the local links in the page. I’ve also used the “duration” option which represents the length of the animation (none is used as default).

In the BODY text there is the link and its target:

(put this in the footer zone of the page)

<a href="#top_zone">Go to Top Page</a>

(put this in the header zone of the page)

<a id="top_zone"></a>

A live demo of the Scroll.To Effect can be seen in the current page. Scroll down to bottom and click one of the blue arrows from the footer zone.

[Go to project page | View Demo]

Fx.Scroll is a MooTools Plugin that can be used to scroll any element with an overflow, including the window element.

An implementation example

Download the required files first
1. Go to http://mootools.net/download and download the full MooTools Core Library.
2. Go to http://mootools.net/more and select the Fx.Scroll plugin – Download file

Do the HTML Implementation
3. Include the required files into the HEAD section of your page:

<script type="text/javascript" src="/js/mootools-1.2.1-core.js"></script>
<script type="text/javascript" src="/js/mootools-1.2-more.js"></script>

4. Initialize the Scroller:

<script type="text/javascript">
<!--
window.addEvent('domready', function() {  

$('top_link').addEvent('click', function(){

var myFx = new Fx.Scroll(window).toBottom();

});

});
-->
</script>

5. Call the Script: In this example, a clicked link triggers the Scroller – the following code should be inserted in the top section of the page:

<a id="top_link" target="_blank" href="#" onClick="return false;">Go To Bottom</a>

[Go to project page | View Demo]

Script.aculo.us’ Effect.ScrollTo is used to scroll to a specific place in the page.

Example

Include the libraries first:

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

The following code should be inserted in the BODY of your page:

<a href="#" onclick="Effect.ScrollTo('comment_post'); return false;">
Comment on this post
</a>

The ID of the target element should be ‘comment_post’.

Options
duration – float value, in seconds, defaults to 1.0
offset – integer value, in pixels, defaults to 0

[Go to project page | View Demo]

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]

Yahoo! UI Library: DataTable provides a simple and powerful API to display screen-reader accessible tabular data on a web page.

Important features:

• Sortable columns
• Pagination
• Row Selection
• Scrolling
• Inline Cell Editing
• Resizeable columns

[Homepage | Download | Demo]

dhtmlxGrid is an Ajax-enabled JavaScript grid control with powerful data binding, cutting-edge functionality, and excellent performance with large datasets. The gridview component is easy to use and provides great flexibility having a rich client-side API. Different data sources are supported such as: CSV, JS array, XML, JSON, HTML Table.

A quick feature list:

• Full Control with JavaScript API
• Simple JS or XML Configuration
• Integration with HTML Form
• Built-in filtering, searching, grouping
• Auto-calculated values in footer/header
• Easy client-to-server comunication
• Support for including other grids as subgrids
• Drag-and-drop rows/columns within grid
• Different keyboard mappings

[Homepage | Download | Demo]

Nitobi Grid offers features that matter to developers: Excel copy and paste, in-place cell editing, and live scrolling.

Features include:

• Livescrolling Mode
• Master-Detail Grids
• Multi-Select
• Paging Mode
• Remote Data
• Resizable Grid
• Showall Mode

[Homepage | Download | Demo]

TinyTable JavaScript Table Sorter – 2.5KB is a very small and easy to use ‘Data Table’ script. It has been tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome.

Features include:

• Row & Column Highlighting
• Optional pagination
• Support for links
• Date/link parsing
• Header Class Toggling
• Auto data type recognition
• Selective column sorting

[Homepage | Download | Demo]

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