Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Can I retrieve table width??

Status
Not open for further replies.
randomhero69

randomhero69

Technical User
Feb 9, 2004
4
CA
Hi all, I would like to know if it is possible to retrieve the width and/or height of a table (pixels), the same that you can do with the .width property? I would like to build a windowResize function that adjust the window itself automatically to the width and height of a table that is containing some text.. That's why it have to be determined by a function.. Hope it is possible! Thanks!
 
Sort by date Sort by votes
you need to know how to use getElementById for the function to work example..
----------------------------------------
<Script language=javascript>
function test()
{

widthoftable = document.getElementById('TT').width;
heightoftable = document.getElementById('TT').height;
resizeTo(widthoftable,heightoftable);
}


</script>
<body onLoad=test()>


<table id="TT" width="400" height="500" bgColor=yellow align=center>
<td width=20% bgColor=red></td><td bgColor=green width="60%"></td><td width="20%" bgColor=purple></td>
</table>
-------------------------------------------
you need to create an id with the table you want to resize then use getElementById to gain access to the height and width of the id so in this case it is the table


hope this helps
 
Upvote 0 Downvote
Bear in mind that when opening or sizing windows, some browsers take the scrollbar into account, and some do not. Therefore, you might need to add a small offset value (say 20 or 30 pixels or so) to counter this.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
hmm... sometimes that fails depending on wether width was explicity specified, to retrive the value calculated by the browser during draw().Sometimes you can retrieve these values using [red].offsetHeight[/red].

hope this helps

---------------------------
 
Upvote 0 Downvote
Thank you guys! With the .offsetWidth and .offsetHeight property, It does exactly what I want. I was already working with getElementById, but when used with .width, the width have to be specified implicitely in the table tag. So thanks to you all


<Script language=javascript>
function test()
{
widthoftable = document.getElementById('TT').offsetWidth;
heightoftable = document.getElementById('TT').offsetHeight;
alert("width = " + widthoftable + "\nheight = " + heightoftable);
}
</script>

<table id="TT" bgColor=yellow align=center>
<tr>
<td bgColor=red>Hi</td>
<td bgColor=green>my dear</td>
<td bgColor=purple>friends</td>
</tr>
</table>

<a href="javascript:void(0)" onclick="test()">Dimension of table</a>
 
Upvote 0 Downvote
FYI: in IE the scrollbars are (I believe) 23 pixels wide. Someone correct me if I'm mistaken.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
They're 16 pixels wide... and have been since Windows 3.11.

This is due to the "olden days" where most things (like mouse cursor, etc) were multiples of 8 for data storage purposes.

Now I feel old ;o)

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Actually, a scrollbar's width depends on what color scheme the user choose.
[tt]
Brick: 13
Desert: 13
Eggplant: 16
High Contrast #1: 17
High Contrast #2: 17
High Contrast Black: 17
High Contrast White: 17
Lilac: 15
Maple: 13
Marine: 13
Plum: 13
Pumpin: 21
Rainy Day: 13
Red, White, and Blue: 13
Rose: 13
Slate: 13
Spruce: 15
Storm: 13
Teal: 13
Wheat: 13
Windows Classic: 16
Windows Standard: 16[/tt]

And that's only if the font size is set to "Normal". Changing the font size to "Large" or "Extra Large" also effects the scroll bar width. Finally, a user can specify their own scroll bar width.

By checking the width of a div that consists of nothing but a scrollbar, you should be able to find the width of the scrollbars for that user.
Code: 
function getScrollbarWidth(){
    var d=document.createElement("DIV");
    d.style.position = 'absolute';
    d.style.visible = 'hidden';
    d.style.overflowY = 'scroll';
    d.style.width = 0;
    document.body.insertAdjacentElement("afterBegin", d);
    var scrollBarW = d.offsetWidth;
    d.parentNode.removeChild(d);
    return scrollBarW;
}

Adam
 
Upvote 0 Downvote
This is very clever, Adam. Thanks!

Minor typo to point out:

d.style.visible = 'hidden';

should be

d.style.visibility = 'hidden';

This is not noticed since you remove the element just as soon as you create it, but in my experimenting with what you did, I noticed that.

Very cool!

--Dave
 
Upvote 0 Downvote
Last time I tested scrollbar width I thought it came out larger. Have to see if I can find the code again. I do remember that, instead of creating a div that consists of nothing but a scrollbar, I forced the width of a div containing a short piece of text to be wide enough to have no scrollbar, then narrow enough to require a scrollbar, and compared the difference in widths. That might account for some difference.

Come to think of it, that may have been before I switched from Win98 to WinXP, so maybe that accounts for the different value I noticed then. Since it would work on XP as well, there was no need for me to look at the value on XP.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
796
lexer
lexer
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
727
coldbohemia
coldbohemia
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
815
malpa
malpa
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
405
gmmastros
gmmastros

Part and Inventory Search

Sponsor

Back
Top