Entry
I'm using a 'for...in' loop to display document properties. How can I get it to display ,say, 6 properties per line?
Dec 13th, 2000 09:04
Juergen Thelen, Jim Kiely,
The simplest way should be to build an array with the property names
you wish to list, setup an appropriate property count loop, and use a
combination of var s = eval(document.theProperty) and document.write(s)
inside this loop.
If you like to have more control over the output, you're probably going
to use tables, but this approach is a bit tricky, and requires a lot
more code...
Check my following snippet (you have been warned. Long and tricky one).
But maybe it's close to what you were looking for:
--- snip ---
<html>
<head>
<title>FAQTS - Juergen Thelen - 6 document properties per line
(IE4+/NN4/NN6)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
nn4 = (document.layers) ? 1 : 0;
function NN4F(i)
{
if (nn4)
{
if (i == 1)
{
document.NN4pgW = innerWidth;
document.NN4pgH = innerHeight;
onresize = NN4F;
}
else if (innerWidth != document.NN4pgW || innerHeight !=
document.NN4pgH)
{
location.reload();
}
}
}
NN4F(1);
if (nn4)
{
document.write('<style>td.cell { position: relative; } <\/style>');
}
function InitTLayers(tname, rn, cn)
{
if (nn4)
{
var mh = new Array(rn);
var mw = new Array(cn);
for (var c = 0; c < cn; c++)
{
mw[c] = 0;
for (var r = 0; r < rn; r++)
{
var cell = document[tname + 'Cell' + r + '_' + c];
if (mw[c] < cell.clip.width) mw[c] = cell.clip.width;
}
}
for (var r = 0; r < rn; r++)
{
mh[r] = 0;
for (var c = 0; c < cn; c++)
{
var cell = document[tname + 'Cell' + r + '_' + c];
if (mh[r] < cell.clip.height) mh[r] = cell.clip.height;
cell.clip.width = mw[c];
cell.clip.height = mh[r];
cell.rowIndex = r; cell.colIndex = c;
var ol = cell.ol = new Layer(mw[c]);
ol.cell = cell;
ol.clip.height = mh[r];
ol.left = cell.pageX;
ol.top = cell.pageY;
ol.visibility = 'show';
}
}
}
}
function w2c (tname, ri, ci, html)
{
if (nn4)
{
var cell = document[tname + 'Cell' + ri + '_' + ci];
cell.ol.document.open();
cell.ol.document.write(html);
cell.ol.document.close();
cell.ol.visibility = 'show';
cell.visibility = 'hide';
}
else if (document.all)
{
document.all[tname + 'Cell' + ri + '_' + ci].innerHTML = html;
}
else if (document.createRange)
{
var cell = document.getElementById(tname + 'Cell' + ri + '_' + ci);
while (cell.hasChildNodes())
cell.removeChild(cell.lastChild);
var range = document.createRange();
range.setStartAfter(cell);
var docFrag = range.createContextualFragment(html);
cell.appendChild(docFrag);
}
}
function ShowDocumentProps()
{
var dp = [["alinkColor"], ["bgColor"], ["cookie"],
["domain"], ["fgColor"], ["height"],
["lastModified"], ["linkColor"], ["title"],
["URL"], ["vlinkColor"], ["width"]];
for (var i = 0; i < 2; i++)
{
for (var j = 0; j < 6; j++)
{
var k = i*3;
var l = i*6;
w2c('t1', k+1, j, dp[l+j]);
var dpt = eval("typeof(document."+dp[l+j]+")");
var valid = ((dpt != 'unknown') && (dpt != 'undefined'))
if (valid)
{
var s = eval("document."+dp[l+j]);
if ((dpt == 'string') && (s.length > 22)) s = '...'+s.slice
((s.length-22));
w2c('t1', k+2, j, s);
}
else
{
var s = (dpt == 'unkown') ? "unknown" : "undefined";
w2c('t1', k+2, j, s);
}
}
}
}
function Init()
{
InitTLayers ('t1', 6, 6);
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="Init()">
<font face="Arial, Helvetica, sans-serif" size="5">Document properties
of current
document:</font><br>
<table border="0" cellspacing="4" cellpadding="2" name="t1">
<tr>
<td id="t1Cell0_0" class="cell"><font
color="#FFFFFF">WWWWWWWWWWW</font></td>
<td id="t1Cell0_1" class="cell"><font
color="#FFFFFF">WWWW</font></td>
<td id="t1Cell0_2" class="cell"><font
color="#FFFFFF">WWWWWWWWWWWW</font></td>
<td id="t1Cell0_3" class="cell"><font
color="#FFFFFF">WWWWWWWWWWWW</font></td>
<td id="t1Cell0_4" class="cell"><font
color="#FFFFFF">WWWW</font></td>
<td id="t1Cell0_5" class="cell"><font
color="#FFFFFF">WWWW</font></td>
</tr>
<tr>
<td id="t1Cell1_0" class="cell" bgcolor="#CCCCFF"><font
color="#CCCCFF">WWWWWWWWWWW</font></td>
<td id="t1Cell1_1" class="cell" bgcolor="#CCCCFF"><font
color="#CCCCFF">WWWW</font></td>
<td id="t1Cell1_2" class="cell" bgcolor="#CCCCFF"><font
color="#CCCCFF">WWWWWWWWWWWW</font></td>
<td id="t1Cell1_3" class="cell" bgcolor="#CCCCFF"><font
color="#CCCCFF">WWWWWWWWWWWW</font></td>
<td id="t1Cell1_4" class="cell" bgcolor="#CCCCFF"><font
color="#CCCCFF">WWWW</font></td>
<td id="t1Cell1_5" class="cell" bgcolor="#CCCCFF"><font
color="#CCCCFF">WWWW</font></td>
</tr>
<tr>
<td id="t1Cell2_0" class="cell"><font
color="#FFFFFF">WWWWWWWWWWW</font></td>
<td id="t1Cell2_1" class="cell"><font
color="#FFFFFF">WWWW</font></td>
<td id="t1Cell2_2" class="cell"><font
color="#FFFFFF">WWWWWWWWWWWW</font></td>
<td id="t1Cell2_3" class="cell"><font
color="#FFFFFF">WWWWWWWWWWWW</font></td>
<td id="t1Cell2_4" class="cell"><font
color="#FFFFFF">WWWW</font></td>
<td id="t1Cell2_5" class="cell"><font
color="#FFFFFF">WWWW</font></td>
</tr>
<tr>
<td id="t1Cell3_0" class="cell"> </td>
<td id="t1Cell3_1" class="cell"> </td>
<td id="t1Cell3_2" class="cell"> </td>
<td id="t1Cell3_3" class="cell"> </td>
<td id="t1Cell3_4" class="cell"> </td>
<td id="t1Cell3_5" class="cell"> </td>
</tr>
<tr>
<td id="t1Cell4_0" class="cell" bgcolor="#CCCCFF"><font
color="#CCCCFF">WWWWWWWWWWW</font></td>
<td id="t1Cell4_1" class="cell" bgcolor="#CCCCFF"><font
color="#CCCCFF">WWWW</font></td>
<td id="t1Cell4_2" class="cell" bgcolor="#CCCCFF"><font
color="#CCCCFF">WWWWWWWWWWWW</font></td>
<td id="t1Cell4_3" class="cell" bgcolor="#CCCCFF"><font
color="#CCCCFF">WWWWWWWWWWWW</font></td>
<td id="t1Cell4_4" class="cell" bgcolor="#CCCCFF"><font
color="#CCCCFF">WWWW</font></td>
<td id="t1Cell4_5" class="cell" bgcolor="#CCCCFF"><font
color="#CCCCFF">WWWW</font></td>
</tr>
<tr>
<td id="t1Cell5_0" class="cell"><font
color="#FFFFFF">WWWWWWWWWWW</font></td>
<td id="t1Cell5_1" class="cell"><font
color="#FFFFFF">WWWW</font></td>
<td id="t1Cell5_2" class="cell"><font
color="#FFFFFF">WWWWWWWWWWWW</font></td>
<td id="t1Cell5_3" class="cell"><font
color="#FFFFFF">WWWWWWWWWWWW</font></td>
<td id="t1Cell5_4" class="cell"><font
color="#FFFFFF">WWWW</font></td>
<td id="t1Cell5_5" class="cell"><font
color="#FFFFFF">WWWW</font></td>
</tr>
</table>
<p><a href="javascript:ShowDocumentProps()">Show document
properties</a></p>
</body>
</html>
--- snap ---
This snippet dynamically rewrites <TD> tags and should work fine with
IE4+, NN4 and NN6 (tested it only on IE 5.0/5.5, NN 4.7x, NN6 MM18).
If you're new to dynamic rewrites of table cells maybe you better first
have a look on the basics at
http://www.faqts.com/knowledge-base/view.phtml/aid/1682/fid/128
where this stuff is described in detail.
Hope this helps.
Juergen
