Here is a jQuery example for a captcha in a registration form. In order to pass the “Are you human” test, the user has to drag the numbers from 1 to 6 into order.

jQuery draggable captcha

<script type="text/javascript">
            (
            function($){

                $.fn.shuffle = function() {
                    return this.each(function(){
                        var items = $(this).children();

                        return (items.length)
                            ? $(this).html($.shuffle(items,$(this)))
                        : this;
                    });
                }

                $.fn.validate = function() {
                    var res = false;
                    this.each(function(){
                        var arr = $(this).children();
                        res =    ((arr[0].innerHTML=="A")&&
                            (arr[1].innerHTML=="B")&&
                            (arr[2].innerHTML=="C")&&
                            (arr[3].innerHTML=="D")&&
                            (arr[4].innerHTML=="E")&&
                            (arr[5].innerHTML=="F"));
                    });
                    return res;
                }

                $.shuffle = function(arr,obj) {
                    for(
                    var j, x, i = arr.length; i;
                    j = parseInt(Math.random() * i),
                    x = arr[--i], arr[i] = arr[j], arr[j] = x
                );
                    if(arr[0].innerHTML=="1") obj.html($.shuffle(arr,obj))
                    else return arr;
                }

            })(jQuery);

            $(function() {
                $("#sortable").sortable();
                $("#sortable").disableSelection();
                $('ul').shuffle();

                $("#formsubmit").click(function(){
                    ($('ul').validate()) ? alert("Yeah, you are a human!") : alert("No, you are not a human!");
                });
            });
        </script>

Enjoyed this post? Subscribe to our RSS feeds!

Author: Cody
Download: From here

Make a donation

Related Posts:

• Latest Tweets Tooltips
• Rounded Menu with CSS3 and jQuery
• timeAGO a jQuery plugin
• GoogleMap Markers jQuery from HTML list !
• jQuery Image Load

In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.

Similar to the spinner demo button we use

Enjoyed this post? Subscribe to our RSS feeds!

To make things easier, we created two functions, one for expanding an item and one for collapsing it. The expand function will make the icon rotate 4 times around itself (360 times 4 are 1440). We will also make the item expand by animating an increase in its width. Then, we let the content appear, first the whole div and then the paragraph element.

The collapse function will rotate the icon back, decrease the width of the item and make the content disappear.

Author: Mary Lou
Download: From here
Tutorial: Found here

Make a donation

Related Posts:

• Latest Tweets Tooltips
• ShineTime: jQuery & CSS3 Gallery With Animated Shine Effects
• Catch 404 A jQuery And CSS3 Modal Plugin For Handling Broken Links Elegantly
• jQuery fancy Draggable Captcha
• timeAGO a jQuery plugin

You may want these for a presentation, a, blog post or for the site featuring your brand new awesome lightbox script (please no!). They are 32bit PNGs, each have their own official shadow treatment, and no background matte color.

Hi-Res Browser Icons in 32 bit

I came across this post today by Paul Irish, and found these ultra high resolution browser icons, you will love.

Have a Jaw Dropping Gander at these

Available in
256×256 256 x 256 browser icon (272)
128×128 128 x 128 browser icon (221)
64×64 64 x 64 browser icon (221)
32×32 32 x 32 browser icon (228)
16×16 16 x 16 browser icon (238)

Original Files and Post on Pauls website

Make a donation

Related Posts:

• Multi Browser Icons
• Free Icon Search Engine
• DryIcons : Colorful Stickers Part 6 Icons

We’re done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won’t have it. It’s time to raise our standards. Here, you’ll find only the most well-made, free & open-source, @font-face ready fonts.

What its about …

Like any revolution, we aim to make progress, and we need help. If you want to be a part of this free, open-source type movement, you should join us and contribute. If you have any questions about The League or the movement, -
get in touch.
Read Our Manifesto

Some Sample Fonts below

Find out more Click here

Make a donation

Related Posts:

• Free Icon Search Engine
• Multi Browser Icons
• Free Under Construction Theme

Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. “4 minutes ago” or “about 1 day ago”).

The timeAGO jQuery plugin

Timeago was originally built for use with Yarp.com to timestamp comments.

• Avoid timestamps dated “1 minute ago” even though the page was opened 10 minutes ago; timeago refreshes automatically.
• You can take full advantage of page caching in your web applications, because the timestamps aren’t calculated on the server.
• You get to use microformats like the cool kids.

Let’s see it working

Enjoyed this post? Subscribe to our RSS feeds!

Author: Ryan McGeary
Download: from here

Make a donation

Related Posts:

