 |
|
| |
|
| |
|
| |
|
|
|
| Ajax fancy Captcha with JQuery and PHP
|
| |
|
|
Majalah Patani |
|
|
13 Comments | 2054 Hits |
|
Tags:
Ajax, Jquery, plugin, php, captcha |
| |
|
WHAT IS IT? Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from boys and spammers. We are introducing you to a new, intuitive way of completing "verify humanity" tasks. In order to do that you are asked to drag and drop specified item into a circle.
Captcha's security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted "guests". Basic design and its elements are easy to change and customize (take a look at file structure for more information).
If you have any ideas, comment or just want to say hello, please do - any feedback will be greatly appreciated. FILE STRUCTURE -captcha
–imgs in this folder you can find all images related to design, psd file is also included.
–captcha.css
–jquery.captcha.js
–captcha.php
–iepngfix.htc
-latest-jquery
-latest-jquery-ui
-example.html
-readme.txt HOW IT WORKS It calls captcha.php file and gets a random number. Php file just generates simple number and put it in session. When AJAX got that number it creates items based on that number. Lets imagine that we have array of "pencil", "scissors", "clock", "heart", "note", so if number 3 is returned it will take "heart" and look for item-heart.png file in /imgs directory. HOW TO INSTALL 1. As usual, copy /captcha folder somewhere in your hosting.
2. If you don't have latest jquery and jquery.ui integrated already, copy these two folders.
3. Edit page where you want to put captcha and insert: <!-- Begin of captcha -->
<div class="ajax-fc-container"></div>
<!-- End of captcha --> Put this in header of your page
1. <script type="text/javascript" charset="utf-8">
2. var borderColor = ""; /* border color hex or left it null if you don't want to change border color*/
3. var captchaDir = "/captcha" /* path to captcha files */
4. var url = captchaDir + "/captcha.php" /* this is name of form action */
5. var formId = "myForm" /* id of your form */
6. var items = Array("pencil", "scissors", "clock", "heart", "note");
7.
8. $(function() {
9. $(".ajax-fc-container").captcha();
10. });
11. </script> 4. Take a look at variable captchaDir in previous JavaScript code and change captchaDir to contain full path of your domain subfolders, for example - if your captcha is located at www.example.com/mydata/captcha and you want to put it on some other page, let's say www.example.com/blog/category, all you have to do is to change captchaDir to "/mydata/captcha". 5. Variable formId should be id of your form which needs to be submitted and verified by captcha. If you don't have id on your form please add it and make it the same as formId. DEPENDENCIES ui.core.js ui.draggable.js ui.droppable.js DOWNLOAD Click here to download source code! (433kb). |
|
|
|
|
|
|
|
| |
|
| |
|
Shalini |
Friday, May 8, 2009 @ 12:02 AM |
|
| |
|
I tried the script, but see a weird behavior. I get the images in the array.. though the image that should be dragged does not appear. Instead the default image of item-none(the book) appears. Can you please help?The script is surely impressive and a visual treat. |
| |
|
|
Vladimir |
Saturday, May 9, 2009 @ 10:23 AM |
|
| |
|
Hi Shalini,if all of items are books, something is wrong with path to imgs/ folder. Do you see five different pictures on captcha ? If you didn’t find the answer please post address to your website where you want to put captcha so we can check what’s wrong … |
| |
|
|
Gis |
Saturday, May 9, 2009 @ 11:24 AM |
|
| |
|
Hi,nice Script but I recommend to use quotes in PHP arrays to avoid PHP Error Notices |
| |
|
|
|
| |
|
cool idea. too bad from an accessibility point of view it’s a total fail, not to mention the users with no JS support |
| |
|
|
gerard |
Saturday, May 9, 2009 @ 02:11 PM |
|
| |
|
It’s great!I think that could be better adding de drag property to all elements and assign de same cursor, but it’s really cool! |
| |
|
|
|
| |
|
It’s nice, much better than read “stranges” captcha. But, I found a problem with this one… If the person were blind? |
| |
|
|
Jason |
Sunday, May 10, 2009 @ 08:32 AM |
|
| |
|
Great idea. Works great on a limited range of user agents. But I just tested on the iPhone and it doesn’t work.If someone could make this accessible and interoperable it would be much much better. |
| |
|
|
Kyle |
Sunday, May 10, 2009 @ 09:28 AM |
|
| |
|
Conceptually I think it is a GREAT idea. It looks good and it’s easy to use. The only down fall is what others have already mentioned. If JS is turned off, the form is unusable. There needs to be some type of old school server side fall back CAPTCHA that will take it’s place.It’s definitely an awesome start, but I am really looking forward to seeing the next phase or version of it! |
| |
|
|
qwe |
Tuesday, June 2, 2009 @ 12:47 AM |
|
| |
|
weqwe |
| |
|
|
sss |
Tuesday, June 2, 2009 @ 09:29 PM |
|
| |
|
sassdsdsd |
| |
|
|
Rakshit |
Tuesday, June 9, 2009 @ 05:57 AM |
|
| |
|
Hello Shalini,i am urs. i am with you. i am also facing same problem. but nobody is giving the answer. and everybody are busy to say nice script. good idea. Please if you have found any solution than please help me. |
| |
|
|
-X4- |
Thursday, July 2, 2009 @ 09:35 AM |
|
| |
|
did you develop it yourself or are you stealing code?you linked the download to webdesignbeach.com, but you're definately on exploremyblog.com! |
| |
|
|
|
| |
|
Great idea. Works great on a limited range of user agents. But I just tested on the iPhone and it doesn’t work.If someone could make this accessible and interoperable it would be much much better. |
| |
|
|
| |
|
| |
|
|
|
|
|
|
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
Blog
Community |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
Popular Posts |
| |
|
| |
|
| |
|
| |
|
| |
ExploreMyBlog Poll |
| |
|
| |
|
| |
|
| |
Blog Categories |
| |
|
| |
|
| |
|
| |
|
| |
|
|
|
|
![[ Stumble Upon ]](../assets/images/stubmleupon_bookmarking_icon.gif){kind=icon}
![[ Facebook ]](../assets/images/facebook_bookmarking_icon.gif){kind=icon}
![[ del.icio.us ]](../assets/images/delicious_bookmarking_icon.gif){kind=icon}
![[ furl ]](../assets/images/furl_bookmarking_icon.gif){kind=icon}
![[Sphinn]](../assets/images/sphinn_bookmarking_icon.gif){kind=icon}
![[ Digg ]](../assets/images/digg_bookmarking_icon.gif){kind=icon}
![[ Twitter ]](../assets/images/twitter_bookmarking_icon.gif){kind=icon}
![[ Technorati ]](../assets/images/technorati_bookmarking_icon.gif){kind=icon}
![[ Reddit ]](../assets/images/reddit_bookmarking_icon.gif){kind=icon}
![[ Subscribe To RSS Feeds ]](../assets/images/rss_feeds.gif){kind=small}
