Question

I have make a script for make columns the same height. This is my script:

function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).outerHeight();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.outerHeight(tallest);
};

equalHeight($(".list-links li"));

But i have a problem. In my website, i use jquery ui core. But i want delete that jquery ui. But if I remove the jquery ui. Then this script does not work anymore. Why?

Thanks for helping.

Answer 1

jQuery’s .outerHeight doesn’t work as a setter method as you can see from the documentation. So, this line of code

group.outerHeight(tallest);

doesn’t have any effect without jQuery UI.

jQuery UI wraps .inner* and .outer* methods and extend them with a setter method as you can see in the excerpt below from jquery.ui.core.js.

...
$.fn[ "outer" + name] = function( size, margin ) {
  if ( typeof size !== "number" ) {
    return orig[ "outer" + name ].call( this, size );
  }

  return this.each(function() {
    $( this).css( type, reduce( this, size, true, margin ) + "px" );
  });
};
...

These setters, for instance .outerHeight, sets the height of the element without the padding, border and optionally the margin.