Resizing a table

z · Mar 5, 2005

Hi,
i just wanted to know how i can resize a table using javascript but in this
special manner:
I have two tables, one at the top of the page and the other below that one.
The problem is that in that code shown below there is a scroll in the
window, and what I want is resizing the table t2 from the height of 100%
down to the max number of pixels so that there is no scroll in the window.
Which should be the code for the function resizeTable ?
I wonder if u get the idea...

The code is like this:

<html>
<head>
<script language="javascript" src="fun.js"></script>
</head>
<body onLoad="resizeTable(document.getElementById(t2))">
<table id="t1" width="100%" border="1">
<tr><td>some text</td></tr>
</table>
<br>
<table id="t2" width="100%" height="100%" border="1">
<tr><th>title</th></tr>
<tr><td>some text</td></tr>
</table>
</body>
</html>

Any suggestions?
Thx in advance

Fred Oz · Mar 6, 2005

z said:
Hi,
i just wanted to know how i can resize a table using javascript but in this
special manner:
I have two tables, one at the top of the page and the other below that one.
The problem is that in that code shown below there is a scroll in the
window, and what I want is resizing the table t2 from the height of 100%
down to the max number of pixels so that there is no scroll in the window.
Which should be the code for the function resizeTable ?
I wonder if u get the idea...

If you are using HTML 4, the height attribute is depreciated.
As soon as the page is re-sized, your height setting will not be
right. I get the feeling this could be much better done in CSS.

I've made a half-hearted attempt at some code, here's the
algorithm:

1. Get the innerHeight/clientHeight of your window

2. Use offsetParent and offsetTop to find the offset of the
second table element from the top of the page (note: you need
to recurse through all the offset parents until you hit the
body tag)

3. Make allowance for any cellpadding or spacing, as well as
table/cell borders at the bottom of your table

4. After adding all the offsetTops until your parent is the
body, and whatever you need to allow for the stuff at the
bottom of the table, subtract that from the
innerHeight/clientHeight.

5. Fill your second table with a div that is the remaining
height of window.

You should find what you want to know between these two sites:

<URL:http://www.quirksmode.org/index.html?/viewport/compatibility.html>

<URL:http://www.mozilla.org/docs/dom/domref/dom_el_ref.html>

And here is some Mozilla-specific code to start with - it does
not allow for table spacing/padding or borders, so the div is
re-sized too big. The Quirksmode link provides the IE
clientHeight additions required.

function resizeCell(){
var y = d.offsetTop;
var d = document.getElementById('aDiv');
var iH = self.innerHeight;
var n = d;
while (n.offsetParent.nodeName.toLowerCase() != 'body') {
alert(n.nodeName.toLowerCase() + ': ' + y);
n = n.offsetParent;
y += n.offsetTop;
}
y = (iH-y) + 'px';
d.style.height = y;
alert(iH + ' ' + d.offsetTop + ' ' + y);
}
</script>

<table border="1"><tr><td><div style="height:
200px;">hi</div></td></tr></table>
<table border="1"><tr>
<td onclick="resizeCell()"><div id="aDiv" style="height:
50px;">text</div>
</td>
</tr></table>

Fred Oz · Mar 6, 2005

Fred Oz wrote:
[...]

function resizeCell(){
var y = d.offsetTop;
var d = document.getElementById('aDiv');
var iH = self.innerHeight;

Ooops, I tidied the code and introduced an error...

var d = document.getElementById('aDiv');
var y = d.offsetTop;

Gotta get the element reference *before* finding its offset...

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Only one table shows up with the information	2	Mar 29, 2023
How to add dropdown selected data to table using jquery	2	Jul 2, 2022
Sort by number of characters	1	Nov 2, 2023
Having trouble centering contents of td ?	3	May 2, 2023
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery?	4	Sep 29, 2023

Resizing a table

z

Fred Oz

Fred Oz

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads