Collection of Open Source Javascript Libraries: Google API

The Google AJAX Libraries API allows to include most popular javascript libraries into web application with correctly setting cache headers and up to date with bug fixes.
By using google.load() method we can include most popular, open source JavaScript libraries.

Google AJAX Libraries has collection of following libraries,

• jQuery
• jQuery UI
• Prototype
• script.aculo.us
• MooTools
• Dojo
• Ext Core
• Yahoo! User Interface Library (YUI)
• Ext Core
• Chrome Frame

How to load libraries

To use API we need to add API library as,

<script src="http://www.google.com/jsapi"></script>

google.load() method is used to load library into application as,

<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
google.load("prototype", "1.6.1.0");
google.load("scriptaculous", "1.8.2");
google.load("mootools", "1.2.4");
google.load("dojo", "1.3.2");
google.load("swfobject", "2.2");
google.load("yui", "2.8.0r4");
google.load("ext-core", "3.0.0");
</script>

e.g.

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1");

</script>

References:

WebSite: https://developers.google.com/speed/libraries

jQuery Watermark plugin

Watermark jQuery plugin will easily create watermark hints in input and textarea elements.

How to Use:

We can set watermark on an input element as,

$('#inputId').watermark('Required information');

//we can also set class name for appearance as,
  $('#inputId').watermark('Required information', {className: 'myClassName'});

Features:

• Watermark style is controlled by CSS classes
• Each input element can have its own independent watermark text and class/style
• Plugin automatically removes all watermarks prior to form submission
• Both watermark text and CSS class name can be changed dynamically
• Visual Studio Intellisense-compatible documentation included in source
• Minified version is very compact — under 3,000 bytes

References:

WebSite: http://code.google.com/p/jquery-watermark
Download:http://code.google.com/p/jquery-watermark/downloads/list

Input Limiter: jQuery plugin

Input Limiter jQuery plugin will allow you to limit input into form fields. It can
display a message as the user types to let them know how many
characters they have remaining.

Use:

Step 1: Add javascripts references into your page

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="jquery.inputlimiter.1.1.js"></script>

Step 2: Add textbox or textarea

<input type="text" id="text3" size="30" />
<textarea rows="3" cols="30" id="textarea1"/>

Step 3: Apply input limit to input element

$(function() {
    $('textarea').inputlimiter({limit: 100});
});

Input Limiter also provides various options like remText to customizing remaining text message, limitTextShow which Determines whether the limitText will be displayed after the remText etc.

References:

WebSite: http://rustyjeans.com/jquery-plugins/input-limiter
Demo: http://rustyjeans.com/jquery-inputlimiter/demo.htm
Download: Download Now

Animated Menu Using jQuery

jqueryglobe has shared a jQuery plugin for animated menu.
Which provides nice animation on mouse over on menu item.

References:

WebSite: http://jqueryglobe.com/article/animated-menu
Demo: http://jqueryglobe.com/labs/animated_menu
Download:Download Now

Nice Sliding Login Panel built with jQuery

Web-kreation has shared sliding login panel that show/hides the login panel on top of page.
The panel works by overlapping the content rather than pushing it.

References:

WebSite: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery
Demo : http://web-kreation.com/demos/Sliding_login_panel_jquery/
Download: http://web-kreation.com/?dl_id=22

Reactivate jQuery plugins after Asynchronous request

While playing with jQuery plugins, I observed that some jQuery plugins are not working in asp.net ajax update panel after Asynchronous request.

As most of the jQuery plugins calls there functions on page onload method, So we need to recall plugin functions after an asynchronous postback is finished.

In my previous post Ajax Events I have given basic idea of handling various asp.net Ajax events including endRequest event which raised after an asynchronous postback is finished and control has been returned to the browser.

We can use endRequest event to recall jQuery plugin’s function.

Example

Here I have used vtip tooltip plugin.

Add following script into your page,

<script language="javascript" type="text/javascript">
 function pageLoad() {
 var prm = Sys.WebForms.PageRequestManager.getInstance();
 prm.add_endRequest(EndRequest);
 }

 function EndRequest(sender, args) {
 // call JTool Tip function..
 jQuery(document).ready(function($) { vtip(); })
 }

 </script>

References:

WebSite:http://amolwable.com/index.php/2009/asp-net-ajax-events

vTip:jQuery tooltip plugin

vTip is a jQuery tooltip plugin, it is lightweight (706b js, 272b CSS, 270b image) .

References:

WebSite: http://www.vertigo-project.com/projects/vtip
Demo: http://www.vertigo-project.com/files/vTip/example.html
Download:DownLoad Now (zip)

jQuery Panel Gallery Plugin

catchmyfame has implemented a lightweight (5K) jQuery Panel Gallery Plugin, which changes automatically changes images after given interval of time. Plugin is useful for header banners, advertising banners.

Features:

• No slicing or editing of the images is needed
• It’s just 5K
• Easily configurable
• Reusable on multiple containers

Usage:

First, all images should be the same size and wrapped in a containing element

(div) which must have an ID.

<div id="container" style="position:relative">
<img src="image1.jpg" alt="image 1" width="500" height="250" />
<img src="image2.jpg" alt="image 2" width="500" height="250" />
<img src="image3.jpg" alt="image 3" width="500" height="250" />
..
</div>

Include jQuery and panelgallery scripts in page , then call panelGallery() function for your containing elements, We can apply the panel gallery to any number of elements on a page.

<script type="text/javascript" src="<b style="color: black; background-color: rgb(160, 255, 255);">jquery</b>.min.js"></script>
<script type="text/javascript" src="<b style="color: black; background-color: rgb(160, 255, 255);">jquery</b>.panelgallery.js"></script>
<script type="text/javascript">
$(function(){
 $('#container').panelGallery();
});
</script>

Options:

Plugin has various configurable options, that are applied using below syntax,

to know more details visit this.

$('#container').panelGallery({
 sections:5,
 imageTransitionDelay :3000,
 startDelay:5000,
 sectionTransitionDelay : 700,
 repeat:false,
 direction:"tb"
});

References:

WebSite: http://www.catchmyfame.com/2009/05/02/jQuery-panel-gallery-plugin
Demo: Demo 1 , Demo 2 , Demo 3
Download: http://www.catchmyfame.com/jQuery/jQuery.panelgallery.js

jQuery Image Cropping Plugin

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

WebSite: http://deepliquid.com/content/Jcrop.html
Demo: http://deepliquid.com/content/Jcrop_Examples.html
Download: http://deepliquid.com/content/Jcrop_Download.html

–

Styling input box: jQuery plugin

jQuery Impromptu is a great replacement for an alert, prompt, and confirm. Not only does it replace these but it also allows for creating forms within these controls. This is not intended to be a modal replacement, just a quick tool to prompt user input in a fashionable way.

WebSite: http://trentrichardson.com/Impromptu/index.php
Demo: http://trentrichardson.com/Impromptu/index.php
Download: js