JavaScript iPhone Lock Slider with jQuery

I was thinking the other day about the amount of form spam that most web sites get (and again just now as I moderated a ton of blog comments), and I was reminded of a proof of concept I saw a while back. It required the user to utilize drag and drop functionality to submit a form, thus verifying human interaction. Then I thought of the iPhone’s unlock function and how it would make a cool CAPTCHA.

I’ve written a handy JavaScript class for including these types of sliders into a web site- stick around after the break for more details and cool configuration options.


The basic use consists of creating a new Slider object, passing to the constructor a container id – the id of the element to render the slider to, and an optional config object which can set various properties of the slider. Right now the supported options are: handler, color, message, mode and waver. The handler parameter allows me to set an event handler to call some JS function when the slide is completed- this could be anything from submitting a form to opening the non-iPhone version of your site ;)


var s2 = new Slider("slider2",{
 message: "turn off the lights!",
 color: "red",
 handler: function(){
  $("body").css("backgroundColor", "black");
 }
});
s2.init();

The third demo is using mode = “noclick”, which means that you don’t have to click on the slide handle in order to activate it. I suppose this is truer to the iPhone experience, unfortunately as of right now this one is still slightly buggy. The waver config option can be set in noclick mode to determine how far out of the track the cursor can waver, default is 75px.


var s3 = new Slider("slider3",{
 message: "no click required!",
 color: "green",
 mode: "noclick",
 handler: function(){ $("body").css("backgroundColor", "white"); }
});
s3.init();

Well, that’s about it – I will add the disclaimer that this code has been tested very little, only in Firefox 2, Webkit and IE7. Also slightly ironic is the fact that this code won’t work on Safari for iPhone, as it doesn’t support enough mouse events.

Feel free to use this code how you see fit as long as you maintain a link to this site.


$(function(){
var s2 = new Slider("slider2",{
message: "turn off the lights!",
color: "red",
handler: function(){ $("body").css("backgroundColor", "black"); }
});
s2.init();
var s3 = new Slider("slider3",{
message: "no click required!",
color: "green",
mode: "noclick",
handler: function(){ $("body").css("backgroundColor", "white"); }
});
s3.init();
});

Here are the files you will need:
- slider.js
- slider.css
- 4 .png images (in .zip file)

In addition, you will need to include jQuery, which can be downloaded in various formats. I used jQuery 1.2.3, which is already out of date, but I suspect this will work with a very wide range of jQuery versions.

Update (5/9/2010): Thanks to Brian K. for retouching the slider images — the transparency around the edges is very much improved. I have updated the sample and the zip file with the corrected images. I also added -moz-user-select and -webkit-user-select CSS properties to the stylesheet to prevent selecting the slider text when using the slider in these browsers.

