Captcha Refresh 1.0

Created Friday 19th of September 2008 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)

Please have a look at the "Other Resources" for bug reports or further help on jQuery. Do not post bug reports or feature requests as comments to unrelated articles. If bug reporting on bugtracker.a-framework.org fails, e-mail me.

What it Does

If you use a so called CAPTCHA-image on your site then you can use this plug-in to allow users to click your CAPTCHA in order to generate a new random string - provided your CAPTHA-script generates a random image every time it is called.

How to Use

jQuery(document.body).captchaRefresh({src: '/captcha.png'}); Would make all images with '/captcha.png' as their source in the document clickable.

Run Captcha Refresh on a parent-element of the captcha image(s). Running it on document.body affects every CAPTCHA-image in the document.

Example

Example Code

HTML

<div id="jquery-captcha-refresh-example">
<
img src="/aFramework/Utils/Captcha.php" alt="" />
</
div>

JS

jQuery('#jquery-captcha-refresh-example').captchaRefresh({src'/aFramework/Utils/Captcha.php'});

Source Code

jQuery.fn.captchaRefresh = function (conf) {
    var 
config jQuery.extend({
        
src:    '/captcha.png'
        
title:    'Can\'t see what it says? Click me to get a new string.'
    
}, conf);

    return 
this.each(function (x) {
        
jQuery('img[src^="' config.src '"]'this).attr('title'config.title);

        
jQuery(this).click(function (event) {
            var 
clicked jQuery(event.target);

            if (
clicked.attr('src') && clicked.attr('src').indexOf(config.src) === 0) {
                var 
now            = new Date();
                var 
separator    config.src.indexOf('?') == -'?' '&';

                
clicked.attr('src'config.src separator now.getTime());
            }
        });
    });
};

Download

Plug-in

Requires

Random jQuery Plug-ins

  • Removable File Upload

    This plug-in adds a "remove"-link next to input[type=file]:s that allows the user to remove a selected file from the input.

    Details

  • View More

    This plug-in allows an element's contents to be hidden untill the user clicks a certain element. It works exactly like the HTML5 details and summary e...

    Details

  • Colour Picker

    Use this plug-in on a normal <select>-element filled with colours to turn it in to a colour-picker widget that allows users to view all the colours in...

    Details

More Plug-ins

Recent Comments

  1. Andreas on "SleekPHP User Handling"

    Thank you for showing interest :) Were the docs en...

  2. ciptard on "SleekPHP User Handling"

    Ok, thank you

  3. Andreas on "SleekPHP User Handling"

    I might write a "getting started" article for Slee...

Page cached. Loaded in: 0.0074 second(s).
Last DB change: 2012-02-04 08:04:40
Last file change: 2011-10-03 07:42:35
Cache created: 2012-02-04 13:12:14