Passing jquery function as variable parameter to the custom function -
i writing function calculates biggest height / width , makes elements of same height / width. want pass 2 parameters function:
1. selector, can be(element, class ) 2. jquery `width()` / `height()` function
and desired result should function looks like..
eg 1. equaldimensions('.class', width() ); or eg 2. equaldimensions( div, height() );
and based on passed function width()
/ height()
calculate biggest height / width , make selectors passed first parameter equal width / height.
being new jquery, struggling putting code.
this have tried far...
var equaldimension = function( selector, fn ){ var dimension = fn(); var biggestdimemsion = 0; $(selector).each(function(){ if($(this).dimension > biggestdimemsion){ biggestdimemsion = $(this).dimension; } }); $(selector).each(function(){ $(this).dimension(biggestdimemsion); }); };
i wrote quick example of how approach problem:
var equaldimension = function (selector, fn) { var $elements = $(selector), dimensions = $elements.map(function (i) { return $elements.eq(i)[fn](); }), maxdimension = math.max.apply(math, dimensions); $elements[fn](maxdimension); }; equaldimension('div', 'height');
this assumes passing name of jquery function, rather function itself. if want pass actual function, this:
var equaldimension = function (selector, fn) { var $elements = $(selector), dimensions = $elements.map(function (i) { return fn.call($elements.eq(i)); }), maxdimension = math.max.apply(math, dimensions); fn.call($elements, maxdimension); }; equaldimension('div', $.fn.height);
edit: in terms of creating clean ui this, most-likely add in following jsbin.
http://jsbin.com/pogujozane/edit?js,output
$.fn.equaldimension = function (fn) { var $elements = $(this), dimensions = $elements.map(function (i) { return $elements.eq(i)[fn](); }), maxdimension = math.max.apply(math, dimensions); $elements[fn](maxdimension); }; $.fn.equalheight = function () { return $(this).equaldimension('height'); }; $.fn.equalwidth = function () { return $(this).equaldimension('width'); }
so called like:
$('div').equalheight();
Comments
Post a Comment