Welcome to WebmasterWorld Guest from 54.227.1.130

Forum Moderators: open

Message Too Old, No Replies

How to change size of the cell of table in JavaScrpt?

Help wanted (see sbj)

     

Kibi

12:30 pm on Mar 14, 2002 (gmt 0)

10+ Year Member



Please, write smth about it - I need runtime changing of cell height. The aim is changing size of table by the step (equals the size of tileing background image).

joshie76

3:49 pm on Mar 14, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Kibi, welcome to WebmasterWorld.

"write smth about it" - que?

This will change the height of a table cell though it's only going to work in a browser with a powerful DOM, so IE5+ or N6 (Sorry Opera Fans).


<html>
<head>
<script>
function switchHeight()
{
document.getElementById('cell').height = '30px';
}
</script>
</head>

<body>
<table>
<tr>
<td bgcolor="blue" id="cell">demo cell</td>
</tr>
</table>
<input type="button" value="cell" onclick="switchHeight()">
</body>
</html>

Let me know if you need anymore of an explanation.

Kibi

4:08 pm on Mar 14, 2002 (gmt 0)

10+ Year Member



Thanx a lot! :) And once more question - how to get it's value (current height)? Better - in pixels.

joshie76

4:15 pm on Mar 14, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The same way you write to it...

document.getElementById('cell').height

will return the current value which you can stick into a var etc..

Kibi

10:57 am on Mar 15, 2002 (gmt 0)

10+ Year Member



And what type it returns and how to convert to the number of pixels?

joshie76

11:15 am on Mar 15, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hmm good one.

OK this is where it gets complicated... I speak only in terms of IE here though I'm sure the techniques will translate (albeit by different methods) to other good DOM browsers.

When getting a value using

document.getElementById('cell').height
you will only get something back if there is already a 'manually set' property existing for that element. That could be set either by an attribute (<td height='xx'> ) or using scripting as above. You will then be returned a value in the same units as was specified when you last set the value.

If you want to get the 'render' height of the cell, that is how big IE chose to make it and not what the attribute/property defines (including when the height hasn't been specified) then you use the following method.

document.getElementById('cell').clientHeight

This should always return in units of pixels.

Hope that makes sense - let me know if it doesn't

Kibi

12:08 pm on Mar 15, 2002 (gmt 0)

10+ Year Member



Yah! it's work, thx a lot!

Kibi

9:16 am on Mar 18, 2002 (gmt 0)

10+ Year Member



That's it:

function changesize(){
document.getElementById("main_table").width = "100%";
document.getElementById("main_table").width = (Math.ceil(((document.getElementById("main_table").clientWidth))/125)-1)*125;
document.getElementById("info").height = 1;
document.getElementById("info").height = (Math.ceil(document.getElementById("info").clientHeight/160))*160;
}

What it does:

1)Expand width of main table to max size
2)Collaps to the nearest size N*(tile width=125)
3)Collaps height of cell to min size
4)Expand to the nearest size M*(tile height=160)

Next I interrupted onresize & onload events of <BODY> and made some cosmetic changes in script. Now my site looks good both in 640x480 and in 1200x1600.

You can browse it here: [kibus1.narod.ru...]

Kibi

9:22 am on Mar 18, 2002 (gmt 0)

10+ Year Member



While working on "resize" problem I made one little JavaScript utility - tracer of avaible propertes/functions of any visible object in a html-page.

Just add this script in your source:
function clickHandler() {
var obj,objname;
var stroka = "";
obj = window.event.srcElement;
objname = obj.tagName;
document.getElementById("info2").value = "";
for (var i in obj) {
stroka = (objname + "." + i + " = " + obj[i] + "\n");
if (stroka.length<100) {document.getElementById("info2").value += stroka} else
{document.getElementById("info2").value += stroka.slice(0,100)+"...\n"};
}
}
document.ondblclick = clickHandler;
document.writeln('<textarea ID="info2" rows=20 cols=30></textarea>');

joshie76

9:35 am on Mar 18, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



>> Now my site looks good both in 640x480 and in 1200x1600.

Provided the user has Scripting enabled - you should probably try turning it off in your browser as a test to see what happens, just in case.

Kibi

9:56 am on Mar 18, 2002 (gmt 0)

10+ Year Member



Yes - I'm using trick with header/footer, that could results to ugly design in non-JavaScript browsers or while JavaScript is turns off.

Anouther way is using SSI, but I have no free access to the server with SSI.

Anyway, I need include recognition of JavaScript version supported by the browser and apply fewer complex design without dynamic resizeing for NC5 or IE4, for example.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month