Inline input labels with animation

This last week I’ve been doing a lot of work making a new homepage that looks like twitters, as well as modifying some things on the rest of the site to try and give it a cohesive look. While most of the site is still on the to do like (it’s a fairly large site) the new homepage is done (you can see it at theamm.org, no promises it hasn’t been changes as the owner has a copy of CSS Edit and it not afraid to use it) and I think it met the goal. One of my favorite (non specialized) features is the animated inline input labels. Because it’s a great, simple implementation I decided to post it here.

First, the input are formatted a very special way, don’t worry it’s basic and easy to implement. First, the input for firstname:

Snipplr: http://snipplr.com/view/53928/inline-labels-with-jquery-animations/

The input is obvious, as is the label, the last div, with the class .inputerror.firstname is some specific code for inline displayed error messages, I may make a post about them if there is any interest. The trick to this is the CSS, the div.inputbox is the thing that actually looks like the input, and the true input has no border or background. The label is moved over the input box. Because of this it’s important to have the label properly formatted with the for="" element pointing to the appropriate input field.

The CSS that makes that look right is below, it’s the code used in the example (link at bottom) as the code used on that site is more than a little messy (to many people playing around with it).

Snipplr: http://snipplr.com/view/53928/inline-labels-with-jquery-animations/

Obviously that has some styling for looks, which is fully changeable based on your individual implementation, the important stuff is the display, overflow, and the margin-top on the .inputbox label, as well as the previously mentioned background in the .inputbox input style. You’ll notice that the inputbox doesnt have a width or a height (except where limited by the actual input inside it). That because thats all set via the individual inputs so you can vary it from input to input depending on what will go in it (just like the example has set up).

The last bit is the scripting, in this case jquery was used, but it should be convertible to any other javascript library, or straight javascript itself, It’s only in jquery here because I use jquery for nearly everything because it’s fast, stable, and feature-full. In this case it’s a function called at load although it can be called in any as long is it’s sub-function tun on keyup and/or keydown.

Snipplr: http://snipplr.com/view/53928/inline-labels-with-jquery-animations/

What this scripting does is bind the sub-function keyupdown on both the keyup and keydown. The reason it’s done on both is because it’s more reliably in always running that it is when you just do on up or down. The first first checks if there is a value to the input, if not it will reanimate the label back in, with a simple fade in the case, but you do have full control over how it does it. Then, if there is something in the input it will fade it out, in this case by pushing it right while fading out. Once a label is completely faded out it is hidden so it won’t interfere with normal operation of the input box (like selecting or double clicking). It also makes it visible again before fading it back in.

All three parts put together make a nice animated inline label like the ones on the Inline input labels with animation example page. It’s been tested in IE and on mobile devices and seems to work fine albeit with slow or no animations on mobile devices. There was some weird graphical things in IE on the test site but I believe it was due to the font-weight and IE’s lack of fon’t smoothing that caused it.

If you’ve found a great use for this, or have an questions or would like some help with modifications or implementation on your specific site leave a comment below.

One Reply to “Inline input labels with animation”

Leave a Reply

Your email address will not be published. Required fields are marked *