Farbtastic: jQuery color picker plug-in

Farbtastic is a jQuery plug-in that can add one or more color picker widgets into a page through JavaScript. Each widget is then linked to an existing element (e.g. a text field) and will update the element’s value when a color is selected.

Farbtastic uses layered transparent PNGs to render a saturation/luminance gradient inside of a hue circle. No Flash, no pixel sized divs.

Uses

1. Include farbtastic.js and farbtastic.css in your HTML:

   <script type="text/javascript" src="farbtastic.js"></script>
   <link rel="stylesheet" href="farbtastic.css" type="text/css" />
   

2. Add a placeholder div and a text field to your HTML, and give each an ID:

   <form><input type="text" id="color" name="color" value="#123456" ></form>
   <div id="colorpicker"></div>
   

3. Add a ready() handler to the document which initializes the color picker and link it to the text field with the following syntax:

    $(document).ready(function() {$('#colorpicker').farbtastic('#color');  });
   

References:

WebSite: http://acko.net/dev/farbtastic
Demo: http://acko.net/dev/farbtastic
Download: farbtastic12.zip

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

Gritter: jquery notification plugin

Gritter is jquery plugin for notification which displays messages in bubble/popup that appears in the top of web page.

It has facility to disappear automatically after x seconds or display until manually cloase with the “sticky” option.

We can set the speed of the fade effect used while the notifications appear/disappear.

WebSite:http://boedesign.com/2009/07/11/growl-for-jquery-gritter
Demo: http://boedesign.com/demos/gritter