By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,620 Members | 1,826 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,620 IT Pros & Developers. It's quick & easy.

Resizing a table

P: n/a
z
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

Jul 23 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
z wrote:
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
Jul 23 '05 #2

P: n/a
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...

--
Fred
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.