Floating Labels for Bootstrap 3

As I’m working quite a lot with Bootstrap these days, I wrote a jQuery plugin to apply a “floating” effect on the framework’s horizontal forms labels.

Plugin

The jQuery plugin is very simple. Here is the full code.

(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));

How To Use

First, make sure your horizontal form respects Bootstrap’s HTML structure, and that your inputs have a placeholder attribute. Then, target each input you want to apply the effect to.

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

A jQuery Plugin to Fade In and Out with a Vertical Slide

JQuery’s .show() and .hide() effects are useful, but I’m not cool with their width resizing.
This plugin allows you to show and hide elements with a vertical slide and a fading effect.

You can use the .showDown(), .hideUp() and .verticalFade() functions the same way you would use jQuery’s .fadeIn(), .fadeOut() or .fadeToggle() effects.

$('#trigger-example').click(function () {
  $('#example').verticalFade({ duration: 'slow' });
});

https://gist.github.com/WebMaestroFr/9316374

Plugin

The jQuery plugin is very simple. Here is the full code.

(function ($) {
  var getUnqueuedOpts = function (opts) {
    return {
      queue: false,
      duration: opts.duration,
      easing: opts.easing
    };
  };
  $.fn.showDown = function (opts) {
    opts = opts || {};
    $(this).hide().slideDown(opts).animate({ opacity: 1 }, getUnqueuedOpts(opts));
  };
  $.fn.hideUp = function (opts) {
    opts = opts || {};
    $(this).show().slideUp(opts).animate({ opacity: 0 }, getUnqueuedOpts(opts));
  };
  $.fn.verticalFade = function (opts) {
    opts = opts || {};
    if ($(this).is(':visible')) {
      $(this).hideUp(opts);
    } else {
      $(this).showDown(opts);
    }
  };
}(jQuery));