Ajax Updates

Enable Mouse Gestures With jQuery
Flexible Modal Windows With jQuery Superbox!
TypeSelect: Selectable Custom Texts With JS
JavaScript-Based Presentations: WebSlide

Posted: 22 Nov 2009 04:55 PM PST

jQuery Fancy Gestures is a plugin for enabling mouse gestures on any website.

Using the plugin, you can accept inputs similar to smartphones, create a captcha where users will need to draw a text & more (totally up to your imagination).

Getting Started

Create a new html file with the following code. The function will return data i.e. the recognized character/symbol/name:

 <div id="sample" style="border:1px solid black;position:relative;height:150px;width:150px;"></div>  <script type="text/javascript" src="wz_jsgraphics.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.fancygestures.js"></script>  <script>  $(document).ready(function () { 	$('#sample').fancygestures(function (data) { 		alert(data); 	}); });  </script>

Customization

Please use the key below to generate a string of numbers for your gesture: e.g. L will be something like 2 then 0. The following letters are already mapped into the script:

Suppose you want to add a "CIRCLE" symbol with the sequence "432107654″, then simply edit jquery.fancygestures.js and add the following after line 7:

 gestures["CIRCLE"] = "432107654";

The above code will return "CIRCLE" as data in the function when you make a circle. However, make sure you do not have similar gestures, or you will get unpredictable results e.g. having same gesture for zero and letter O.

Demo: http://anantgarg.com/2009/05/21/jquery-fancy-gestures/
Download: http://anantgarg.com/fancygestures.zip
Source: http://anantgarg.com/2009/05/21/jquery-fancy-gestures/

Related Listings:

Record Mouse Movement The "movelogger" records the mouse movement a users does on...
Move Div – Images Vertically with Mouse Movements A really nice vertical version of the menu which move...
Horizontal Pictures Movements with Mouse After writing tutorial on Move Div – Images Vertically with...

Flexible Modal Windows With jQuery Superbox!

Posted: 22 Nov 2009 04:50 PM PST

jQuery Superbox! is a jQuery plugin for creating easily customizable modal windows (lightbox-like).

It is an accessible script, uses the rel attribute of an element for triggering & href attribute is used for defining the source to be displayed.

To change the look & feel, it is enough to play with the CSS as no styles are set by default.

It can display any type of content as every HTML content can be presented. But by default, images (single or gallery mode), text content & iframes are supported

Dimensions of the modal window can be choosen to resize automatically according to the content or width & height can be defined for a standard size.

Demo: http://www.pierrebertet.net/projects/jquery_superbox/
Download: http://www.pierrebertet.net/projects/jquery_superbox/
Source: http://www.pierrebertet.net/projects/jquery_superbox/

Related Listings:

Control.Modal Windows Control.Window is a fully programmable, multi purpose windowing toolkit for...
JQuery Modal Dialog Plugin This is a “yet another modal dialog JQuery plugin with...
Light Window : Single Modal Window Another implementation of single modal window. It uses iframes which...

TypeSelect: Selectable Custom Texts With JS

Posted: 22 Nov 2009 04:46 PM PST

TypeSelect is a JavaScript-based solution for using selectable custom fonts on the web.

It combines the power of typeface.js, jQuery, the canvas, toDataURL, CSS background properties & real overlayed text to accomplish this feature.

TypeSelect is very easy to understand & implement. It is totally controlled via CSS & no server-side files are required.

It has support for double/triple-click selections, UTF-8 characters & gracefully degrades in IE6.

On the other hand, currently, it has some limitations like unselectable text in IE, not being able to use :hover or line breaks & few more.

Demo: http://www.typeselect.org/demo
Download: https://sourceforge.net/projects/typeselect/files/typeselect/typeselect.0.1.zip
Source: http://www.typeselect.org/

Related Listings:

Custom HTML Buttons and Form Elements Have you ever wanted to use your own images for...
Custom HTML Form Elements Have you ever wanted to use your own images for...
Custom form elements This JavaScript and CSS will allow you to use custom...

JavaScript-Based Presentations: WebSlide

Posted: 22 Nov 2009 04:32 PM PST

WebSlide is a free & JavaScript-based application for displaying/presenting images easily.

Mostly, it is built for viewing website design mockups which is very handy for freelancers & web agencies.

Slides can be switched with the help of a navigation bar or by keyboard. The navigation bar can also display any other information about the content displayed.

Images can be zoomed in/out & moved by drag'n drops. Optionally, presentations can be protected with passwords.

WebSlide does not have any server-side requirements & can be installed in minutes.

Demo: http://paularmstrongdesigns.com/projects/webslide/demo/
Download: http://paularmstrongdesigns.com/files/projects/webslide-1.0b1.tar.gz
Source: http://paularmstrongdesigns.com/projects/webslide/