Forum Moderators: open
"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.
document.getElementById('cell').height
will return the current value which you can stick into a var etc..
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
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...]
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>');
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.
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.
