Malkalypse wrote:[color=blue]
> Okay, I managed to get my page to the following, and it works just fine
> in IE, but Mozilla returns a blank page, and the following error in the
> Javascript console:
>
> Error: uncaught exception: [Exception... "Not enough arguments
> [nsIDOMNodeList.item]" nsresult: "0x80570001
> (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame ::
> file:///C:/Documents%20and%20Settings/Kevin%20Mackey/Desktop/javascript/growtable_test.html
> :: buildTable :: line 25" data: no]
>
> I think I have a vague idea what it's talking about, but I'm not sure
> how to go about fixing it.. any help would be appreciated ^^
>
>
> PHP code:
> --------------------
> <html>
> <head>
> <script language="javascript">[/color]
How many times does it have to be said? Get rid of 'language' and use
the required 'type' attribute.
<script type="text/javascript">
[color=blue]
> var maintable = document.createElement("table");
> var maintable_body = document.createElement("tbody");
> var mt_height;
> var mt_width;
>
> function resizeTable() {
> if (document.body.clientHeight > (document.body.clientWidth*.714))[/color]
clientHeight/Width is only supported by Mozilla in quirks mode, use
self.innerHeight/Width and feature test as per:
<URL:http://www.quirksmode.org/viewport/compatibility.html>
Here's a version adapted to your page:
function resizeTable() {
var x,y;
if (self.innerHeight) { // all except Explorer
x = self.innerWidth;
y = self.innerHeight;
} else if (document.documentElement // Explorer 6 Strict Mode
&& document.documentElement.clientHeight) {
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
x = document.body.clientWidth;
y = document.body.clientHeight;
}
...
[color=blue]
> {
> maintable.setAttribute("width", (document.body.clientWidth)*.975);[/color]
Below is a method to remove reliance on clientWidth, plus you
shouldn't call it so often for performance reasons. I wouldn't use
decimal values without a number before the '.' for maintenance
reasons (i.e. .975 becomes 0.975).
[color=blue]
> maintable.setAttribute("height", (document.body.clientWidth*.714)*.975);
> }
> else
> {
> maintable.setAttribute("width", (document.body.clientHeight*1.4)*.975);
> maintable.setAttribute("height", (document.body.clientHeight)*.975);
> }
> }[/color]
The use of setAttribute is discouraged, I've replaced it below but
you may want to keep it. At least replace all those calls to
document.body - following on from the suggested script:
if (y > (x*.714)) {
maintable.style.width = x*0.975;
maintable.style.height = x*0.714*0.975;
} else {
maintable.style.width = y*1.4*0.975;
maintable.style.height = y*0.975;
}
}
[color=blue]
> </script>
>
> <script>[/color]
No need for multiple script elements, put them all in one. And
script must have a type attribute.
[color=blue]
> function buildTable(innerTable) {
> var mybody = document.getElementsByTagName("body").item();[/color]
You should use an index value in '.item()', either;
var mybody = document.getElementsByTagName("body").item(0);
or
var mybody = document.getElementsByTagName("body")[0];
will do the trick, but above you've just used document.body, so why
not use it again?
var mybody = document.body;
[color=blue]
> var myrow = document.createElement("TR");
> var mydata = document.createElement("TD");
>
> mybody.appendChild(maintable);
> maintable.setAttribute("border","1");
> maintable.setAttribute("id","maintable");
> maintable.appendChild(maintable_body);
> maintable_body.appendChild(myrow);
> myrow.appendChild(mydata);
> mydata.setAttribute("id","inner_content");[/color]
Again, you can address these properties directly. I'd also change
their attributes before adding them to the document. Just my pref.
mydata.id = 'inner_content';
myrow.appendChild(mydata);
maintable_body.appendChild(myrow);
maintable.style.border = '1px solid purple';
maintable.id = maintable;
maintable.appendChild(maintable_body);
mybody.appendChild(maintable);
Note setting of all border properties with style.border. Should also
test for style before using it, but since this is just a test...
[color=blue]
>
> resizeTable();
> document.getElementById("inner_content").innerHTML =innerTable;[/color]
Using innerHTML to build a table this way is nasty - it is MS
proprietary (though widely supported) - and its use with tables is
discouraged. You should use DOM methods as you have above. And using
getElementById without feature testing is not advised.
[color=blue]
> }
> var tableData = "<table height=50% width=50% border=5 bgcolor=lightgrey> <tr> <td align=center> <b>TEST<b> </td> </tr> </table>"[/color]
You still need to create valid markup when you create the table. You
should quote attributes, and things like bgcolor & align are
depreciated, use CSS.
[color=blue]
> </script>
> </head>
>
> <body onload='buildTable(tableData)'>
> <script>
> window.onresize = resizeTable;
> </script>
>
> </body>
> </html>
> --------------------
>
>[/color]
As a last note, as soon as you add a doctype and IE or Firefox stop
using quirks mode, the results are very different (including between
browsers). Just try adding this before the firs html tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
You may get away with it with transitional. Here's the full script:
<html>
<head>
<script type="text/javascript">
var maintable = document.createElement("table");
var maintable_body = document.createElement("tbody");
var mt_height;
var mt_width;
function resizeTable() {
var x,y;
if (self.innerHeight) { // all except Explorer
x = self.innerWidth;
y = self.innerHeight;
} else if (document.documentElement // Explorer 6 Strict Mode
&& document.documentElement.clientHeight) {
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
x = document.body.clientWidth;
y = document.body.clientHeight;
}
if (y > (x*.714)) {
maintable.style.width = x*0.975;
maintable.style.height = x*0.714*0.975;
} else {
maintable.style.width = y*1.4*0.975;
maintable.style.height = y*0.975;
}
}
function buildTable(innerTable) {
var mybody = document.body;
var myrow = document.createElement('TR');
var mydata = document.createElement('TD');
mydata.id = 'inner_content';
myrow.appendChild(mydata);
maintable_body.appendChild(myrow);
maintable.style.border = '1px solid purple';
maintable.id = 'maintable';
maintable.appendChild(maintable_body);
mybody.appendChild(maintable);
resizeTable();
document.getElementById('inner_content').innerHTML =innerTable;
}
var tableData = '<table height="50%" width="50%" border="5" '
+ 'bgcolor="lightgrey"> <tr> <td align="center"> <b>TEST<b>'
+ ' </td></tr></table>';
</script>
</head>
<body onload="buildTable(tableData)">
<script>
window.onresize = resizeTable;
</script>
</body>
</html>
--
Rob
