CODEWITHSUNDEEP
javascriptjqueryheight
Ankit
Ankit

Reputation: 6644

Jquery this.height not working properly

I am setting height of a tr dynamically using jquery. The code is run on document.ready. I debugged the code and saw that the height to set is coming proper (493) but when I assign it, to the tr, it is still showing 3193 while when I see $(this)[0].style.height, it shows 493px. I am confused how can that be different.

Code - 

$(document).ready(function () {
    var heightToSet = $(window).height();
    $('#tr1').height(heightToSet);
});

Note that elements in the table are big and due to this, there is no scrollbar.

Upvotes: 0

Views: 1602

Answers (1)

Jasper
Jasper

Reputation: 75993

this refers to the document element in your code. You probably want to set the height of the body element or a descendant of the body element.

Look at your console for this JSFiddle, you'll see what this is in your event handler: http://jsfiddle.net/qwk6x/

Update

You can change the CSS of the TD elements in your table to not show the overflow. Currently you are setting a height but it's being ignored because the content of the element makes it much lager than the set height:

CSS --

td {
    display     : block;
    overflow    : hidden;
    white-space : nowrap;
}​

JS --

$(function () {
    $('#tr1').children().height($(window).height());
});​

Here's a demo: http://jsfiddle.net/qwk6x/3/

Upvotes: 5

Related Questions