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

  • Form Hints

    Using this plug-in you can add a descriptive hint to any form-control you may have on your site.
    Add a hint by giving the form-control a title-attri...

    Details

  • Pixastic Editor

    This app/plug-in inserts a (completely stylable) toolbar next to any image in your document that allows the user to apply different Pixastic-effects ...

    Details

  • Equal Height

    This plug-in makes HTML-elements equal height by adjusting their min-height CSS properties. Of course IE6 has no clue what min-height means so the plu...

    Details

More Plug-ins

Recent Comments

  1. AL on "Accessible, Stylish Modal Windows With Modern CSS"

    @Matt - What exactly isn't working? "Not working" ...

  2. roboteich on "Accessible, Stylish Modal Windows With Modern CSS"

    This is hardly accessible. Screen reader focus is...

  3. Matt on "Accessible, Stylish Modal Windows With Modern CSS"

    I have tried to implement this, but for some reaso...

Page cached. Loaded in: 0.0078 second(s).
Last DB change: 2010-09-03 17:14:49
Last file change: 2010-08-12 15:31:16
Cache created: 2010-09-08 03:41:36