xoops forums

Runeher

Module Developer
Posted on: 2010/7/17 19:16
Runeher
Runeher (Show more)
Module Developer
Posts: 823
Since: 2008/1/24
#21

Re: New javascript-based captcha for XOOPS

Just replace the captcha folder in core/class with the one in this dl... :)

oswaldo

Not too shy to talk
Posted on: 2010/7/17 19:50
oswaldo
oswaldo (Show more)
Not too shy to talk
Posts: 184
Since: 2008/8/22
#22

Re: New javascript-based captcha for XOOPS

Thanks Runeher

I replaced the captcha folder in core/class, and when I go to the register page it´s show noting.

What I´m doing wrong? I test in xoops 2.44 and 2.45

Runeher

Module Developer
Posted on: 2010/7/17 21:06
Runeher
Runeher (Show more)
Module Developer
Posts: 823
Since: 2008/1/24
#23

Re: New javascript-based captcha for XOOPS

As Frankblack said in the first post: "1. jquery.js must be included in theme", so try adding to your theme (between <head></head>):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

oswaldo

Not too shy to talk
Posted on: 2010/7/18 0:32
oswaldo
oswaldo (Show more)
Not too shy to talk
Posts: 184
Since: 2008/8/22
#24

Re: New javascript-based captcha for XOOPS

Thanks

Sorry I´m dumb

frankblack

Just can't stay away
Posted on: 2010/7/30 6:29
frankblack
frankblack (Show more)
Just can't stay away
Posts: 830
Since: 2005/6/13
#25

Re: New javascript-based captcha for XOOPS

Here is a nice gimmick for the captcha: if the captcha is solved correctly ONLY THEN the submit button will appear.

Example code for a module:
$form_output->addElement(new XoopsFormButton('''submitme'$form->getVar('form_submit_text'), 'submit'));


Example code for the style.css:
#submitme { display: none; }


New code for jquery.sexy-captcha-0.1.js (hope the textsanitizer is not breaking everything):
/*
 * Sexy Captcha v.0.2
 * Designed and developed by: BWM Media (bwmmedia.com)
 */
(function($) {
    $.
fn.sexyCaptcha = function(url) {
        
this.each(function() {
            $(
this).load(url, { action'refresh' }, function() {
                $(
'.draggable').draggable({ containment'parent'snap'.target'snapMode'inner'snapTolerance35revert'invalid'opacity0.75});
                $(
'.target').droppable({ accept'.draggable'tolerance'intersect' });
    
                
//On drop of draggable object
                
$('.target').bind('drop', function(eventui) {
                    $(
'#captchaWrapper').find('.captchaAnswer').val($(ui.draggable).attr('id'));
                    $(
'#captchaWrapper').find('.draggable').draggable('disable');
                    $(
'#captchaWrapper').find('.draggable').unbind('click');
                    $(
'#captchaWrapper').find('.targetWrapper').children('.target').hide();
    
                    
//Check captcha answer
                    
$.post(url, { action'verify'captcha: $(ui.draggable).attr('id') }, function(data) {
                        if (
data.status == "success") {
                            $(
'#captchaWrapper').find('.targetWrapper').addClass('captchaSuccess').hide().fadeIn('slow');
                            
document.getElementById('submitme').style.display 'block';
                        } else {
                            $(
'#captchaWrapper').find('.targetWrapper').addClass('captchaFail').hide().fadeIn('slow');
                            
document.getElementById('submitme').style.display 'none';
                        }
                    }, 
'json');
                });
                
                
//On double-click of object
                
$('.draggable').bind('click', function(eventui) {
                    $(
'#captchaWrapper').find('.captchaAnswer').val($(this).attr('id'));
                    $(
'#captchaWrapper').find('.draggable').draggable('disable');
                    $(
'#captchaWrapper').find('.draggable').unbind('click');
                    $(
'#captchaWrapper').find('.targetWrapper').children('.target').hide();
                    $(
this).removeClass('draggable');
                    $(
this).addClass('target');
                    $(
'#captchaWrapper').find('.targetWrapper').html($(this));
                    
//$(this).hide();
    
                    //Check captcha answer
                    
$.post(url, { action'verify'captcha: $(this).attr('id') }, function(data) {
                        if (
data.status == "success") {
                            $(
'#captchaWrapper').find('.targetWrapper').addClass('captchaSuccess').hide().fadeIn('slow');
                            
document.getElementById('submitme').style.display 'block';
                        } else {
                            $(
'#captchaWrapper').find('.targetWrapper').addClass('captchaFail').hide().fadeIn('slow');
                            
document.getElementById('submitme').style.display 'none';
                        }
                    }, 
'json');
                });
                
                
//Redraw captcha
                
$('.captchaRefresh').click(function() {
                    $(
'#captchaWrapper').sexyCaptcha(url);
                    
                    return 
false;
                });
            });
        });

        return 
this;
    };
})(
jQuery);


I mean, this captcha relies on javascript, so we can use another peace of javascript to hide the submit button. Enjoy.

Edit: in this case all submit buttons that have to be hidden, must have an id called submitme. To use the example you have to modify the modules a bit.