FlowupLabels.js - A tiny jQuery plugin for the floating label UI pattern

https://github.com/ENFOS/FlowupLabels.js

by TheSisb2 • 13 years ago

41 15 13 years ago

github.com

jreed91• 13 years ago

Has anyone done any A&B testing about whether this is more effective than normal forms?

yeukhon• 13 years ago

Might be useful if we address color-blindness issue too.

mcmillion• 13 years ago

Fairly janky on mobile, even on a 5s. It's still an interesting concept, though.

leetrout2• 13 years ago

Really fast on Nokia 920

Varcht• 13 years ago

I had the exact same thought, runs smooth on my 920 too.

TheSisb23• 13 years ago

I hadn't tested it on mobile (I also have an iphone). I should have a decent enough fix for it soon enough. The current implementation uses absolute positioning and a CSS transition rule. It would probably need some CSS transforms (translate3d perhaps?) to be fluid on iOS. I'll look into it.

bringking2• 13 years ago

I still like this CSS implementation better, rather than a whole jQuery plugin. Works great on mobile as well.

http://jsbin.com/OTaYIFE/2/

bringking2• 13 years ago

Sorry don't mean to negative, each implementation has it's own merits and times when it would be appropriate to use. Good job on building and sharing OP.

TheSisb23• 13 years ago

No offense taken by your original comment. The fluidity of that JSbin on mobile is much better compared to mine. However, your version doesn't seem to work at all on IE8 or IE9. Also I feel like there's a lot of weight given to the words "jQuery plugin" that makes it feel like unnecessary bloat, but a good plugin is actually quite small (this is <300bytes gzipped+minified) and has a very small footprint if your combining all your scripts anyways. Maybe there's a way to incorporate the best of both worlds? I'll look into it, but a pull request is always welcome :)

Gigablah• 13 years ago

It's nice but all your inputs need to have the "required" attribute, so now you can't have optional fields.

leetrout2• 13 years ago

As a primarily Python dev (read: PEP-8 fan) who writes CoffeeScript as much as possible and wraps CS at ~100 cols, at what point is the ternary operator used on Line 22[1] actually readable and useful as a shortcut?

Honest question, because I see lots of people use the ternary operator to shortcut writing out a complete if statement but when the lines get that long I never do. Even on my 27" screen I use a tiling WM and Sublime cuts off at 120 cols and that line is >200.

[1] https://github.com/ENFOS/FlowupLabels.js/blob/master/src/jqu...

taspeotis• 13 years ago

Yeah ReSharper would be all over that if it was C#:

    $this.val().length
        ? $this.parent().addClass(settings.class_populated).removeClass(settings.class_focused)
        : $this.parent().removeClass(settings.class_populated + ' ' + settings.class_focused);

ryanthejuggler• 13 years ago

I think it's very readable; I read it in my head like a dialogue where you're trying to quickly confirm something with someone.

Lunch? Ok, we'll go to Chipotle. No? Ok, we'll stay here and work. (the colon becomes the "no?")

After years of JavaScript the little voices in my head have at least become useful.

missing_cipher• 13 years ago

Seems like he improved readability just now. :)

https://github.com/ENFOS/FlowupLabels.js/commit/eac25eda2534...

TheSisb23• 13 years ago

That's a valid point. My train of thought was probably something like: "This is a pretty simple plugin, I can get away with this" mixed in with simply not knowing how long that line was going to be when I started writing it that way. I've just updated the code to be more legible. I completely agree with your observation.

FlowupLabels.js - A tiny jQuery plugin for the floating label UI pattern

Related Stories