Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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

This comment has been minimized.

Show comment Hide comment
@WebMaestroFr

WebMaestroFr Mar 13, 2014

$('.form-control[placeholder]', '.form-horizontal').each(function () {
    $(this).bsPeekabooLabel();
});
Owner

WebMaestroFr commented Mar 13, 2014

$('.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