Menu icon Foundation
F5LCB, Foundation 5 Jquery Plugin

Hey there,

It's my first actual post on this forum though some of you may already know me.
I just wanted to share with you a little something I made today for a project. It's incomplete and will be improved in the days to come, but I felt like sharing :)

Its name ? F5LCB aka Foundation 5 Long Click Buttons !
Impressive eh ?

What does it do ? How does it work ?
Well, you can check all of this on Github : https://github.com/Lynesth/F5LCB

And here is a demonstration codepen : http://codepen.io/Lynesth/full/acokd/

I hope some of you like it, and if you feel like helping or if you're stuck using it, just ask here or on github ;)

Kind regards to everyone,

Lyn.

F5LCBjqueryFoundation 5buttonpluginbuttonsplugins

Hey there,

It's my first actual post on this forum though some of you may already know me.
I just wanted to share with you a little something I made today for a project. It's incomplete and will be improved in the days to come, but I felt like sharing :)

Its name ? F5LCB aka Foundation 5 Long Click Buttons !
Impressive eh ?

What does it do ? How does it work ?
Well, you can check all of this on Github : https://github.com/Lynesth/F5LCB

And here is a demonstration codepen : http://codepen.io/Lynesth/full/acokd/

I hope some of you like it, and if you feel like helping or if you're stuck using it, just ask here or on github ;)

Kind regards to everyone,

Lyn.

Mario Praga over 5 years ago

Hi Lyn .... In few words .. Awesome ! :-)

I have a curiousity, in your project what that was used for ?

Lyn over 5 years ago

Hey there Mario,

Thanks for the feedback !
There's a few things to add (like using the href if no callback function is set) but I'm glad you like it :)

In the project I worked on, it was used on some AJAX "Delete" buttons, in order not to have a confirmation window everytime you click on one of those, but to avoid unwanted clicks.

Regards,

Lyn.

Lyn over 5 years ago

Hey there,

Added support for different button sizes in order to take the same space.
Added support for href use if no callback provided.
Fixed a few things.

New jsfiddle in the OP.

Regards,

Lyn.

Lyn over 5 years ago

Hey there,

Added new functionnality, haven't take care of the CSS based of button's classes yet (for the colors at least), will do shortly.

New jshiddle in the OP.

Regards,

Lyn.

Lyn over 5 years ago

Now with support for those classes (automatically getting those from the button) :

"secondary", "alert", "success", "radius" and "round" !
Codepen provided in first post.

I know I'm talking to myself here but I don't care :p

I wish you all a great end-of-week-end !

Lyn.

Juanjo over 5 years ago

Pretty nice. Thank you very much and don't worry about speaking to yourself.

I'm already thinking about where I'm going to use it.

Lyn over 5 years ago

Hey there,

Thank you Juanjo about your comment !

I modified the callback function to have access to the button and progress bar objects.
Last important thing will be the disabled state.

I noticed that the plugin doesn't work with a elements, I may take a look later.

Lyn.

Karl Ward over 5 years ago

Nice work @Lyn ... I couldn't immediately figure out how to put it to good use, but well crafted regardless. They could perhaps be integrated in an anti-spam scheme for form submits also ...

Lyn over 5 years ago

Thank you Karl,

It could indeed be integrated in an anti-spam scheme, this is something I didn't think about !
As I said before I mainly use it to prevent confirmation windows and all when users are deleting important things with no way to get it back.

Lyn.

Lyn about 5 years ago

Hey there people,

Long time I haven't been on the forums, so I thought of saying "Hi" and let you know that I made a little update to this plugin by adding a tooltip on it to let users know how it works (more details on the github page, see OP).
It's still only using Foundation's CSS (didn't check on latest versions though), and I don't know when I'll have time to make a proper Foundation-less plugin (it just needs plain CSS with customizable classes but eh, if someone wants to do it, feel free to !)

Anyway, I may have more time to hang around here in a couple of weeks, so see you then !
I'm still open to help anyone I can, so if you need help, send me an email :)

Kind regards,

Lyn.

Chris M about 5 years ago

Hey Lyn,

These buttons are awesome, great job!

Bob Sawyer about 5 years ago

I can totally see this being useful for mobile apps by applying it to an image, so that pressing and holding allows you to save/download the image. Nice work!

Lyn about 5 years ago

Hello !

Just to let you guys know that I updated the demo page to reflect the additions :
http://codepen.io/Lynesth/full/acokd/

@Chris M : Thank you for your kind words !

@Bob Sawyer : Thanks to you too. Never thought of using it for this kind of work but I wonder... I think it needs testing before it can work on mobile because of the touch events and all.
I don'tc have any smartphone myself to try it out so if you can, tell me !

Kind regards,

Lyn.

Bob Sawyer about 5 years ago

Ahh... yep, tried it on my iPhone -- no go. Didn't consider the difference between touch events and click/hold from the desktop when I commented, but I'm guessing it's not that difficult to add touch events... (but then again, I've never tried doing that with anything, so what do I know? LOL)

Lyn about 5 years ago

Hey there Bob,

I've just updated it with really small fixes, but this should allow it to work on touch screens now.
Can you let me know if everything's right ? :)

Thank you again.

Regards,

Lyn.

Edit : You should add fastclick.js to your page as recommended by Foundation in order for it to work smoothly (I hope !).

Bob Sawyer about 5 years ago

That worked!! Nicely done!