JavaScript

login-form.js

(function() {
  /**
   * Adds an animation effect to the given input element's label so that when some text
   * is entered in the field, the label moves up and when the field is empty, the label
   * goes back to its initial place. This function only works with the accompanying CSS 
   * styles.
   */
  function installAnimation(inputElem, marginTopEnd, animationLength) {
    $(inputElem).bind('input', function() {
      var label = $(this).prev("label");
      var labelMarginTop = label.css('margin-top');
      if ($(this).val().length > 0 && labelMarginTop == "0px") {
        animateMarginTop(label, marginTopEnd, animationLength);
      } else if ($(this).val().length == 0 && labelMarginTop == marginTopEnd) {
        animateMarginTop(label, "0px", animationLength);
      }
    });
  }

  /**
   * If animationLength is greater than zero animates margin-top of the given element to
   * the marginTopEnd. Otherwise immediately sets the margin-top of the given element to
   * marginTopEnd.
   */
  function animateMarginTop(elem, marginTopEnd, animationLength) {
    if (animationLength > 0) {
      $(elem).animate({
        marginTop: marginTopEnd
      }, animationLength);
    } else {
      $(elem).css('margin-top', marginTopEnd);
    }
  }

  /**
   * Call this function as soon as the document is ready to ensure that the initial position
   * of the label for the given input field is correct (i.e. if the input has text, the label
   * has moved up and otherwise it's behind the input field).
   */
  function initializeInputState(input, marginTopEnd) {
    if ($(input).val().length > 0) {
      animateMarginTop($(input).prev("label"), marginTopEnd, 0)
    }
  }

  function setupLoginFormEffect(marginTopEnd, animationLength) {
    var usernameField = $("#username");
    var passwordField = $("#password");

    initializeInputState(usernameField, marginTopEnd);
    initializeInputState(passwordField, marginTopEnd);

    installAnimation(usernameField, marginTopEnd, animationLength);
    installAnimation(passwordField, marginTopEnd, animationLength);

    $("input:submit").button(); 
  }

  $(document).ready(function() {
    setupLoginFormEffect("-30px", 200);
  });
})();