Skip to content

Instantly share code, notes, and snippets.

@aklump
Last active October 8, 2015 04:18
Show Gist options
  • Save aklump/3276507 to your computer and use it in GitHub Desktop.
Save aklump/3276507 to your computer and use it in GitHub Desktop.
jQuery plugin to equalize form element widths
/**
* Form Element Width Equalizer Plugin (Optimized for Drupal FAPI)
*
* Adjusts the widths of child elements to a set pixel dimension.
*
* Makes all text fields and text areas (or other as specified in
* options.elements) equal widths by subracting the css properties of: margin,
* border and padding from each element.
*
* If width is omitted then all elements will have their width matched to $(this)
*
* @param options
* - width: string or int
* Optional. Defaults to the outer
* - width: either a jQuery selector or an width (N or Npx), which is the
desired outerWidth of all elements, if omitted the width of the $(this) will
be used.
* - elements: the children of $(this); is passed to $(this).find(); defaults to
* .form-text, .form-textarea-wrapper
* - reset: ignores width and returns all elements to their original widths
*
* @return $(this)
*
* @code
* $('#screening-node-form').fapiWidths({width: 470});
* @endcode
*
* @author Aaron Klump, In the Loft Studios, LLC
* @see http://www.intheloftstudios.com
* @see http://gist.github.com/3276507
* @see http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/
*/
(function( $ ) {
$.fn.fapiWidths = function(options) {
var $parent = $(this);
// Handle if options.width has been passed
if (options && options.hasOwnProperty('width')) {
if (options.width.width) {
// If we passed an object with method .width() then parse it.
options.width = options.width.width();
}
options.width = parseInt(options.width, 10);
}
// Create some defaults, extending them with any options that were provided
var settings = $.extend( {
'elements' : '.form-text, .form-textarea-wrapper',
'width' : 'auto',
'reset' : false,
'max' : 0
}, options);
var $formElements = $parent.find(settings.elements);
if (!$formElements.length) {
return $(this);
}
// Delay this to avoid a performance hit if not necessary
if (settings.width === 'auto') {
settings.width = parseInt($parent.width(), 10);
}
$formElements.filter(':visible').each(function() {
var $element = $(this);
// First time register the original width
if (!$element.data('fapi-reset')) {
$element.data('fapi-reset', $element.outerWidth(true));
}
var newWidth;
if (settings.reset) {
if ($element.data('fapi-reset')) {
newWidth = $element.data('fapi-reset');
}
}
else {
var box = {};
box.lm = parseInt($element.css('marginLeft'));
box.rm = parseInt($element.css('marginRight'));
var boxSizing = $element.css('box-sizing');
if (boxSizing !== 'border-box') {
box.lb = parseInt($element.css('borderLeftWidth'));
box.lp = parseInt($element.css('paddingLeft'));
box.rp = parseInt($element.css('paddingRight'));
box.rb = parseInt($element.css('borderRightWidth'));
newWidth = settings.width - (box.lm + box.lb + box.lp + box.rp + box.rb + box.rm);
}
else {
newWidth = settings.width - (box.lm + box.rm);
}
newWidth += 'px';
}
if (settings.max && parseInt(newWidth, 10) > settings.max) {
newWidth = settings.max + 'px';
}
if (newWidth) {
$element.css('width', newWidth);
}
});
return $(this);
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment