1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Slide to Login for Websites ~ The new CAPTCHA system

Discussion in 'JavaScript and AJAX' started by ManzZup, Oct 13, 2012.

  1. ManzZup

    ManzZup New Member

    Joined:
    May 9, 2009
    Messages:
    278
    Likes Received:
    43
    Trophy Points:
    0
    Occupation:
    Production Manager:Software @ ZONTEK
    Location:
    Sri Lanka
    Home Page:
    Hey guys,

    Its for a quick post becuase im still working on this Jquery plugin. YES, as the name says it is the *new* system for the reckless captcha, the Slide to Login. Basically it implements the popular ideas of Slide to Unlock in Smartphones, it will replace both the Login Button + the captcha verification to just one little Slide in effort.

    [​IMG]

    How anti-spam mechanism works?



    It rely on the simple mechanism of the mouse. That is if one is to slide this to the end, the mouse should be reported to be at the end of the slide. That is the anti spam mechanism check whether the mouse was in the required position when the form submit was called. It may have security holes but for now it seems okay.

    How to use?



    1) First download the necessary files and keep them in the directory.
    2) Now in your HTML code add the following references (in the head tag)

    Code:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
    <link href="slidetl.css" rel="stylesheet" type="text/css" />
    
    3) Make your form elements and name the form as "form1". (You can use any name but for the example lets keep it as form1)

    4) At the bottom of the form add the following to insert the slider
    Code:
    <div id="slidetl">
            <div id="slider"></div>
    </div>
    
    5) Add the link to the custom JS file after that ONLY
    Code:
    <script type="text/javascript" src="slidetl.js"></script>
    
    Finally the code would be
    Code:
    <html>
    <head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
    <link href="slidetl.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
           
    <form id="form1" action="index.php" method="post">
    Username : <input type="text" value="admin" name="user" /><br />
    Password :  <input type="password" value="admin" name="user" />
    <br /><br />
    <div id="slidetl">
            <div id="slider"></div>
    </div>
    <script type="text/javascript" src="slidetl.js"></script>
    </form>
    </body>
    </html>
    
    6) Open the slidertl.js and change the first 3 variable values as necessary
    Code:
    var slider = $("#slider"); //the id of the sliding element
    var container = $("#slidetl"); //the id of the slider
    var form = $("#form1"); //id of the form to be submitted
    
    YEhAAA the Slide is READY TO GO :)

    Still under high development but working for now. Documentation on the way, but need your ideas on bugs, improvements and SPECIALLY the security wise problems with the plugin. Please spread the word, its OPEN :)

    Demo: http://zontek.zzl.org/demo/slide
    Download: http://zontek.zzl.org/files/slidetl.zip

    Cyah with some new skins :D
     
  2. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,287
    Likes Received:
    364
    Trophy Points:
    83
    So this takes out the scenario of enter details and hit enter to login.
     
  3. ManzZup

    ManzZup New Member

    Joined:
    May 9, 2009
    Messages:
    278
    Likes Received:
    43
    Trophy Points:
    0
    Occupation:
    Production Manager:Software @ ZONTEK
    Location:
    Sri Lanka
    Home Page:
    yup basically cutting out the reading of the captcha and pressing the login :)
     
  4. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,287
    Likes Received:
    364
    Trophy Points:
    83
    No Invisible Captcha is better option but again it assumes lot of things from spammers.
     
  5. ManzZup

    ManzZup New Member

    Joined:
    May 9, 2009
    Messages:
    278
    Likes Received:
    43
    Trophy Points:
    0
    Occupation:
    Production Manager:Software @ ZONTEK
    Location:
    Sri Lanka
    Home Page:
    hmm may be a combination would be better
    might check on it
     
  6. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,287
    Likes Received:
    364
    Trophy Points:
    83
    Yes. That would be deadly.
     
  7. ManzZup

    ManzZup New Member

    Joined:
    May 9, 2009
    Messages:
    278
    Likes Received:
    43
    Trophy Points:
    0
    Occupation:
    Production Manager:Software @ ZONTEK
    Location:
    Sri Lanka
    Home Page:

Share This Page