Advanced Search

Inline labels with jQuery animations

/ Published in: jQuery
Save to your folder(s)
After being tasked with creating inputs like those on the twitter homepage I came up with this inline label system that uses jquery to control the labels (in the vase of the example it fase and slides them).

The code is in three parts. First, the input are formatted a very special way, don’t worry it’s basic and easy to implement. Take a look at the first section below. 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 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.

Second is the CSS. Obviously the code below 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 of code is the scripting. The first bit checks if there is a value to the input, if not it will reanimate the label back in, with a simple fade in in this 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 example page located after the url (scroll to the bottom of the post for a direct link). It’s been tested in IE and on mobile devices and seems to work fine albeit with slow or no animations on mobile devices.

If you’ve found a great use for this, converted it to another library (or no a library independent form), or have an questions or would like some help with modifications or implementation on your specific site leave a comment below or on the blog at the link.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // Part one, HTML layout for the forms
  2. <div class="inputbox">
  3.     <input type="text" name="firstname" id="firstname"/>
  4.     <label for="firstname">Firstname</label>
  5.     <div class="inputerror firstname"></div>
  6. </div>
  7.  
  8.  
  9.  
  10. // Part the, the CSS style base (along with some for looks)
  11.     .inputbox{
  12.         border: 1px black solid;
  13.         display: inline-block;
  14.         border-radius:5px;
  15.         box-shadow: inset 1px 1px 5px #CCCCCC;
  16.         padding:1px;
  17.         margin-top:8px;
  18.         margin-right:5px;
  19.         margin-left:0px;
  20.         overflow:hidden;
  21.     }
  22.     .inputbox input{
  23.         border: none;
  24.         background: transparent;
  25.         margin-top:-1px;
  26.         font-size:20px;
  27.     }
  28.     .inputbox label{
  29.         display:block;
  30.         font-size: 20px;
  31.         font-family:sans-serif;
  32.         letter-spacing: 2px;
  33.         padding-left: 5px;
  34.         margin-top:-25px;
  35.         color: #777777;
  36.     }
  37.  
  38.  
  39. // The actual scripting for the animation
  40.     $(document).ready(function(){
  41.         inlinelabel();
  42.     });
  43.     function inlinelabel(){
  44.         $('div.inputbox > input').keydown(keyupdown);
  45.         $('div.inputbox > input').keyup(keyupdown);
  46.         function keyupdown(){
  47.             if($(this).val()==''){
  48.                 $(this).parent().children('label').css('visibility','visible');
  49.                 $(this).parent().children('label').stop();
  50.                 $(this).parent().children('label').css('margin-left','0px')
  51.                 $(this).parent().children('label').animate({
  52.                     opacity: 1,
  53.                 },200);
  54.             }else{
  55.                 $(this).parent().children('label').stop();
  56.                 $(this).parent().children('label').animate({
  57.                     opacity: 0,
  58.                     marginLeft: '50%',
  59.                 },200,function(){
  60.                     $(this).parent().children('label').css('visibility','hidden');
  61.                 });
  62.             }
  63.         };
  64.     }

URL: http://fatfolderdesign.com/248/css/inline-input-labels-with-animation

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.