homepage Welcome to WebmasterWorld Guest from 54.226.180.223
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
How to change size of the cell of table in JavaScrpt?
Help wanted (see sbj)
Kibi




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

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




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

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




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

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

joshie76




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

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




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

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

joshie76




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

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




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

Yah! it's work, thx a lot!

Kibi




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

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




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

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




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

>> 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




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved