Click & Hold to Confirm

[usernumberone]

Hey Everyone,

First time poster here. Not sure if this is the correct forum maybe I should be posting in a Javascript forum. Please do let me know.

I haven't done any front end development in some time, I am more in the strategy side of things now but I have question about the capabilities of HTML5, AJAX and was wondering if anyone is willing to answer them and if possible work on it with me.

I have been thinking about a Click & Hold to confirm system for web forms and applications. There is more information at my blog post found here.

There is a flash prototype of the button I created. Take a look so you know what I am talking about.


Couple of questions:

1. Is this something HTML5 or AJAX is even capable of? I suspect the use of Javascript to create a timer and capture the state of the button, mousedown, mouserelease?

2. The animation would need to go in reverse and forward I suspect is possible with Javascript as well?


What are you thoughts on this system? What issues and benefits do you see?


If anyone is interested creating a prototype in HTML5/AJAX. I am willing to paypal some funds. I don't plan to use it in production on any website. Just present it on my blog as something that is possible in with HTML5 or AJAX.

[JAB Creations]

onclick is a JavaScript event, counting how long the mouse button is active is also a JavaScript event. This has nothing to do with HTML as far as I can see.

[zcorpan]

You'd listen for mousedown and mouseup and to make a nice animation you would probably use setInterval to increase the confirmation bar, and decrease it again on mouseup. However for device independence you'd also need to make it focusable (with tabindex=0) and listen for keydown and keyup (maybe space or enter?) or have an alternative way altogether to confirm.

So yeah, it's certainly possible.

[usernumberone]

Thanks for posting!

Yes, I thought it would rely heavily on Javascript but I also thought there may be some new feature inn HTML5 and/or CSS3 that could help with the requests or animation.

I would still like to make a working prototype of this, please do let me know if anyone is interested helping. I could paypal some funds for the work.

Thanks!

[JAB Creations]

I don't know about setInterval as I've never gotten it to work, setTimeout would probably do the trick. I'd set a global variable and have the onclick and onmouseup events change the global variable's number to 0 or 1. If after the setTimeout for say five seconds occurs and the global variable is set to 1 (as in there was no onmouseup event so the button is still being held) then trigger the event such as a function. That's how I would approach it conceptually.