Creating a Mosaic Webpage with Javascript using DOM

I tried to present my concept of a Mosaic Webpage today, and found that while it renders nicely in Firefox, Internet Explorer (6,7,8) only showed a blank page.

Time to solve the problem building the table in DOM instead of dynamically writing HTML (using document.writeln).

The HTML code of the document basically stays the same:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
 <head>
  <title>devio mosaic</title>
  <link rel="stylesheet" href="default.css" type="text/css">
 </head>
 <body onload="setup()">
  <table id="tbl" cellSpacing="1" cellPadding="1" width="100%" border="0">
  </table>
 </body>
</html>

The new Javascript code adds the various link and iframe elements to the table in two columns:

<script type="text/javascript">
function setup()
{
  var sites = [];
  sites["site1"] = "http://my.first.site/";
  sites["site2"] = "http://my.second.site/";
  // more sites

  var iMaxCol = 2;
  var iCol = 0;
  var tr;
  var tbody = document.createElement("tbody");
  document.getElementById("tbl").appendChild(tbody);

  for(site in sites)
  {
    if (iCol == 0) {
      tr  = document.createElement("tr");
      tbody.appendChild(tr);
    }

    var td = document.createElement("td");
    td.align = "center";
    var a = document.createElement("a");
    a.href = sites[site];
    a.target = "_blank";
    a.innerHTML = site;
    td.appendChild(a);
    td.appendChild(document.createElement("br"));
    var iframe = document.createElement("iframe");
    iframe.src = sites[site];
    iframe.width = "100%";
    iframe.height = "100px";
    td.appendChild(iframe);
    tr.appendChild(td);

    iCol++;

    if (iCol == iMaxCol) {
      iCol = 0;
    }
  }
}
</script>

The crucial thing for IE to render the <table> at all turned out to be the use of the <tbody> element!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: