A very simple jQuery plugin that will turn your grid columns into tiles. Compatible with Bootstrap 3.
https://gist.github.com/WebMaestroFr/9481254
$('#my-grid-container').wmTiles();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));