ansaurus

Question

Answer 1

A:

I'm not sure you'll find a plugin to do this, but it might not be that difficult to make one:

Browser sniffing is bad, but naively, we could sniff for mozilla, count the total horizontal borders that affect the size, and subtract that from the value passed in.

Here's some pseudo code:

function totalPixelsAddedIntoCountByMozilla() {
  //for you to define.
}

(function($){
  $.fn.extend({
    tableHeight: function(new_height) {

      if($.browser.mozilla) {
        return this.each(function(){
          $(this).height(new_height - totalPixelsAddedIntoCountByMozilla());
        };
      }

      return this.each(function(){
        $(this).height(new_height);
      };
    }
  });
})(jQuery);

Then use $().tableHeight() instead of $().height();

Alex Sexton 2009-10-20 22:21:50

Answer 2

+1 A:

I don't know of any "official" plugins, but it shouldn't be difficult to roll with your own:

jQuery.fn._height = jQuery.fn.height

jQuery.fn.height = function( val )
{
    if ( arguments.length === 0 ) return this._height();

    this.css( {'padding': '0px', 'border-width': '0px'} );

    this._height( val );

    this.css( {'padding': '', 'border-width': ''} );

    return this;
};

This code depends on you not regularly setting inline styles on your elements, as this will overwrite them. If you keep all of your css rules in a stylesheet this should work.

Tinister 2009-10-20 22:27:39

This is a smart approach. I would imagine that you wouldn't see a glitch, but that would be the only downside, if it did happen.

Alex Sexton 2009-10-20 22:29:23

Answer 3

A:

Are you changing single TDs or whole rows? If the latter, an easy unobtrusive approach, with less jquery runtime, would be to preset the height in a style sheet as a child of the TR.

<style>

#SomeTableorDivId TR TD {height:someheight; border:0; etc;}

#SomeTableorDivId TR.preferred-height TD {height:newheight; border:0; etc;}

</style>

Now all you have to do is work the logic to hit the TR tags instead of all the TD tags, plus the CSS is easier to control/predict cross-platform.

$(someTRpointer).toggleClass('preferred-height');

The benefit is that once the TR is hit the whole row changes all together. I've used this cross-platform lots.

rydordy 2009-10-23 04:52:54

ansaurus

tags:

views:

answers:

Cross browser height function - jquery

related questions