/    Sign up×
Community /Pin to ProfileBookmark

get the size of a div or table

Copy linkTweet thisAlerts:
Dec 25.2006

I commited to doing this ( seemed simple, but it not as simple as I thought ) and I hope someone knows what I missed.

I have a series of tables on a page that are created dynamicly. the tables can get vary large in both width and height. So I planned to wrap scrollbars around them when needed but only when needed.

I wrapped the table in a DIV tag <Div id=launchPad> and then tried to get it’s height and width in the onload.

e=document.getElementById(“launchPad”);
alert( ” Launch pad alert Height ” + e.style.offsetHeight );
alert( ” Launch pad alert width ” + e.style.offsetWidth );

but if the div does not have a defined size I get an undefined value.

what I want to do is if the width is to large then set the width with an overflow.

any help ?

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@so_is_thisDec 25.2006 — Technically, there is no [B]offsetWidth[/B] nor [B]offsetHeight[/B] property for the [B]style[/B] object. Those are properties of the object itself -- not that object's associated [B]style[/B] object.
Copy linkTweet thisAlerts:
@michaelcauthorDec 25.2006 — Technically, there is no [B]offsetWidth[/B] nor [B]offsetHeight[/B] property for the [B]style[/B] object. Those are properties of the object itself -- not that object's associated [B]style[/B] object.[/QUOTE]

I had tried

e.style.height

e.style.width

first but got the same results,

unless the div was assigned a height and width it returns unavaliable.

what I want to get is the size of the table and if it's to large to fit the page space to set it's size to fill the page and then get scroll bars using overflow.
Copy linkTweet thisAlerts:
@so_is_thisDec 25.2006 — I had tried

e.style.height

e.style.width

first but got the same results,

unless the div was assigned a height and width it returns unavaliable.[/QUOTE]
On these, you are correct. But, the other two properties are for the object itself. Use those.
Copy linkTweet thisAlerts:
@konithomimoDec 25.2006 — Check to see if the table width is greater than its parentNode width (the width of the div) if it is then show the scrollbars.

And what So_is_this is saying is that you are trying:

e.style.height

e.style.width

which is attempting to get the heigth/width of the object style, which is not what you want. Instead it should be the width/height of the object:

e.height

e.width
Copy linkTweet thisAlerts:
@ricpDec 25.2006 — Several points to raise here..

1) offsetHeight/offsetWidth will return not just the width and height of an element but also it's margin.

2) when querying an element that has neither the height or width set via javascript or an inline style attribute, you need to refer to the currentStyle property (in IE) or the getComputedStyle method (in FF/etc).

3) if your container is going to be a set size then simply set the overflow style property as auto, this will only provide scrollbars if the content exceeds the amount set for the container. This would be a lot easier if (lame) IE had implemented max/min CSS properties - allowing you a more flexible approach.
Copy linkTweet thisAlerts:
@michaelcauthorDec 25.2006 — Ok – I have not made my issue clear.

In this case I don’t want to set my height but I do want to set my width.

So with the Div like this

<div id="launchPad" style="width:250px; overflow:auto">

I then compute out the actual width that I want it works just fine in FireFox, But IE gives me both Horizontal & Vertical scrollers, but I don’t want a Vertical Scroller.

Now what I wanting was to get the default size of the table that I didn’t set, can’t seem to get that in any way, if I set a value Width=98 or style=”width=98” then it returns a value otherwise it won’t give me a value.

Now if I could define overflow-horzontal:auto this would work.

So any idea on how I would get the result I thought would be so simple ?
Copy linkTweet thisAlerts:
@so_is_thisDec 26.2006 — Ok – I have not made my issue clear.[/QUOTE]
Maybe, but it seems more like you don't understand what you've been told three times. This:

alert( " Launch pad alert Height " + e.style.offsetHeight );

alert( " Launch pad alert width " + e.style.offsetWidth );

is supposed to be this:

alert( " Launch pad alert Height " + e.offsetHeight );

alert( " Launch pad alert width " + e.offsetWidth );
Copy linkTweet thisAlerts:
@michaelcauthorDec 26.2006 — Maybe, but it seems more like you don't understand what you've been told three times. [/QUOTE]

No my mistake I had offSetWidth vs offsetWidth and I received the same value undefined.

e.width & e.height did not work at all that's where I started becuse it did not return a value unless it had an actual value.

once I changed it to offsetWidth and offsetHeight, I got the result I needed,

then went back and researched the currentStyle & getComputedStyle this is good info.

Still not as simple as I thought because in some cases when I set the outside div smaller it did not create a scroll bar but instead the table display changed. but I now know what I need to do thanks.

this has got me on my way.

Thanks all

Michael C
Copy linkTweet thisAlerts:
@so_is_thisDec 26.2006 — Salud!
×

Success!

Help @michaelc spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...