JQuery Super Labels Plugin(github.com)

31 pointsby remybachvor 14 Jahren16 comments

https://github.com/remybach/jQuery.superLabels

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.

17 comments

phzbOxvor 14 Jahren

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

remybachvor 14 Jahren

There's an option to do that:

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

5hvor 14 Jahren

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

remybachvor 14 Jahren

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.

remybachvor 14 Jahren

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

flixicvor 14 Jahren

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

Skalmanvor 14 Jahren

Only in Chrome. Not in Firefox, at least.

remybachvor 14 Jahren

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

jonkneevor 14 Jahren

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.

Keithamusvor 14 Jahren

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

btuckervor 14 Jahren

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

remybachvor 14 Jahren

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.

egzevor 14 Jahren

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

remybachvor 14 Jahren

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

david_a_r_kempvor 14 Jahren

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.

remybachvor 14 Jahren

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

lenkitevor 14 Jahren