Skip to content

Instantly share code, notes, and snippets.

@craigmdennis
Created September 15, 2011 22:42
Show Gist options
  • Save craigmdennis/1220695 to your computer and use it in GitHub Desktop.
Save craigmdennis/1220695 to your computer and use it in GitHub Desktop.
Slide labels away from input on focus
// Requires jQuery easing
function moveLabels() {
// Get the original position values
var pos = $('#contact label').css('left').replace('px', '');
$('input[type=text],textarea').focusin(function () {
var label = $(this).prev('label');
label.stop(true, false).animate({
'left': -label.width() - pos
}, 200);
});
// If the input is empty then animate it back in
$('input[type=text],textarea').focusout(function () {
if ($(this).attr('value') === '') {
var label = $(this).prev('label');
label.stop(true, false).animate({
'left': pos
}, 200);
}
});
}
@craigmdennis
Copy link
Author

TODO

  • Turn into plugin
  • Simplify code
  • Position labels with JS to allow for fall-back

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment