CODEWITHSUNDEEP
javascriptjquery
124697
124697

Reputation: 21893

How can i find out the size of a cell with javascript

I have a popup that pops up right underneathe a <th> so it looks like the <td> (don't ask why). on 1024 *760 its the same width as the table header cell, but on 1280 it's not as wide. How can i wirte a script to find out the width of my <th>? (I'm using jQuery.)

edit:

<th id="telephoneTH" width="25%" >
<span  id="telephoneSpan" class="headerShortDetails">Telephone</span><span onclick="showContactPopup();"  class="infoSpans"> ${bean.phoneNumber}</span>
</th>


var width2 = $('#telephoneTH').outerWidth();
alert(width2);

error: 'null' is null or not an object

Upvotes: 0

Views: 1067

Answers (4)

Avi
Avi

Reputation: 251

try this ... let me know if it helps

Col Header one Col Header two abc xyz 
<script language="javascript" type="text/javascript" >
    $(document).ready(function () {
        var tableWidth = $('#testTable').outerWidth();
        var thOneWidth = $('#testTable th.#one').outerWidth();
        var thTwoWidth = $('#testTable th.#two').outerWidth();

        alert('Table width : ' + tableWidth + ' \n' + 'Table Col One width : ' + thOneWidth + ' \n' + 'Table Col Two width : ' + thTwoWidth + ' \n');
    });
</script>

Upvotes: 0

Jimmy
Jimmy

Reputation: 9815

var element = document.getElementById('whatever');
//or however you want to get the element
var width;
if (typeof element.clip !== "undefined") { width = element.clip.width; } 
else {
    if (element.style.pixelWidth) { width = element.style.pixelWidth; } 
    else { width = element.offsetWidth; } 
}

Upvotes: 1

Dutchie432
Dutchie432

Reputation: 29160

jQuery is ideal if you can use it.

$('#popupId').width( $('#cellID').width() );

or you might need to use outerWidth(), depending on your needs.

Upvotes: 0

jonwayne
jonwayne

Reputation: 483

With jQuery, you could use $('td').outerWidth(); You would likely need to add a class to the TD element in order to specify it with your jQuery selector. By the way, this jQuery method uses the outerWidth property "baked in" to JS, but jQuery is easier :)

Upvotes: 4

Related Questions