Create a gist now

Instantly share code, notes, and snippets.

Hide labels behind inputs on Bootstrap's horizontal forms, until the user starts to fill them up and it's then sliding on. Preferably for inputs with placeholders.
(function ($) {
'use strict';
$.fn.bsPeekabooLabel = function () {
var input = $(this),
control = input.closest('[class*="col-"]'),
label = control.siblings('.control-label'),
show = false,
place = function (d) {
var m;
if ($(control).css('float') === 'left') {
m = '0 0 0 ' + label.outerWidth() + 'px';
label.animate({ margin: show ? 0 : m, opacity: show ? 1 : 0 }, d);
control.animate({ margin: m }, d);
} else {
label.animate({ margin: 0, opacity: 1 }, d);
control.animate({ margin: show ? label.outerHeight() + 'px 0 0' : 0 }, d);
}
};
label.css({ position: 'absolute' });
place(0);
input.keyup(function () {
if (show === !input.val()) {
show = !show;
place(400);
}
});
$(window).resize(function () { place(0); });
};
}(jQuery));
@WebMaestroFr
Owner
$('.form-control[placeholder]', '.form-horizontal').each(function () {
    $(this).bsPeekabooLabel();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment