made 2 similar scripts, why does one work, 1 not?

@MalkalypseApr 02.2005

Hello, a little background info if you want it, or you can skip down to look at the code.
I was looking for a way to dynamically scale content, and my initial solution (partly taken from various places, partly trial and error), was script #1. And it worked fine, but I felt it was a bit clunky, and would be hard to do some of the things I wanted with it down the line (i.e. nested tables and such).

So I worked up script #2, but it doesn’t scale with the window.onresize, and doesn’t even seem to refresh properly!

If someone could either show me how to get script #2 working, or a way to make script #1 something easier to work with, I would be extremely appreciative! Advance warning, I’m a bit of a Javascript newbie, so if you see anything that makes you cringe or shake your head, please let me know! :rolleyes:

SCRIPT #1

[code=php] <html> <head> <script language=”javascript”> var maintable = document.createElement(“table”); var maintable_body = document.createElement(“tbody”); function buildTable() { var mybody = document.getElementsByTagName(“body”).item(); var myrow = document.createElement(“TR”); var mydata = document.createElement(“TD”); myrow.appendChild(mydata); maintable_body.appendChild(myrow); mybody.appendChild(maintable); maintable.appendChild(maintable_body); maintable.setAttribute(“border”,”1″); maintable.setAttribute(“id”,”maintable”);

if (document.body.clientHeight > (document.body.clientWidth*.714)) { maintable.setAttribute(“width”, (document.body.clientWidth)*.975); 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); } } function resizeTable() { if (document.body.clientHeight > (document.body.clientWidth*.714)) { maintable.setAttribute(“width”, (document.body.clientWidth)*.975); 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); } } </script> </head>

<body onload=buildTable() scroll=”no”> <script> window.onresize = resizeTable; </script> </body> </html> [/code]

SCRIPT #2

[code=php] <html> <head> <script language=”javascript”>

var mt_height; var mt_width;

// determine height and width for main table function sizeTable() { if (document.body.clientHeight > (document.body.clientWidth*.714)) { mt_width = (document.body.clientWidth)*.975; mt_height = (document.body.clientWidth*.714)*.975; } else { mt_width = (document.body.clientHeight*1.4)*.975; mt_height = (document.body.clientHeight)*.975; } }

//build main table function buildTable() { sizeTable(); document.write(“<table border=2 height=”+mt_height+” width=”+mt_width+”>”); document.write(“<tr>”); document.write(“<td bgcolor=darkgray></td>”); document.write(“<td bgcolor=lightgrey></td>”); document.write(“</tr>”); document.write(“</table>”); } </script> </head>

<body onload=buildTable() scroll=”no”> <script> window.onresize = buildTable; </script> </body> </html> [/code]

to post a comment

JavaScript

44 Comments(s) _↴

@96turnerriApr 02.2005 — #function sizeTable() {

if (document.body.clientHeight > (document.body.clientWidth*.714))

{

mt_width = (document.body.clientWidth)*.975;

mt_height = (document.body.clientWidth*.714)*.975;

}

else

{

mt_width = (document.body.clientHeight*1.4)*.975;

mt_height = (document.body.clientHeight)*.975;

}

alert(mt_width.'n'.mt_height);

}

to check you are getting the correct values for the height and width

@MalkalypseauthorApr 02.2005 — #Thanks for the suggestion.. I tried this using

alert('mt_width='+mt_width+', mt_height='+mt_height);

(the code you gave me gave the errors "Expected identifier, ;buildTable; is undefined, and Object expected... no idea why ? )

and the values do come back correct. The page loads correctly initially, but it won't refresh, and won't work with the window.onresize script (I don't get an alert in these cases either.) Hitting enter in the URL bar seems to reload the page correctly, but refresh doesn't, and the page won't resize.

@96turnerriApr 02.2005 — #yeah this

<i>
 </i>&lt;body onload=buildTable() scroll="no"&gt;
 &lt;script&gt;
 window.onresize = buildTable;

<i>
 </i>&lt;body onload="buildTable();" scroll="no"&gt;
 &lt;script type="text/javascript"&gt;
 window.onresize = buildTable();

@MalkalypseauthorApr 03.2005 — #Unfortunately, changing the code as you suggested doesn't solve my problem, and changing

[CODE]window.onresize = buildTable;[/CODE]

to

[CODE]window.onresize = buildTable();[/CODE]

causes it to return an Error: Not Implemented. ?

edit: Just for the heck of it, I tried using window.onresize = "buildTable();" as well.. that no longer returns an error, but neither does it solve my problem. :rolleyes:

@JonaApr 03.2005 — #[font=trebuchet ms]The reason that [i]window.onresize = buildTable();[/i] does not work is because when you add the parentheses to the end, JavaScript sends a call to the function with that name. Instead, [i]window.onresize = buildTable;[/i] should work because you are assigning the internal code within [i]buildTable[/i] to the [i]onresize[/i] method. Thus:[/font]

<i>
 </i>function buildTable(){
 alert ('Boo');
 }
 
 window.onresize = buildTable(); // tries to assign an event to a function call, which is impossible
 
 window.onresize = buildTable; // assigns an event to the internal code of the function named "buildTable"
 
 window.onresize = function() { alert("Boo"); } // creates a function code on-the-fly and assigns it to the event
 
 var buildTable = function(){ alert("Boo"); }
 /* The above is the same as the following: */
 function buildTable(){ alert("Boo"); }

[font=trebuchet ms]Now, to your original problem, would you be so kind as to point out why you're doing all of this with JavaScript?[/font]

<i>
 </i>&lt;style type="text/css"&gt;&lt;!--
 table {
 width: 80%;
 margin: 0 auto;
 border: solid 1px #000 collapse;
 }
 
 tr, th, td {
 width: 100%;
 border: solid 1px #000 collapse;
 }
 --&gt;&lt;/style&gt;

<i>
 </i>&lt;table&gt;
 &lt;tr&gt;
 &lt;th&gt;Header&lt;/th&gt;
 &lt;th&gt;Header&lt;/th&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;Content&lt;/td&gt;
 &lt;td&gt;Content&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;

@MalkalypseauthorApr 03.2005 — #Now, to your original problem, would you be so kind as to point out why you're doing all of this with JavaScript?[/QUOTE]

If you test out script #1 from my initial post, you'll see what I am trying to do. The result I am looking for is page content that scales and maintains its original aspect ratio (i.e. like Flash content can automatically -- but I don't want to use Flash for this.)

Anyway, how do I simply call the function, rather than creating one or assigning an event to one? ?

edit: I've retooled script #1 a bit, since that's the one that works, but I think you'll see why I'd rather use the second version (if possible)

[code=php]
 <html>
 <head>
 <script language="javascript">
 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))
 {
 maintable.setAttribute("width", (document.body.clientWidth)*.975);
 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);
 }
 } 

 function buildTable() {
 var mybody = document.getElementsByTagName("body").item();
 
 var myrow = document.createElement("TR");
 var mydata = document.createElement("TD");
 var nestedtable = document.createElement("table");
 var nestedtable_body = document.createElement("tbody");
 
 var nestedrow = document.createElement("TR");
 var nesteddata = document.createElement("TD");
 
 var mytext = currenttext=document.createTextNode("Text");
 
 mybody.appendChild(maintable);
 maintable.setAttribute("border","1");
 maintable.setAttribute("id","maintable");
 maintable.appendChild(maintable_body);
 maintable_body.appendChild(myrow);
 myrow.appendChild(mydata);
 
 // This gets rather tedious quite fast, and isn't very efficient
 // as far as file size, etc..
 
   mydata.appendChild(nestedtable);
   nestedtable.setAttribute("border","5");
   nestedtable.setAttribute("id","nt_1");
   nestedtable.setAttribute("width","50%");
   nestedtable.setAttribute("height","50%");
   nestedtable.setAttribute("bgcolor","lightgrey");
   nestedtable.appendChild(nestedtable_body);
   nestedtable_body.appendChild(nestedrow);
   nestedrow.appendChild(nesteddata);
   nesteddata.setAttribute("align","center");
   nesteddata.appendChild(mytext);
 
 // ad nauseum, and this is just what it takes to get set up.
 // I'd REALLY like to get script #2 working if at all possible.
 
 resizeTable();
 }
 </script>
 </head>
 
 <body onload=buildTable() scroll="no">
 
 <script>
 window.onresize = resizeTable;
 </script>
 
 </body>
 </html>
 [/code]

@JonaApr 03.2005 — #[font=trebuchet ms]You are not assigning an event to a function, rather you are assigning a function to an event. When the even is triggered, the function is executed. The way you're doing it, with [i]onresize = resizeTable[/i], is perfectly fine. I was merely explaining why [i]onresize = resizeTable()[/i] did not work.[/font]

@JonaApr 03.2005 — #[font=trebuchet ms]Also, it appears your second script doesn't work because, unlike your first one, it uses [i]document.write[/i]. And you'll find that [i]document.write[/i] clears the page to write to it, instead of appending to the current page or a specific element (as your first script does). You should try using your first code, and just try optimizing its size and efficiency instead.[/font]

@MalkalypseauthorApr 03.2005 — #Well, neither onresize = resizeTable or onresize = resizeTable() are working, actually...

I was using document.write because of its ability to clearly and simply generate HTML, and having it replace the page each time it's called really wouldn't be a problem since all the graphics would still in the user's cache.

And, for the time being at least, I am going with script #1. Unfortunately, you can see where that's taking me. I had a notion that might help me, which I mentioned in a new thread (called "Is there anything like a "createTableNode"?") The innerHTML thing might work, I'll just have to see..

@JonaApr 03.2005 — #[font=trebuchet ms]The innerHTML property should be avoided whenever possible. In some cases, I would consider it acceptable, but I usually disagree with it.

The document.write property doesn't just refresh the page with new content, it [i]replaces[/i] everything on the page with the plain text or HTML that it outputs. Go to yahoo.com and put [i]javascript:void(document.write('hello, world'));[/i] in the address bar and hit enter. You'll see what I mean then.

The [i]onresize= resizeTable[/i] worked for me and should work for you. If you got an error, what is the error?[/font]

@JPnycApr 03.2005 — #My take has always been, the simplest method that achieves the objective (assuming it works in all browsers) is the best one. With innerHTML I suppose you run [I]some[/I] small risk that support for it will be dropped in future, since it's not part of the w3c standard.

@JonaApr 03.2005 — #[font=trebuchet ms]I doubt that it will be unsupported in future versions of browsers that already support it, because browsers have a tendency to strive for backwards-compatibility. I do not avoid [i]innerHTML[/i] for compatibility purposes, because W3 standards are just as much, if not less, supported. I avoid [i]innerHTML[/i] because it isn't a W3 standard, and W3 standards should be adhered to whenever possible (or at least practical). It's just part of following the rules.[/font]

@MalkalypseauthorApr 03.2005 — #Jona:

I think I understand what you mean now about the write.document issue... when I checked the view-->source of the page directly from my browser, it showed

<table border=2 height=608.4350999999999 width=852.15><tr><td bgcolor=darkgray></td><td bgcolor=lightgrey></td></tr></table>

.... and that's all. That explains why nothing worked after the initial page load, I guess! onresize=resizeTable was only failing to work with script #2 (the one that used document.write), and due to the problem above, that's not much of a surprise.

So, back to tweaking script #1. Am I stuck creating a new variable for each and every nested table, tbody, TR, and TD that is going to make up the page?? There's got to be a better way. What do you recommend in the way of creating a normal bunch of tables (using %'s to set their height and width) and inserting them inside the scaleable one?

@JonaApr 03.2005 — #[font=trebuchet ms]You can build a function and global table to permit you to create any number of nested tables. Making it extensive will be difficult, though, as you'll have to setup a clean way to send any number of variables to the function for attribute values, [i]and[/i] specify what tag those attributes are for. In short, innerHTML may be the better option here.[/font]

@MalkalypseauthorApr 03.2005 — #Taking into consideration the pros and cons, I've decided to risk using innerHTML, at least for now, and have a working prototype. It works like so:

[code=php]
 <html>
 <head>
 <script language="javascript">
 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))
 {
 maintable.setAttribute("width", (document.body.clientWidth)*.975);
 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);
 }
 }
 </script>
 
 <script>
 function buildTable(innerTable) {
 var mybody = document.getElementsByTagName("body").item();
 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");
 
 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>
 [/code]

If anyone can think of an approximately similar way to do it that doesn't rely on innerHTML, I'm all ears.

Thanks everyone for your input, I'll be sure to invite you all to see the finished page when it's ready! ?

@MalkalypseauthorApr 05.2005 — #Okay, I just realized that while the page works fine in IE, Mozilla shows a blank page, giving the following explanation 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][/QUOTE]

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 ^{^^{^}}

@Khalid_AliApr 05.2005 — #this means you are referencing an element which is not there.

if you look into your code you will see the following line

[b]var mybody = document.getElementsByTagName("body")[i].item();[/i][/b]

see that you are calling function item() but you are not telling it which index value from the array and thats your problem.Just enter 0(zero) in the parenthesis and it will work

[b]var mybody = document.getElementsByTagName("body")[i].item(0);[/i][/b].

@MalkalypseauthorApr 05.2005 — #Thank you! I'm SO glad that was a simple solution.. it's always nice when you don't have to go back to square one with these things ?

@MalkalypseauthorApr 10.2005 — #Hm, veering off the original topic here a bit, but someone on another forum helped my adjust my code, and I've worked on getting the site format to where I want it. The whole thing is shown below.

You'll notice in the part where the table is being built, I have the table sizes separated out by "+[#]%+"... well, I have discovered that nested tables don't like to work with % sizes. I want to go back and replace them with values based on the "w" and "h" variables defined in the "defineScale" function. So, my next question to anyone here is, how to go about changing the code so I can do that? (i.e. right now they only exist within that function, and can't be accessed anywhere else).

Once this is done, I -think- the page will be set from a programming standpoint.

[code=php]<html>
 <head>
 <script type="text/javascript">
 
 var maintable = document.createElement("table");
 var maintable_body = document.createElement("tbody");
 var mt_height;
 var mt_width;
 
 var w,h;
 
 function defineScale() {
 if (self.innerHeight) { // all except Explorer
 w = self.innerWidth;
 h = self.innerHeight;
 } else if (document.documentElement // Explorer 6 Strict Mode
 && document.documentElement.clientHeight) {
 w = document.documentElement.clientWidth;
 h = document.documentElement.clientHeight;
 } else if (document.body) { // other Explorers
 w = document.body.clientWidth;
 h = document.body.clientHeight;
 }
 }
 
 function resizeTable() {
 defineScale();
 if (h > (w*.714)) {
 maintable.style.width = (w*0.975);
 maintable.style.height = (w*0.714)*0.975;
 } else {
 maintable.style.width = (h*1.4)*0.975;
 maintable.style.height = (h*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 width='+'100%'+' height='+'100%'+' border="1" cellspacing="0" cellpadding="0">'
 + '<tr height='+'79%'+'>'
 +   '<td width='+'71%'+'>'
 +     '<table width='+'100%'+' height='+'100%'+' border="1" cellspacing="0" cellpadding="0">'
 +       '<tr height='+'8%'+'>'
 +         '<td>menu</td>'
 +       '</tr>'
 +       '<tr height='+'60%'+'>'
 +         '<td>'
 +           '<table width='+'100%'+' height='+'100%'+' border="1" cellspacing="0" cellpadding="0">'
 +             '<tr>'
 +               '<td width='+'51%'+'>image</td>'
 +               '<td width='+'45%'+'>text</td>'
 +               '<td width='+'4%'+'>.</td>'
 +             '</tr>'
 +           '</table>'
 +         '</td>'
 +       '</tr>'
 +       '<tr height='+'32%'+'>'
 +         '<td>panel</td>'
 +       '</tr>'
 +     '</table>'
 +   '</td>'
 +   '<td width='+'29%'+' rowspan=2>side</td>'
 + '</tr>'
 + '<tr height='+'21%'+'>'
 +   '<td>bottom</td>'
 + '</tr>' +
 '</table>'
 
 </script>
 </head>
 
 <body onload="buildTable(tableData)">
 
 <script>
 window.onresize = resizeTable;
 </script>
 
 </body>
 </html>[/code]

edit: it occured to me to put the tableData variable inside of a function that calls the defineScale function.. but then I got lost trying to figure out how to access it again when it came to buildTable(tableData)... I don't know, maybe I'm missing something obvious, or maybe I'm just bad at keeping track of things ?

@JonaApr 10.2005 — #[font=Trebuchet MS]I don't understand your question. The [i]defineScale[/i] function sets the global variables which can be referenced from any other function, so you always have access to the "w" and "h" variables (providing the [i]defineScale[/i] function has already run at least once).[/font]

@MalkalypseauthorApr 10.2005 — #The defineScale function sets the global variables which can be referenced from any other function, so you always have access to the "w" and "h" variables (providing the defineScale function has already run at least once).[/QUOTE]

Ah, okay.. at first I thought that wasn't working, because when I added these..

body onload="buildTable(tableData)">

<script>

alert(w);

alert(h);

window.onresize = resizeTable;

</script

..both alerts came back as undefined. But if I add in

defineScale();

alert(w);

alert(h);

then the alerts show the values. HOWEVER, I am still unable to figure out how to force the "order of operations" as it were, so that "w" and "h" have values for my var tableData. As it is, when I try typing in

'<table width='+'w'+' height='+'h'+'....

the result comes back as effectively 0. Please advise :p

@JonaApr 10.2005 — #[font=Trebuchet MS]Put [i]defineScale();[/i] just before your [i]var tableData = '...';[/i] and then try.[/font]

@MalkalypseauthorApr 10.2005 — #Put defineScale(); just before your var tableData = '...'; and then try.[/QUOTE]

hmm.. okay, well, that didn't have any effect. Good idea though.

Here's something interesting. Someone pointed out to me the doctype header

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">[/CODE]

...now, once again I understand the concept, if not the details.. and not sure if this is a Good Thing or a Bad Thing (personally I like the idea, but for all I know someone may explain to me why I shouldn't use it).

Anyway, when I use this, the table loads up using the initial 'w' and 'h' variables. Unfortunately, I still can't think of a way to make it dynamic.

I also noticed that since I added the doctype, there is a tendency for it to crash every so often as I resize my page. (Maybe it's a Bad Thing after all? :eek: I'm still hoping that once I get everything working, it will stop doing that...)

@MalkalypseauthorApr 11.2005 — #I was just thinking.. am I going to have to abandon working with innerHTML and go back to creating a separate variable for each and every table element? ?

@JonaApr 11.2005 — #[font=Trebuchet MS]I doubt that will make any difference, since browsers that understand innerHTML will understand it no matter what mode (standards or quirks) they're in. In fact, I doubt your doctype is the problem. You're going to [b]have[/b] to have it anyway, so I would disregard it as the source of the problem. Instead, we must assume that the script is at fault.[/font]

@JonaApr 11.2005 — #[font=Trebuchet MS]I tried this and while it doesn't work fine because the width and heights aren't defined in percentages, there are no errors and "w" and "h" are defined.[/font]

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;
 
 var maintable = document.createElement("table");
 var maintable_body = document.createElement("tbody");
 var mt_height;
 var mt_width;
 
 var w,h;
 
 function defineScale() {
 if (self.innerHeight) { // all except Explorer
 w = self.innerWidth;
 h = self.innerHeight;
 } else if (document.documentElement // Explorer 6 Strict Mode
 &amp;&amp; document.documentElement.clientHeight) {
 w = document.documentElement.clientWidth;
 h = document.documentElement.clientHeight;
 } else if (document.body) { // other Explorers
 w = document.body.clientWidth;
 h = document.body.clientHeight;
 }
 }
 
 function resizeTable() {
 defineScale();
 if (h &gt; (w*.714)) {
 maintable.style.width = (w*0.975);
 maintable.style.height = (w*0.714)*0.975;
 } else {
 maintable.style.width = (h*1.4)*0.975;
 maintable.style.height = (h*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;
 }
 
 defineScale();
 var tableData =
 '&lt;table width='+w+' height='+h+' border="1" cellspacing="0" cellpadding="0"&gt;'
 + '&lt;tr height='+'79%'+'&gt;'
 +   '&lt;td width='+'71%'+'&gt;'
 +     '&lt;table width='+'100%'+' height='+'100%'+' border="1" cellspacing="0" cellpadding="0"&gt;'
 +       '&lt;tr height='+'8%'+'&gt;'
 +         '&lt;td&gt;menu&lt;/td&gt;'
 +       '&lt;/tr&gt;'
 +       '&lt;tr height='+'60%'+'&gt;'
 +         '&lt;td&gt;'
 +           '&lt;table width='+'100%'+' height='+'100%'+' border="1" cellspacing="0" cellpadding="0"&gt;'
 +             '&lt;tr&gt;'
 +               '&lt;td width='+'51%'+'&gt;image&lt;/td&gt;'
 +               '&lt;td width='+'45%'+'&gt;text&lt;/td&gt;'
 +               '&lt;td width='+'4%'+'&gt;.&lt;/td&gt;'
 +             '&lt;/tr&gt;'
 +           '&lt;/table&gt;'
 +         '&lt;/td&gt;'
 +       '&lt;/tr&gt;'
 +       '&lt;tr height='+'32%'+'&gt;'
 +         '&lt;td&gt;panel&lt;/td&gt;'
 +       '&lt;/tr&gt;'
 +     '&lt;/table&gt;'
 +   '&lt;/td&gt;'
 +   '&lt;td width='+'29%'+' rowspan=2&gt;side&lt;/td&gt;'
 + '&lt;/tr&gt;'
 + '&lt;tr height='+'21%'+'&gt;'
 +   '&lt;td&gt;bottom&lt;/td&gt;'
 + '&lt;/tr&gt;' +
 '&lt;/table&gt;'
 
 alert(tableData);
 
 &lt;/script&gt;
 &lt;/head&gt;
 
 &lt;body onload="buildTable(tableData)"&gt;
 
 &lt;script&gt;
 window.onresize = resizeTable;
 &lt;/script&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@MalkalypseauthorApr 11.2005 — #That's fine and all.. I have it working as well, but what I meant by the problem with innerHTML is, you will notice that while the outer table (with the purple border) can be changed with the onresize, I can't think of a way to do that for the innerHTML contents. Even though they are using the "same" w and h variables, the data is apparently only being loaded the one time.

Any suggestions?

@JonaApr 11.2005 — #[font=Trebuchet MS]I beg your pardon, but did I miss something important or is your problem solved? If it isn't, you sound like you're giving up. I wouldn't do that if I were you. You might put it off for a while until you are more experienced with JavaScript programming, but don't give up. ? [/font]

@MalkalypseauthorApr 11.2005 — #No no, sorry.. I accidentally hit "submit reply" before I meant to. :rolleyes:

I went back and changed the message to what I meant it to say.

@JonaApr 11.2005 — #[font=Trebuchet MS]If you use the same w/h variables for the inner tables, why do you even have the outer table? For each nested table, you should decrease the w/h based on some sort of ratio, don't you think?[/font]

@MalkalypseauthorApr 11.2005 — #Originally, I was going to have my outer table defined by the width or height of the browser, and the values in the nested tables set up as percentages. Unfortunately, I discovered that this didn't work. My intention now is to do something much like you are saying, i.e.

<tr height='+'(h*.21)'+'>

<td><img src=bottom_bg.jpg height='+(h*.21)+' width='+(w*.71)+'></td>

</tr>

Unfortunately, as I said, the values remain set at the size at which the page was initially loaded. I need them to be able to scale with the browser like the outer table does.

@JonaApr 11.2005 — #[font=trebuchet ms]I see. I would adjust the way you're resizing the tables.[/font]

<i>
 </i>function resizeTable() {
 defineScale();
 var tableObj = document.getElementById('inner_content');
 if (h &gt; (w*.714)) {
 tableObj.style.width = (w*0.975);
 tableObj.style.height = (w*0.714)*0.975;
 } else {
 tableObj.style.width = (h*1.4)*0.975;
 tableObj.style.height = (h*0.975);
 }
 }

@MalkalypseauthorApr 11.2005 — #I'm sorry, I'm afraid I'm not sure where you're going with this. Was I meant to change something else in accordance with the new definitions?

For reference, the code I'm looking at now is

[code=php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
 
 <html>
 <head>
 <script type="text/javascript">
 
 var maintable = document.createElement("table");
 var maintable_body = document.createElement("tbody");
 var mt_height;
 var mt_width;
 
 var w,h;
 
 function defineScale() {
 
 if (self.innerHeight) { // all except Explorer
 w = self.innerWidth;
 h = self.innerHeight;
 } else if (document.documentElement // Explorer 6 Strict Mode
 && document.documentElement.clientHeight) {
 w = document.documentElement.clientWidth;
 h = document.documentElement.clientHeight;
 } else if (document.body) { // other Explorers
 w = document.body.clientWidth;
 h = document.body.clientHeight;
 }
 }
 
 function resizeTable() {
 defineScale();
 var tableObj = document.getElementById('inner_content');
 if (h > (w*.714)) {
 tableObj.style.width = (w*0.975);
 tableObj.style.height = (w*0.714)*0.975;
 } else {
 tableObj.style.width = (h*1.4)*0.975;
 tableObj.style.height = (h*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;
 }
 
 defineScale();
 var tableData =
 '<table width='+w+' height='+h+' border="1" cellspacing="0" cellpadding="0">'
 + '<tr height='+(h*.79)+'>'
 +   '<td width='+(w*.71)+'>'
 +     '<table width='+(w*.71)+' height='+'100%'+' border="1" cellspacing="0" cellpadding="0">'
 +       '<tr height='+(h*.07)+'>'
 +         '<td>menu</td>'
 +       '</tr>'
 +       '<tr height='+(h*.47)+'>'
 +         '<td>'
 +           '<table width='+(w*.71)+' height='+(h*.47)+' border="1" cellspacing="0" cellpadding="0">'
 +             '<tr>'
 +               '<td width='+(w*.36)+'>image</td>'
 +               '<td width='+(w*.32)+'>text</td>'
 +               '<td width='+(w*.03)+'>.</td>'
 +             '</tr>'
 +           '</table>'
 +         '</td>'
 +       '</tr>'
 +       '<tr height='+(h*.25)+'>'
 +         '<td>panel</td>'
 +       '</tr>'
 +     '</table>'
 +   '</td>'
 +   '<td width='+(w*.29)+' rowspan=2>side</td>'
 + '</tr>'
 + '<tr height='+(h*.21)+'>'
 +   '<td></td>'
 + '</tr>' +
 '</table>'
 
 </script>
 </head>
 
 <body onload="buildTable(tableData);">
 <script>
 window.onresize = resizeTable;
 </script>
 </body>
 </html>[/code]

@JonaApr 11.2005 — #[font=Trebuchet MS]I think part of the problem I'm having helping you is that I don't know where I'm going either. I keep referring back to the post where you stated the initial problem with the resizing issue, but I can't seem to focus very well on it. The idea of what I'm trying to program is too vague for me to actually program it. Everything seemed to work perfectly fine after Khalid helped you last, if I recall correctly. When you chose to move from percentages to pixels, you stated that the inner tables don't like to behave how you want them to when you use percentages. (Apparently, they don't like to do that with pixels, either!) I didn't see any problem with them, though. If you could describe your problem again and some steps to reproduce it, perhaps I can refocus and get a better idea of just what I'm trying to program here...[/font]

@MalkalypseauthorApr 11.2005 — #Okay,

What I want here, is a page that can be rescaled with the browser. Like a Flash page does.

When I was using percentages for the inner tables, they worked fine until I started trying to put my images into them. Then they got all wonky, expanding way off to the right and refusing to resize properly.

I decided to try working the inner tables the same way I was working the outer table (in the sense of basing the height and width on the established w and h variables), but while the outer table changes size as the browser size is adjusted, the inner tables remain exactly as they are when the page initially loads.

@JonaApr 11.2005 — #[font=Trebuchet MS]Can I see an example of how it refused to resize properly when you used images and percentages?[/font]

@MalkalypseauthorApr 12.2005 — #I suppose I should have done this earlier. Here are two versions of my percentage-based attempt.. the problems should be fairly clear. If the problem can be fixed using just the %'s, so much the better! I'm ready to stop messing around with this page and move on to other things :rolleyes:

[upl-file uuid=82e4eb55-ea05-4811-83f3-35a666d0c09f size=82kB]samples.zip[/upl-file]

@MalkalypseauthorApr 12.2005 — #Oddly, I just noticed that when I add

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

to the top of the html document, it appears to break the functionality completely.. WEIRD.

@JonaApr 12.2005 — #[font=trebuchet ms]Are you using Internet Explorer? Last I checked, it made no difference at all for me... Of course, that's probably because I'm using a [url=http://www.getfirefox.com/]real browser[/url]. ? [/font]

@MalkalypseauthorApr 12.2005 — #Adding the doctype stops the resize functionality from working in both IE and Firefox where I'm sitting.

I have both browsers. Since 90% of users view web pages on IE, I generally try to get it working on Explorer first, and then get it working with Mozilla.

Oddly, I just noticed that the "problem_width.html" file snaps to the results I want, IN Firefox AFTER resizing. It still comes up wonky on the inital page load, though, and the width is stretched way out in Explorer. But, my guess would be that that's the closest to a functioning version I have.

If you can make it work, I'll give you a link on the site if you want one :p

-----
edit: I've included the results I'm getting with and without the doctype, in both Firefox and I.E. as screencaps.

[upl-file uuid=451aa1a1-d9bd-4a9d-bd73-e6593c252ac3 size=72kB]results.zip[/upl-file]

@JonaApr 12.2005 — #[font=Trebuchet MS]The [i]onresize[/i] event isn't triggered until you release the mouse after dragging it to the size you want. Just in case you didn't know that (it sounded like you were surprised when you said "AFTER resizing").

I'm going to try to work on it when I get a chance. I downloaded the attachment (the new one) already, but won't have a chance to work on it probably for a few hours.[/font]

@MalkalypseauthorApr 12.2005 — #No no, I know how the resizing works.. it's just there's a lot of things that are affecting what the page looks like right now (browser, doctype or no doctype, whether or not the browser has been resized..) I was just trying to draw attention to the fact that the only time the page in question looks right when it's loaded up on Firefox, and the page has been manually resized at least once. On it's initial load, it's still screwy, which is what caused me to miss the fact that it works at all the first time around.

@MalkalypseauthorApr 16.2005 — #I was wondering if I should post this to a new thread, since the problem I'm having now no longer really deals with the one I was having to start with.. but in the meantime, as I have the code working for the HEIGHT aspect of IE, and BOTH aspects of Firefox after resizing, I think I am VERY close to cracking this nut. I DO still need whatever help anyone can give me to figure out my final problem though.

The code as it stands (closest one to working) is

[code=php]<head>
 <script type="text/javascript">
 
 var maintable = document.createElement("table");
 var maintable_body = document.createElement("tbody");
 var mt_height;
 var mt_width;
 
 var w,h;
 
 function defineScale() {
 
 if (self.innerHeight) { // all except Explorer
 w = self.innerWidth;
 h = self.innerHeight;
 } else if (document.documentElement // Explorer 6 Strict Mode
 && document.documentElement.clientHeight) {
 w = document.documentElement.clientWidth;
 h = document.documentElement.clientHeight;
 } else if (document.body) { // other Explorers
 w = document.body.clientWidth;
 h = document.body.clientHeight;
 }
 }
 
 function resizeTable() {
 
 defineScale();
 if (h > (w*.714)) {
 maintable.style.width = (w*0.975);
 maintable.style.height = (w*0.714)*0.975;
 } else {
 maintable.style.width = (h*1.4)*0.975;
 maintable.style.height = (h*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 width="100%" height="100%" width="100%" border="1" cellspacing="0" cellpadding="0">'
 + '<tr height="79%">'
 +   '<td width="71%">'
 +     '<table width="100%" height="100%" width="100%" border="1" cellspacing="0" cellpadding="0">'
 +       '<tr height="8%">'
 +         '<td><img src=menu_bg.jpg height="100%" width="100%" border=0></td>'
 +       '</tr>'
 +       '<tr height="60%">'
 +         '<td>'
 +           '<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">'
 +             '<tr>'
 +               '<td width="51%"><img src=image_bg.jpg height="100%" width="100%" border=0></td>'
 +               '<td width="45%"><img src=iframe_bg.jpg height="100%" width="100%" border=0></td>'
 +               '<td width="4%"><img src=rborder_bg.jpg height="100%" width="100%" border=0></td>'
 +             '</tr>'
 +           '</table>'
 +         '</td>'
 +       '</tr>'
 +       '<tr height="32%">'
 +         '<td><img src=panel_bg.jpg height="100%" width="100%" border=0></td>'
 +       '</tr>'
 +     '</table>'
 +   '</td>'
 +   '<td width="29%" rowspan=2><img src=right_bg.jpg height="100%" width="100%" border=0></td>'
 + '</tr>'
 + '<tr height="21%">'
 +   '<td><img src=bottom_bg.jpg height="100%" width="100%" border=0></td>'
 + '</tr>' +
 '</table>'
 
 </script>
 </head>
 
 <body onload="buildTable(tableData)">
 
 <script>
 window.onresize = resizeTable;
 </script>
 
 </body>
 </html>[/code]

I have included the corresponding images in a previous post (not the one called results.zip -- the earlier one called samples.zip). If you don't like downloading attachments, I would assume that using other images in their place should work as well --I've also noticed that images wider than they are tall seem to cause more problems with this particular page setup, no idea why, but maybe someone wants to play with that and see if they can come up with an answer?

@MalkalypseauthorApr 17.2005 — #As I'm now dealing with a different set of problems than I was when I started, I decided it was time to start a new thread. From there I have included an active link to the page in its current state.

http://www.webdeveloper.com/forum/showthread.php?t=62965

Also in #JavaScript _↴

changing property of a field in another form HELP: unterminated string literal Having trouble getting window.location to work.

Success!

Help @Malkalypse spread the word by sharing this article on Twitter...

Tweet This

made 2 similar scripts, why does one work, 1 not?

44 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

made 2 similar scripts, why does one work, 1 not?

44 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

44 Comments(s) _↴

Also in #JavaScript _↴