Useful jQuery Plugins

Quick and powerful, jQuery can help designers and developers create awesome interactive websites that are appealing and accessible to the widest range of browsers. For your audience, the visit to your site will be both exciting and entertaining. Navigation, galleries and slideshows, are hot points for a site to shine.

Here are 35 useful fresh jQuery plugins focusing on navigation, gallery and slideshows, calendars, tab browsing and further resources to reduce time and effort while increasing your audience.

Direct Link: 35 Fresh and Useful jQuery Plugins

5 Easy Steps to Create a Fixed Header

This jQuery plugin just clones current header and place on top of the table. Follow below 5 steps to create a fixed header row of a normal HTML table or ASP.Net GridView/Datagrid.

Step 1: Include the jQuery library JavaScript file on header section of web page.

Download file (jquery-1.2.6.js)

Step 2: Include the jQuery Fixed Header JavaScript file on header section of web page.

Download file (jquery.fixedheader.js)

Step 3: Add this CSS code in stylesheet or header section of web page.

<style type="text/css">
.dataTable { font-family:Verdana, Arial, Helvetica, sans-serif; border-collapse: collapse; border:1px solid #999999; width: 750px; font-size:12px;}
.dataTable td, .dataTable th {border: 1px solid #999999; padding: 3px 5px; margin:0px;}
.dataTable thead th { background-color:#cccccc; color:#444444; font-weight:bold; text-align:left;}
.dataTable thead a {text-decoration:none; color:#444444; }
.dataTable thead a:hover { text-decoration: underline;}

/* Firefox has missing border bug! https://bugzilla.mozilla.org/show_bug.cgi?id=410621 */
/* Firefox 2 */
html</**/body .dataTable, x:-moz-any-link {margin:1px;}
/* Firefox 3 */
html</**/body .dataTable, x:-moz-any-link, x:default {margin:1px}
</style>

Step 4: Add this JavaScript code in header section of web page.

<script type="text/javascript">
$(document).ready(function(){
$("#data").fixedHeader({
width: 500,height: 300
});
})
</script>

Step 5: Create an HTML table on the page, including THEAD and TBODY sections. This plug-in uses the THEAD to create the fixed rows, and TBODY is our data.

<table id="data" class="dataTable">

<thead>
<tr>
<th> ….. <\th>
<th> ….. <\th>
</tr>
</thead>

<tbody>
<tr>
<td> ….. <\td>
<td> ….. <\td>
</tr>
</tbody>

</table>

Note: For ASP.Net GridView/Datagrid you have to keep the header part in THEAD and put your Gridview/Datagrid in the TBODY section of table but without Grid header.

Our table or GridView with fixed header is now ready to view.

jQuery Plugin for Fixed Header
jQuery Plugin for Fixed Header

Features
1. Allow horizontal scroll
2. Auto hide box when scroll in IE6
3. Allow to adjust header cell width with your own implementation

Requires
jQuery 1.2.6

Compatibility
IE6/7, Firefox 3.0/3.1, Opera 9.5, Chrome 0.2, Safari 3.1.2