JQuery Super Labels Plugin

#1

Post by remybach » Mon, May 14, 2012, 1:21 PM UTC

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.

JQuery Super Labels Plugin
github.com

Re: JQuery Super Labels Plugin

#2

Post by egze » Mon, May 14, 2012, 2:04 PM UTC

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

Re: JQuery Super Labels Plugin

#3

Post by david_a_r_kemp » Mon, May 14, 2012, 2:10 PM UTC

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.

Re: JQuery Super Labels Plugin

#4

Post by phzbOx » Mon, May 14, 2012, 2:11 PM UTC

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

Re: JQuery Super Labels Plugin

#5

Post by 5h » Mon, May 14, 2012, 2:21 PM UTC

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

Re: JQuery Super Labels Plugin

#6

Post by jonknee » Mon, May 14, 2012, 2:22 PM UTC

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.

Re: JQuery Super Labels Plugin

#7

Post by Keithamus » Mon, May 14, 2012, 2:37 PM UTC

jonknee wrote: post #6

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.

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

Re: JQuery Super Labels Plugin

#8

Post by btucker » Mon, May 14, 2012, 3:52 PM UTC

Keithamus wrote: post #7

jonknee wrote: post #6

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.

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

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

Re: JQuery Super Labels Plugin

#9

Post by remybach » Mon, May 14, 2012, 4:43 PM UTC

phzbOx wrote: post #4

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

There's an option to do that:

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

Re: JQuery Super Labels Plugin

#10

Post by remybach » Mon, May 14, 2012, 4:46 PM UTC

5h wrote: post #5

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

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.