6 ms·
FlowupLabels.js - A tiny jQuery plugin for the floating label UI pattern
- jreed91 13y agoHas anyone done any A&B testing about whether this is more effective than normal forms?
- yeukhon 13y agoMight be useful if we address color-blindness issue too.
- deleted 13y ago[deleted]
- mcmillion 13y agoFairly janky on mobile, even on a 5s. It's still an interesting concept, though.
- leetrout 13y agoReally fast on Nokia 920
- Varcht 13y agoI had the exact same thought, runs smooth on my 920 too.
- TheSisb2 13y agoI 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.
- bringking 13y agoI still like this CSS implementation better, rather than a whole jQuery plugin. Works great on mobile as well. http://jsbin.com/OTaYIFE/2/ http://jsbin.com/OTaYIFE/2/
- bringking 13y agoSorry 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.
- TheSisb2 13y agoNo 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 13y agoIt's nice but all your inputs need to have the "required" attribute, so now you can't have optional fields.
- leetrout 13y agoAs 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/jquery.FlowupLabels.js#L22 https://github.com/ENFOS/FlowupLabels.js/blob/master/src/jqu...
- taspeotis 13y agoYeah 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 13y agoI 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 13y agoSeems like he improved readability just now. :) https://github.com/ENFOS/FlowupLabels.js/commit/eac25eda25346df487c3c79f3b22ebe1a440b73c https://github.com/ENFOS/FlowupLabels.js/commit/eac25eda2534...
- TheSisb2 13y agoThat'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.
- deleted 13y ago[deleted]