Last active
October 8, 2015 04:18
-
-
Save aklump/3276507 to your computer and use it in GitHub Desktop.
jQuery plugin to equalize form element widths
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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