• jQuery fancy Draggable Captcha
• Rounded Menu with CSS3 and jQuery
• GoogleMap Markers jQuery from HTML list !
• jQuery Image Load
• bit.ly URL Shortener using jQuery and Ajax

This is one of my favorite jQuery plugins, it has far reaching features. It’s ease of use and implementation means even novices can plot markers on Google Maps with absolute simplistic ease.

How it works

         <script>
           gmap = new GMap2(document.getElementById('map'));
           gmap.setCenter(new GLatLng(0, 0), 13);
           $('#brisbane').gmaplist(gmap);
         </script>

The list element to propgate the markers

<div id="map" style="display:none"></div>
         <ul id="brisbane">
           <li>Redcliffe, QLD</li>
           <li>Cornubia, QLD</li>
           <li>Birkdale, QLD</li>
           <li>Wellington Point, QLD</li>
           <li>Burpengary, QLD</li>
           <li>Jimboomba, QLD</li>
         </ul>
       </div>

Enjoyed this post? Subscribe to our RSS feeds!

Options

The plugin accepts an options object. The following variables are accepted:

• delay: The lookup delay in milliseconds.
  Geocoding lookups need to be throttled to prevent 602 errors. The default value of 100ms is typically good enough.
• loadingGraphic: Path to a loading graphic
  The map is not displayed until all geocoding has been performed. This option is the path to a loading graphic
• debug: Logs some debugging info to the console
  Currently logs each point result from the Google gatLatLng() hook.

Author: Nicholas J Mahoney
Download: Gmap List
jQuery: repository

Who could use this ?

Just about anyone. Ideally suited to shopping websites, transport websites showing depots and stores. Perhaps real estate etc.. the uses are limitless.

Make a donation

Related Posts:

• jQuery fancy Draggable Captcha
• Rounded Menu with CSS3 and jQuery
• timeAGO a jQuery plugin
• jQuery Image Load
• bit.ly URL Shortener using jQuery and Ajax

Small script, showing how to add a welcome to your website visitors.

Demo right below this line

Code to produce this

<script language="JavaScript" src="http://www.geoplugin.net/javascript.gp" type="text/javascript"></script>
  <h3><img src="/images/waving.gif"><script language="Javascript"> 
	document.write("Welcome to our visitors from "+geoplugin_city()+", "+geoplugin_countryName()); 
  </script></h3>

Source: GeoPlugin

Make a donation

Related Posts:

• No related posts found

scripty2 is divided into three parts, core, fx, and ui, and supports IE6+, Safari 3+, Firefox 3+, Chrome, Opera 10 and most WebKit-based browsers.
Alpha notice: scripty2 is currently in alpha, and not feature-complete. The API is not final and subject to change.

• scripty2 core

  Core contains various JavaScript and DOM extensions used by scripty2 fx and scripty2 ui, plus developer utility classes.

• scripty2 fx

  The scripty2 effects framework provides for time-based transformations of DOM elements and arbitrary JavaScript objects. This is at the core of scripty2 and presents a refinement of the visual effects framework of script.aculo.us 1.

• scripty2 ui

Getting started

• scripty2 depends on Prototype 1.6.1 or later. For your convenience, a development copy and a minified version of Prototype is included in the distribution.

  To use scripty2, include this line in your HTML:

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

  For debugging, you can also include the libraries seperately:

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

Help & Community

• Want to discuss? Share feature ideas, problems, suggestions, praise? You’re welcome to do so on the scripty2 Google Group.

  Found a genuine bug? Please report in detail on our Lighthouse bug tracker..

  Interested in development? Check out the scripty2 repository on Github.

Download: from here
Documentation: found here
Demos: just about here

Make a donation

Related Posts:

• BubbleUp – jQuery plugin

Found a tutorial about image loading using Jquery written by Remy Sharp while trying to create the same function for company i am working at. Remy has publish the core script and here i will modify it to make it work for multiple images, and load in sequencing order.

Multiple Image Loading

First we create an HTML page which has list element with class “loading” which we’re going to define later in the CSS, the amount of the list element depend on how many images we need to put here, in this example i have 3 images.
Follow up the comments from my previous post about animate loading image with jquery which asking about how to populate images from the DOM instead of declare the image within the javascript codes manualy, so i made a little changes into the code since it seems to be easier for you all to adopt this into your website.

Enjoyed this post? Subscribe to our RSS feeds!

<ul id="container">
  <li><img src="your_image_url.jpg"></li>
  <li><img src="your_image_url.jpg"></li>
  <li><img src="your_image_url.jpg"></li>
  <li><img src="your_image_url.jpg"></li>
</ul>

The css

ul li {
	width:112px;
    height:112px;
    list-style:none;
}
ul li.loading {
	background: url(spinner.gif) no-repeat center center;
}
#loadnote {
	position:absolute;
    top:0px;
    left:0px;
    background:red;
    padding:10px 15px;
    color:white;
}

The Javascript

$(function () {
	//@ my flicker link
	var flickr_set = 'http://www.flickr.com/photos/87187920@N00/';
	//@ id of div where the loading informations visible
	var _loadDivId = 'loadnote';
	//@ id of the ul container
	var _imgContainerId = 'container';
	//@ style of li loading (spinner image)
	var _imageLoadClassName = 'loading';
	//@ grab the images
	var images = $('ul#'+_imgContainerId+' li img');
	//@ image length
	var max = images.length;
	//@ remove them from DOM to prevent normal load
	$('ul#'+_imgContainerId+' li').remove();
	//@ loading div object
	var loadDiv = null;
	//@ start loading
	if(max>0){
		loadDiv = $('<div id="'+_loadDivId+'" style="display:none"></div>').appendTo($('body'));
		LoadImage(0,max);
	}
	//@ Loading Function Handler
	function LoadImage(index,max)
	{
		if(index<max)
		{
			// loading div update
			$('#'+_loadDivId).html("Loading "+(index+1)+" of "+max).fadeIn("fast");
			// add list to ul
			var list = $('<li id="_img'+index+'"></li>').attr('class',_imageLoadClassName).appendTo('ul#'+_imgContainerId);
			// new image object
			var img = new Image();
			// current image
			var curr = $("li#_img"+index);
			// load current image
			$(img).load(function ()
			{
				//@ hide it first + .hide() failed in safari
				$(this).css('display','none');
				//@ remove loading class from li and insert the image into it
				$(curr).removeClass(_imageLoadClassName).append(this);
				//@ optional wrap with link
				$(this).wrap('<a href="'+flickr_set+'"></a>');
				//@ fade it in
				$(this).fadeIn('slow',function()
				{
					if(index == (max-1))
						{
							//@ remove loading div after all images loaded
							$(loadDiv).remove();
						}
					else
						{
						  //@ we are inform loading next item
						  $(loadDiv).html('Wait Loading Next Item ...');
						  //@ delay 2 secons and load next item *uses jquery timer plugin*
						  $(this).oneTime("2s", function() { LoadImage(index+1,max); });
						}
				});
			}).error(function () {
				//@ if loading error remove li
				$(curr).remove();
				//@ try to load next item
				LoadImage(index+1,max);
			}).attr('src', $(images[index]).attr('src'));
		}
	}
});

Please change Flickr account to reflect your own Flickr Account

Dependencies

• Jquery Javascript Library
• Jquery Timer Plugin

Author: Chazzuka
Original Article: Found here

Make a donation

Related Posts:

• jQuery fancy Draggable Captcha
• Rounded Menu with CSS3 and jQuery
• timeAGO a jQuery plugin
• GoogleMap Markers jQuery from HTML list !
• bit.ly URL Shortener using jQuery and Ajax

Are you looking for Google style CAPTCHA (Human verification code) script for PHP projects, Please take a look at this post. I want to explain how to implement cool-php-captcha script for forms. Use it and add security to your web projects.

How it is done – the form

<form method="post"  action="reg.php">
<b>Name</b><br/>
<input type="text" name="name" /><br/>
<b>Message</b><br/>
<textarea name="message"></textarea><br/>
<img src="captcha.php" id="captcha" /><br/>
<a href="#" onclick="
document.getElementById('captcha').src='captcha.php?'+Math.random();
document.getElementById('captcha-form').focus();"
id="change-image">Not readable? Change text.</a><br/><br/>
<b>Human Test</b><br/>
<input type="text" name="captcha" id="captcha-form" /><br/&gt;
<input type="submit" />
</form>

The reg.php

<?php
session_start();
if (!empty($_REQUEST['captcha']))
{

if (empty($_SESSION['captcha']) || trim(strtolower($_REQUEST['captcha'])) != $_SESSION['captcha'])
{
$note= 'Please enter correct text code';
}

else
{

if($_SERVER["REQUEST_METHOD"] == "POST")
{
$name=htmlentities($_POST['name']);
$message=htmlentities($_POST['message']);
// Insert SQL Statement
$note= 'Values Inserted Successfully';
}

}
unset($_SESSION['captcha']);
}
?>

Enjoyed this post? Subscribe to our RSS feeds!

Author: Srinivas Tamada
Source code taken from : Cool-php-captcha
Download: From Here

Make a donation

Related Posts:

• Weather Slider