peachananr / label_better Goto Github PK

Opera (v12.16, OS X Mavericks) doesn't seem to be removing the added "lb_label" elements. The hover state is also not triggered correctly (could be a CSS bug).

Attachment 1: Floating label is above cursor, but not above the field
Attachment 2: Ever-stacking DOM elements

EDIT--------
looking into this .. currently looks like the oTransitionEnd isn't fired. Read here that it got renamed to "otransitionend", but that isn't working either.

EDIT 2-----
Got stuck at the point where it looks like the translate3D css isn't set.
Logging the .attr('style) for the element after the switch/case went through, got me different results:

Chrome: "opacity: 1; left: auto; right: auto; position: absolute; -webkit-transition: all 250ms cubic-bezier(0.175, 0.885, 0.42, 1.31); transition: all 250ms cubic-bezier(0.175, 0.885, 0.42, 1.31); top: 0px; -webkit-transform: translate3d(0, -24px, 0);"

VS

Opera: "left: auto; right: auto; position: absolute; top: 0px; opacity: 1;"

EDIT 3-----
Fixed the issue by changing the transition on translate3D to the good ol' "top".
And if you're interested, I got this working in IE8-9 by adding the placeholder as :before content in browsers marked as old (with conditional comments).

The behaviour and animation of this solution is nice. However I am missing the use of actual label-elements. Pairing label- and input-elements is considered best practice for forms. Is there any reason for not using labels in the markup of the demo?

When any input is autocompleted by Chrome on page load (i.e. login credentials), the label doesn't show up. The only way to get the label to show is to completely clear the input.

I input something in a text and a label is shown on top of the text box. When I press Reset button (form reset) to clear the text box, the content is reset but the label still remains on top of the text box but also shows inside. Please instruct how to clear out the bounced text while doing form reset.

Thanks :)

Calling $.label_better on the same element multiple times with the hidePlaceholderOnFocus option removes the placeholder from the element.

This is caused by initializing label_better multiple times on the same element.

Hello!
First great plugin, it runs really smooth.

I just have one problem with IE and a textarea. For all my inputs, default position is "top" and the new placeholder goes where it should. But for my textarea, the new placeholder appears in the middle of the area.

I attached a screenshot to give a better idea.

Everything is ok with the other browsers.

And here is my code. Everything should be default for label_better
<textarea class="label_better orange" data-position="top" rows="8" name="histoire" data-new-placeholder="Ta meilleure histoire" placeholder="bla bla"></textarea>
Thank you!

Hi there! Great piece of code! Thank you for sharing.

I have two quick questions.

1. How can I apply this to a "textarea" input to a form? Tried several things and couldn't get it to work.
2. The fade on animation happens for the label. How can the same be accomplished on the original placeholder?

Cheers,
Thomas

Hey, the plugin is awesome, but what about with validation of this forms?

The label positions are skewed when using an animated bootstrap modal.