Using JavaScript to discover where resizable tables have been drawn...

[analogduck]

I'm trying to figure out if there is a way I could use javascript to determine the exact pixel coordinates of the boundaries of tables and/or table cells after they have been rendered in the browser. Obviously this would be used to determine how resizable tables had been rendered, as I would already know in advance what the proportions of the tables should be if I specified exact widths and heights.

Any input would be gratefully accepted! Thank you!

-- AnalogDuck

 

[analogduck]

Anyone know if it's even possible?

-- AnalogDuck

 

[jemminger]

"resizable tables"?


=========================================================
while (!succeed) try();
-jeff

 

[analogduck]

Phat. You definately just made it into my Quotes and Quips database (to be displayed at random on my blog...

http://analogduck.com/blog

). You get 10 points for wit.

I'm still looking for clues though. I don't know enough about javascript to know where to look for such an answer. Google is my only friend. Heh.

-- AnalogDuck

 

[jemminger]

you're going to have to define "resizable tables" or give an example...

=========================================================
while (!succeed) try();
-jeff

 

[jemminger]

great site btw...you do all the coding?


=========================================================
while (!succeed) try();
-jeff

 

[jemminger]

this might be what you're after:

HTMLElement.offsetWidth
HTMLElement.offsetHeight
HTMLElement.offsetLeft
HTMLElement.offsetTop


an example:

<table id=&quot;myTable&quot;>
<tr>
<td>stuff</td>
</tr>
</table>

<script type=&quot;text/javascript&quot;>
var el = document.getElementById(&quot;myTable&quot;
alert(&quot;width: &quot; + el.offsetWidth +
&quot;\nheight: &quot; + el.offsetHeight +
&quot;\nleft: &quot; + el.offsetLeft +
&quot;\ntop: &quot; + el.offsetTop);
</script>


=========================================================
while (!succeed) try();
-jeff

 

[analogduck]

Heh. Okay, sorry for taking so long to reply today. I've been out doing Easter stuff with family.

BTW, I was last referring to your sig of &quot;while (!succeed) try();&quot; when I spoke of adding you to my quips database.

I have done a ton of development on my site, but I must credit the open-source development team who has done far more. The software is called e-Xoops:

http://www.e-xoops.com/

It's free, open-source, and PHP/MySQL-based.

By resizeable tables, I mean any table that either does not have width or height specifications or has a percentage as a specification. The dimemsions of such tables aren't known in advance, obviously, and I was hoping to figure a way to determine where they end up after the browser renders them. I want to wait for the browser to render the tables, then draw <div> layers behind them to hold graphics as backdrops. I know it sounds real awkward, but I've had a hell of a time trying get complex graphics to display behind content in any other way other than with <div> layers.

I've been pulling my hair out over trying to make content management systems play nicely with graphics that don't chop up evenly around the content. Example, this prototype I made yesterday:

http://analogduck.com/prototype/healthnet/example.htm

(Nothing on the page works. It is solely a mock-up.)

I'll try your code out now. I'm hoping it's the tool I'm looking for. .I'm a bit new to writing javascript and struggling for clues -- I believe the code you offered is accessing whats called the DOM to get the desired values.

In any case, thank you very much for your contribution!

-- AnalogDuck