Skip to content

Instantly share code, notes, and snippets.

@WebMaestroFr
Last active August 29, 2015 13:57
Show Gist options
  • Save WebMaestroFr/9405966 to your computer and use it in GitHub Desktop.
Save WebMaestroFr/9405966 to your computer and use it in GitHub Desktop.
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
Copy link
Author

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