Creating a Mosaic Webpage with Javascript using DOM

August 27, 2009

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!

Leave a Comment » | Javascript | Permalink
Posted by devio

JavaScript pageLoad() for MasterPage and ContentPage

February 22, 2009

I was experimenting with the DragPanelExtender recently, and almost immediately ran into the question of how to position it upon opening.

There are a lot of articles to be found on this question, and they always deal with it by means of a JavaScript function called pageLoad(), which is called by the ASP.Net Ajax framework sometime while the page is loading.

Now my application already has a pageLoad() function in the MasterPage, so adding a function of the same name in the ContentPage just did not work, as it would not be called by the framework.

My knowledge of JavaScript is not too profound, and I found that a function definition in JavaScript is actually a property of the window object. The hint was a line in the MicrosoftAjax.js file:

if (window.pageLoad) window.pageLoad(this,a);

meaning: if there is a defined function named pageLoad(), it is a property of the window object, and the value of the property is not null (== not false), and I can call it.

The solution was clear to me soon: if I need a pageLoad() method in the ContentPage, I need to name it differently and check for its definition in the MasterPage.

The pageLoad() in the MasterPage looks like this:

function pageLoad(sender, args)
{
    ...
    // ... do my MasterPage JavaScript stuff...
    ...
    if (window.contentPageLoad) {
        window.contentPageLoad(sender, args);
    }
}

and the ContentPage has its equivalent contentPageLoad() function:

function contentPageLoad(sender, args)
{
    // do something
}

5 Comments | ASP.Net, Ajax, Javascript | Permalink
Posted by devio

Creating a Mosaic Webpage with Javascript

September 9, 2008

If you are hosting a couple of websites, you want to make sure that adding or editing website configurations (e.g. Apache config files) does not interfere with other websites.

To display an overview of hosted sites, I decided to write a Javascript procedure which creates a table containing iframes to those websites:

<html>
    <head>
        <title>mosaic</title>
        <link rel="stylesheet" href="stylesheet.css" type="text/css">
    </head>
    <body>
        <table id="Table1" cellSpacing="1" cellPadding="1" width="100%" border="0">
        <script type="text/javascript">
var sites = [];
sites["site1"] = "http://my.first.site/";
sites["site2"] = "http://my.second.site/";
// more sites

var iMaxCol = 2;
var iCol = 0;

for(site in sites)
{
    if (iCol == 0) {
        document.writeln("<tr>");
    }

    document.writeln("<td align=\"center\">");
    document.writeln("<a href=\"" + sites[site] +
        "\" target=\"_blank\">" + site + "</a><br/>");
    document.writeln("<iframe src=\"" + sites[site] +
        "\" width=\"100%\" height=\"100px\"");
    document.writeln("</iframe>");
    document.writeln("</td>");

    iCol++;
    if (iCol == iMaxCol) {
        document.writeln("</tr>");
        iCol = 0;
    }
}

if (iCol == iMaxCol) {
    document.writeln("</tr>");
}
        </script>
        </table>
    </body>
</html>

1 Comment | Javascript | Permalink
Posted by devio

Javascript Dual Listboxes in ASP.Net

March 21, 2008

During the migration of an ASP.Net project to version 2.0 I was looking for a dual listbox control with Javascript support.

Unfortunately, a lot of “hits” led into dead ends and product listings of things long removed from the web.

Then I found the MetaBuilders WebControls collection on CodePlex, which you just need to download and compile. Then add a reference to the DLL in your project, and add the DLL in your component toolbox.

Compiling the latest version (Change Set 15894 of March 6, 2008) in Visual Studio 2005 required a bit of editing though:

First, VS could not open the project, however changing the first line of the .sln file from

Microsoft Visual Studio Solution File, Format Version 10.00

to

Microsoft Visual Studio Solution File, Format Version 9.00

fixed that.

Next, the PollViewDesigner.cs raised an error with an inline initialization of a List object. Since I didn’t need a Poll control, I simply commented out the offending code, compiled the solution, and was ready to use it in my project.

I noticed that the DualList’s behavior differs depending on the value of AutoPostBack.

If AutoPostBack is false, you can move list entries by double-clicking them. If AutoPostBack is true, moving only works by clicking the buttons.

Since some items should always be selected items, I wanted to check the unselected items in the ItemsMoved event, and re-select them if required. Without AutoPostBack, I have to check them in response to an action button instead.

Leave a Comment » | ASP.Net, C#, Javascript | Permalink
Posted by devio

Rich Text Editing

December 21, 2007

The first Rich Text Editor I used was TinyMCE, which I integrated into ASP.Net with a little bit of Javascript code.

Next was FCKEditor, which nearly looks like a word processor embedded into a web page. It integrates with ASP.Net through a .Net component that you simply drop on an ASPX form.

Today I came across NicEdit, which converts a DIV or INPUT into a Rich Text control. Whereas Tiny and FCK combine edit field and menus into a single block, Nic leaves the controls as they are, and provides a separate single menu bar for all controls on the page.

Have a look!

Leave a Comment » | ASP.Net, Javascript | Permalink
Posted by devio

Handling CollapsiblePanelExtender events in Javascript

November 27, 2007

I am currently migrating two ASP.Net projects to VS 2005 AjaxControlToolkit.

Of course I had a glance at the samples, and compared the functionality to its open source counterpart, namely Prototype plus Scriptaculous.

When I built a navigation menu using a couple of CollapsiblePanelExtender controls, I ran across two problems:

1) It seems extremely difficult to store the current state of CollapsiblePanelExtenders to be retrieved in the next GET. The simplest solution would be an asynchronous callback from the extender, but that functionality is not included in the framework.

2) I wanted to collapse the whole navigation menu, which is kept inside an HTML table. To keep the table format static, I used a style=”width: 200px” attribute. However, if the navigation menu is to hide, the width should be set to the size of the expanding icon.

Read the rest of this entry »

3 Comments | ASP.Net, Ajax, Javascript | Permalink
Posted by devio