54 Responses to “JavaScript iPhone Lock Slider with jQuery”

  1. Añade un Captcha maquero a tus aplicaciones web | aNieto2K Says:

    [...] Boone ha desarrollado Slider, una versión de este sistema en Javascript usando jQuery. La verdad es que está muy conseguido y el resultado es bastante sorprendente, solo nos falta [...]

  2. Olivier Garcia - Yet Another Linux Nerd » Blog Archive » Quick tips Says:

    [...] a note about web security I recently saw iphone-like slider that could be used as a captcha [...]

  3. Desktop-tweaks: iPhone Lock Slider en Google Reader in Firefox » Nieuws » iPhoneclub.nl Says:

    [...] te klikken en een schuifknop om de achtergrondkleur van de website te wijzigen. Meer info is op de weblog van Alex Boone zelf te [...]

  4. Fubiz Says:

    Excellent idea !

  5. Arjan Says:

    Cool application! Too bad it doesn’t work in IE7. Keep up the good work. Certainly beats the helle out of typing those deformed letters you come across on forums.

  6. LJ Says:

    Hi,

    Just here to drop you a line of credit! Great idea, nicely done!
    I think i’ll be using this as captcha for future forms. (with proper credits ofc)

    Grts,
    LJ

  7. Erik Says:

    Hey!

    Beautifull! Really a good job!

    If i want to test it, which files do i need? Slider.js and the CSS file?

    Greetings,
    Erik

  8. Alex Says:

    @Arjan – It actually should work in IE now, I have tested in 6 and 7. I originally was using clientWidth to detect the width of the slide track and changed to a cross-browser offsetWidth

  9. Diseño: ¿Un mejor sistema de CAPTCHA? - ALT1040 Says:

    [...] Boone propone una solución bastante curiosa para un CAPTCHA mucho menos molesto a los usuarios y más [...]

  10. Dany Says:

    Beautifull!

  11. meneame.net Says:

    Un captcha al estilo iphone…

    [c&p] Actualmente los captchas son un problema para los usuarios de Internet y aunque cada vez es más normal ver este sistema como control de SPAM de nuestras aplicaciones, cada vez hay más problemas con ellos. Quizas la solución a nuestros prob…

  12. Todo Apple » Blog Archive » CAPTCHA al estilo ‘unlock iPhone’ Says:

    [...] Site Aboone.com [...]

  13. Jato Says:

    The problems is that exists software that can simulate the human interaction.

  14. aboone Says:

    This is definitely a very rudimentary CAPTCHA, it would be very easy to get around. It’s certainly more of a novelty than anything else.

  15. drk Says:

    It wont work.
    The spammers will simply extract the necesary “action” that your form requires and send it (forged).

    A captcha needs proof that a human is on the other side of the form, returning a meaningfull answer.

    You just substituted a static button with a pretty sliding one.

  16. Facundo Mora Says:

    It works on Safari 3.1.1 for Windows. Test passed!

  17. Captcha al estilo ‘unlock’ del iPhone « Tecnologia General en Español: Informacion de lo ultimo en Tecnologia Says:

    [...] Enlace: JavaScript iPhone Lock Slider with jQuery | Vía: TodoApple [...]

  18. Witer.com » Blog Archive » Los captcha de RapidShare Says:

    [...] El otro día veía en Anieto2k la referencia a un nuevo diseño con un sistema mucho mas intuitivo y relacionado con el mundo maquero, útil y eficaz, cumple perfectamente con el objetivo deseado, recomendado verlo aquí. [...]

  19. AOWS » Captcha al estilo iPhone Says:

    [...] pero su interfaz está sirviendo como inspiración para muchos. Un ejemplo claro lo tenemos en este deslizador en JavaScript, al igual que en el teléfono de Apple. ¿Qué utilidad puede tener? El autor lo propone como [...]

  20. Bitácora de Merlos.org » Blog Archive » Control JS Slider al estilo iPhone Says:

    [...] Alex Boone, se ha currado un control hecho en Javascript usando jQuery simula el desbloquear el iPhone. [...]

  21. Añade un Captcha maquero a tus aplicaciones web » Ricotero's Blog Says:

    [...] Boone ha desarrollado Slider, una versión de este sistema en Javascript usando jQuery. La verdad es que está muy conseguido y el resultado es bastante sorprendente, solo nos falta [...]

  22. Captcha inspirado en el iPhone - Guia Breve Says:

    [...] novedoso. Como se de un iPhone se tratase lo que tenemos que hacer es arrastrar una flecha. (Ejemplo) Publicado el Saturday, 14 de June del 2008 [...]

  23. Cosmin Says:

    tested in :

    Firefox 3 (latest) : works fine

    IE6 : doesn’t work and looks ugly too…

    nice method though, congrats!

  24. ABrad45 Says:

    This is a terrific idea, but a horrible CAPTCHA method. It requires Javascript which most bots will ignore (along with css).

    It makes a decent (at best) idea if you’re using it to actually submit the form, but then users without JavaScript or users of NoScript with the JS turned off for your site will be unable to submit your form.

    Lose/Lose on using this as a CAPTCHA but a great recreation anyway.

    Cheers.

  25. João Pedro Pereira Says:

    Awesome idea, I really loved this CAPTCHA method.

  26. medyum Says:

    Hey!

    Beautifull! Really a good job!

    If i want to test it, which files do i need? Slider.js and the CSS file?

  27. Vinny Says:

    I tried this to change the innerHTML of a div but it didn’t work.

    $(“termsMsg”).css(“innerHTML”, ‘I “DO” Agree To Terms And Conditions.’);

    I “DO NOT” Agree To Terms And Conditions.

    how would i do this….

  28. Ernesto Says:

    A todos los que les parece una gran idea lamento decirles que no tienen idea de que es una captcha…
    To all of you that think that this is a great idea, I’m afraid you have no idea what a captcha is…

  29. araç sorgulama Says:

    The spammers will simply extract the necesary “action” that your form requires and send it (forged).

    A captcha needs proof that a human is on the other side of the form, returning a meaningfull answer.

    You just substituted a static button with a pretty sliding one.

  30. Emilce Says:

    To me doesn`t work on IE :( , have any idea how ti make it works? works fine on FIREFOX and Chrome

  31. Luis Says:

    Excellent work!!!, I must say that you just achieve something very amazing. hope you don´t mind if I implement it at my site. Comments that aren’t very constructive are just Envy incarnate. Far as I can see with some basic work it will provide more security.

    Thanks for sharing this powerful tool.

  32. » Plugins auf Web-Newspaper web-newspaper Says:

    [...] Captcha Schutz für die Kommentarabgabe von aboone. [...]

  33. Aus der Mindfactory: Slide2Comment – anti spam the sexy way | Mindworker - Be2Do Says:

    [...] immer und immer wieder machen. Als ich dann über Webnewspaper den iPhone-artigen Slider von Aboone gefunden habe, musste ich mich sofort ans Werk machen. Nun ist die erste Version von meinem ersten [...]

  34. Brian Says:

    Awesome! But I did find one thing that was a bit annoying… the edges. They weren’t smooth enough for me so I fixed them. :) If you’d like a copy, email me and I’ll send them your way.

  35. Slide to Comment: The Newest and Sexiest Way to Fight WordPress Spam - WordPress MU and BuddyPress plugins, themes, support, tips and how to's Says:

    [...] In the never-ending battle against spam, WordPress plugin developers are constantly being challenged to create solutions that will block spam but still make it easy for genuine human users to comment and participate. A new tool is available for WordPress sites that provides a fun and intuitive captcha that is much simpler than requiring users to answer inane questions or decipher barely legible letters. Slide2Comment is my new favorite plugin and I haven’t seen it in use on very many sites yet. This anti-spam captcha utlizes an iPhone-like slider to prevent spam bots from accessing your comment form. Once the user slides the arrow, the comment form appears and the slider disappears. The plugin is based on a jQuery technique which you can read more about at arboone.com. [...]

  36. TheFrosty Says:

    That’s pretty cool
    idea!

  37. Jay Says:

    Hey do you mind if I use some of this content on http://www.basicwebdesign.co.cc in exchange for a link back to your site? Thanks

  38. aboone Says:

    Sure!

  39. jQuery slide to unlock · {rg} resultaatgenieters.nl Says:

    [...] more info@http://www.aboone.com/javascript-iphone-lock-slider-with-jquery [...]

  40. someone Says:

    Imho totally useless.
    if i was a spammer i would send the http-request that would have been sent on successful unlocking and would not bother to have a javascript implementation on my spambot.

    On the other hand, if you generate some kind of key when unlocking, and send the key with your form, would make the slider element itself useless, but would require spambots to have a javascript implementation.

    correct me i im wrong.

  41. Kristjan Says:

    Hi!

    We used similar slider CAPTCHA here: http://www.thebcard.com/kk12

  42. digitalxxl Says:

    testcomment to see the slider

  43. Fernando Says:

    Thank. Cool Application.

    I integrate it with the “jquery.validate” library to validate form.
    The code I used if anyone needs it:

    $(document).ready(function(){
    //jquery.validate
    var validator = $(“#formContact”);
    validator.validate();

    //slider
    $(‘input[type="submit"]‘).each(function(x,el){
    // Recipient
    $(el).before(”);

    //Slider
    new Slider(“slider_”+$(el).attr(“id”),{
    message: “Enviar”,
    color: “green”,
    handler: function(){

    if(validator.valid())
    $(el).click();
    }
    }).init();

    //hide input
    $(el).css(“display”, “none”);
    });

  44. Clair Strieter Says:

    Great article. There’s a lot of good data here, though I did want to let you know something – I am running Ubuntu with the latest beta of Firefox, and the layout of your blog is kind of flaky for me. I can understand the articles, but the navigation doesn’t function so great.

  45. Zac Says:

    I’m trying to create a webapp version of my site for iPhone and am wanting to implement something like this. Does anyone know a way to do something similar to this that works on iphone?

  46. Zac Says:

    Can you do this in JQTouch

  47. Parq Says:

    This still doesn’t work on IE7. Any idea how to fix it?

  48. Обороняемся от спама | Черная Свинья Says:

    [...] плагин объяснять не надо. Предлагаю посмотреть демо или [...]

  49. Peter Says:

    Love this slider! I just wish it could work with touchscreen devices.

    And just to refute all those who say it is totally useless, it marks all comments that don’t use the slider as spam. which means that although it may not decrease spam comments, it still filters them out. Hope that helps!

  50. anthem127 Says:

    Im noticing it doesnt work with Iphone :(

  51. Greg.Baker Says:

    I came across this post last week. I decided to come back to it and last night I hacked up a copy to work on my iphone. It is a hack for I did not clean up but rather minimally changed the original code to accommodate the touch events. Note that I have never used jQuery on a ‘real’ project; just messed around with it some. So a refactoring is in order.

    Here is that link: http://GypsyTrader.com/iPhoneLockSlider.html

    You will also need jQuery and the original linked images from the post above.

    Enjoy,

    gsb

  52. SU ARITMA Says:

    SU ARITMA…

    [...]aboone.com » Blog Archive » JavaScript iPhone Lock Slider with jQuery[...]…

  53. nieng rang Says:

    nieng rang…

    [...]aboone.com » Blog Archive » JavaScript iPhone Lock Slider with jQuery[...]…

  54. Informasi Online Perkumpulan Masyarakat Jawa Keluyuran di Sumatera Says:

    Informasi Online Perkumpulan Masyarakat Jawa Keluyuran di Sumatera…

    [...]aboone.com » Blog Archive » JavaScript iPhone Lock Slider with jQuery[...]…

Leave a Reply