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.
May 20th, 2008 at 1:12 am
[...] 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 [...]
May 20th, 2008 at 5:47 am
[...] a note about web security I recently saw iphone-like slider that could be used as a captcha [...]
May 20th, 2008 at 7:55 am
[...] te klikken en een schuifknop om de achtergrondkleur van de website te wijzigen. Meer info is op de weblog van Alex Boone zelf te [...]
May 20th, 2008 at 8:07 am
Excellent idea !
May 20th, 2008 at 9:09 am
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.
May 20th, 2008 at 10:49 am
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
May 20th, 2008 at 2:37 pm
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
May 21st, 2008 at 8:15 am
@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
May 22nd, 2008 at 6:09 am
[...] Boone propone una solución bastante curiosa para un CAPTCHA mucho menos molesto a los usuarios y más [...]
May 22nd, 2008 at 7:17 am
Beautifull!
May 22nd, 2008 at 8:12 am
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…
May 22nd, 2008 at 10:09 am
[...] Site Aboone.com [...]
May 22nd, 2008 at 10:28 am
The problems is that exists software that can simulate the human interaction.
May 23rd, 2008 at 11:14 am
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.
May 23rd, 2008 at 3:50 pm
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.
May 24th, 2008 at 5:27 am
It works on Safari 3.1.1 for Windows. Test passed!
May 24th, 2008 at 6:14 am
[...] Enlace: JavaScript iPhone Lock Slider with jQuery | Vía: TodoApple [...]
May 25th, 2008 at 3:01 pm
[...] 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í. [...]
May 27th, 2008 at 1:46 am
[...] 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 [...]
June 10th, 2008 at 5:30 am
[...] Alex Boone, se ha currado un control hecho en Javascript usando jQuery simula el desbloquear el iPhone. [...]
June 14th, 2008 at 11:02 am
[...] 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 [...]
June 14th, 2008 at 2:55 pm
[...] 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 [...]
October 10th, 2008 at 3:49 am
tested in :
Firefox 3 (latest) : works fine
IE6 : doesn’t work and looks ugly too…
nice method though, congrats!
November 10th, 2008 at 9:25 pm
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.
December 19th, 2008 at 12:07 pm
Awesome idea, I really loved this CAPTCHA method.
August 30th, 2009 at 11:11 am
Hey!
Beautifull! Really a good job!
If i want to test it, which files do i need? Slider.js and the CSS file?
September 19th, 2009 at 9:34 am
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….
September 29th, 2009 at 12:06 pm
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…
December 29th, 2009 at 3:56 am
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.
February 4th, 2010 at 8:44 am
To me doesn`t work on IE
, have any idea how ti make it works? works fine on FIREFOX and Chrome
March 5th, 2010 at 12:51 pm
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.
March 21st, 2010 at 10:40 am
[...] Captcha Schutz für die Kommentarabgabe von aboone. [...]
March 28th, 2010 at 1:49 am
[...] 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 [...]
April 11th, 2010 at 9:07 am
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.
April 13th, 2010 at 7:02 am
[...] 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. [...]
April 13th, 2010 at 8:38 am
That’s pretty cool
idea!
April 27th, 2010 at 11:23 pm
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
May 5th, 2010 at 5:21 am
Sure!
May 25th, 2010 at 2:27 am
[...] more info@http://www.aboone.com/javascript-iphone-lock-slider-with-jquery [...]
June 14th, 2010 at 1:54 pm
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.
July 26th, 2010 at 6:14 am
Hi!
We used similar slider CAPTCHA here: http://www.thebcard.com/kk12
August 3rd, 2010 at 2:45 am
testcomment to see the slider
October 31st, 2010 at 10:07 am
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”);
});
December 15th, 2010 at 7:40 am
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.
January 16th, 2011 at 1:59 am
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?
January 16th, 2011 at 2:25 am
Can you do this in JQTouch
May 9th, 2011 at 11:53 am
This still doesn’t work on IE7. Any idea how to fix it?
June 16th, 2011 at 4:03 am
[...] плагин объяснять не надо. Предлагаю посмотреть демо или [...]
June 21st, 2011 at 7:29 am
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!
July 2nd, 2011 at 7:18 am
Im noticing it doesnt work with Iphone
August 23rd, 2011 at 2:34 pm
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
October 29th, 2011 at 10:19 am
SU ARITMA…
[...]aboone.com » Blog Archive » JavaScript iPhone Lock Slider with jQuery[...]…
November 15th, 2011 at 12:11 am
nieng rang…
[...]aboone.com » Blog Archive » JavaScript iPhone Lock Slider with jQuery[...]…
December 22nd, 2011 at 12:18 pm
Informasi Online Perkumpulan Masyarakat Jawa Keluyuran di Sumatera…
[...]aboone.com » Blog Archive » JavaScript iPhone Lock Slider with jQuery[...]…