JQuery Super Labels Plugin

[remybach]

This plugin positions your labels on top of your form fields (similiar visually to placeholder) and makes the label slide across the field when gaining focus and fade out when a value is entered.

[phzbOx]

It's cute but too much distracting IMO. I prefer to have it fade a little bit on focus and disappear on writing.

[remybach]

There's an option to do that:

$('form').superLabels({ slide:false });

[5h]

Seems OTT to me,

I generally use normal boring labels, then modernizer to detect if the browser supports placeholders, if so hide the labels and add placeholders to the attributes

[remybach]

That's not what placeholders are meant to be used for though (see here: http://www.whatwg.org/specs/web-apps/current-work/multipage/...).

This plugin doesn't replace (true) placeholder functionality, so I suppose it's the same as what you're doing except more semantic.

[remybach]

Oh, also... once you're in the field, the placeholder disappears and you have no idea what you were meant to type (which is why the plugin slides to the side by default).

[flixic]

No. Placeholders stay visible until user starts typing. That is, empty focused field still has visible placeholder.

[Skalman]

Only in Chrome. Not in Firefox, at least.

[remybach]

True! It wasn't like this when I wrote the plugin though, plus I needed the effect to work cross-browser.

[jonknee]

FWIW, Safari and Chrome both keep placeholder text there like this plug-in does (without the animation). It'd be nice to get FireFox on board.

[Keithamus]

Yes, in -webkit- browsers you can achieve the same effect with this CSS:

        &::-webkit-input-placeholder {
            -webkit-transition: text-indent 200ms ease-in-out;
            visibility: visible !important;
        }

        &:focus::-webkit-input-placeholder {
            text-indent: 115px; /* Change to width of input */
        }

If only you could do the same for Firefox...

[btucker]

https://developer.mozilla.org/en/CSS/:-moz-placeholder

[remybach]

I had looked into doing this with pure CSS, but I hit a roadblock. I can't remember what it was, but it may have been the Firefox thing mentioned. Would be cool to add a css file that does the same to the project when the support is there though.

[egze]

Should probably use stop() before animating or else there's a funny effect if I click the fields back and forth really fast.

[remybach]

Hmmm... not quite a real-world scenario though. I like to consider it a quirky easter-egg :)

[david_a_r_kemp]

how do you get the labels back again? sometimes my browser or password manager fills in the wrong fields, and, once there's something in the fields, there's no labels.

[remybach]

Yeah, I've got an issue open on github for this. I'll fix it when I get the chance. Thanks :)