FlowupLabels.js - A tiny jQuery plugin for the floating label UI pattern | Hacker News Reader

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

github.com

41 pointsTheSisb215 comments

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

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.

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 :)

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

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...

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);

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.

Seems like he improved readability just now. :)

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

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.

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

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

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

Really fast on Nokia 920

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

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.

Reply on news.ycombinator.com