World grid Pattern Block color Generations
Game of Life in DHTML
     

Click the "Build World"
or "Start" button to
to play the Game of Life Life in DHTML!




Browser Warning:
This game should work for the 4.x versions of Internet Explorer and Netscape Navigator. It has been know to crash Netscape Navigator. If you are concerned, don't run it!
Game Controls
  • Build Game Build the game world.
  • Start Starts the game. If the game world hasn't been created this also build it.
  • Stop Stops the game.
  • Next Runs the game the the next "n" generations selected. If the game has been previously stopped, the "Next" button will also continue the game.
  • Add Pattern Adds the currently selected pattern to the game world.
  • Clear World Clears the world and stops the game.




Tips and Tricks

Creating DHTML Web pages for Navigator 4.x and IE 4.x is, frankly, and royal pain! The two browser implementations of the Document Object Model (DOM) are so diffenerent that creating DHTML pages that follow the published standards often doesn't work. The result - chaos and confusion for the web coder! The only way to solve many of the Navigator vs. IE 'issues' with research and trial-and-error.
Well, I've lived the browser 'issues' every working day for almost 3 months, and figured out a lifetime's worth of CSSP and JavaScript workarounds for DHTML web pages on Navigator and IE, so here are a few of my tips and Tricks .... watch this space, I'll be adding more when I have time!

The Document Object Model (DOM)
So much has been written about the DOM, and the differences between IE and Navigator that me talking about the DOM would be pointless!

But for DHTML web pages, the long-and-the-short of the DOM is this:
IE refers allows you to refer to HTML elements using the all object, while Navigator uses the layers object. While this can be extremely confusing, it also allows you to write portable DHTML JavaScript very easily:
     // is this Navigator?
     if (document.layers) {
     // Navigator specific code here ...
     }
     // is this IE?
     else if (document.all) {
     // IE specific code here ...
     }

DIVs, LAYERs, SPANs and ILAYERs
Combining of CSSP and JavaScript, i.e. DHTML, gives the web coder the ability to creating awesome interactive web sites. DIVs, LAYERs, SPANs and ILAYERs are probably the most used HTML tags for a DHTML web site. CSSP allows for detailed styles and formatting of the HTML, while JavaScript is the 'glue' that binds it all together into DHTML. Here are some of the things I've discovered about DHTML, ranging from the obvious to the arcane.

  • LAYERs and ILAYERs These are Navigator only tags! The are also obsolete, and really shouldn't be used if possible. But if your pages do use these tags, and you want to make the pages run in IE, wrap DIV or SPAN tags around them, like this:
         <DIV><LAYER>
         ... html tags here ...
         </LAYER></DIV>

    IE will simply ignore the LAYER tag, and Navigator will actually create a layer within a layer. It's ugly, but it works, and sometimes it's the only way to get a result!

  • ID, NAME and position Both IE and Navigator use the ID attribute of a tag for style sheets. IE uses the ID attribute to identify an HTML element. Take the following HTML as an example:
         <DIV ID="myDiv">some html</DIV>

    With IE, you can manipulate the DIVs style in JavaScript like this:
         document.myDiv.style.border-width = "5px";

    This doesn't work in Navigator for three reasons. First, Navigator doesn't have a style property, second, Navigator refers to CSSP elements (like DIV) by NAME, and third, Navigator doesn't allow you to manipulate a DIV with JavaScript unless it's position has been set to 'absolute'. So, for IE and Navigator, the example becomes:
         <DIV ID="myDiv" NAME="myDiv" STYLE="position:absolute;">
         some html
         </DIV>

    and seting manipulating the DIV with JavaScript would look like this:
         // is this Navigator?
         if (document.layers) {
         document.layers["myDiv"].border-width = "5px";
         }
         document.myDiv.border-width = "5px";
         else if (document.all) {
         // IE specific code here ...
         }

Style Sheet attributes
I've only got one style sheet tip for now ....

  • Background color IE and Navigator both allow the background color of an HTML element to be set. The CSS attribute is:
         background-color

    Great for IE! Works fine. So why doesn't it work in Navigator? Because Navigator refers to the attribute as:
         bgColor

    Watch for this one, all of Netscape's DHTML documentation says that the attribute is indeed background-color. Enough said.





The Game of Life
The Game of Life is one of those concepts that facinates computer geeks (like me). Basically, it simulates artificial life in an artificial world. And it makes interesting patterns. If you really want to find out about the Game of Life, its inventor John Conway, and a whole lot of other A-Life stuff, search at Yahoo! for the phrase "game of life".
About Life in DHTML!
Many of us above-mentioned geeks will look at the algorithms and source code for Life, and try to implement it .... this is my first attempt, even though I've been programming for nearly 10 years! So how did 'Life in DHTML' germinate?

I make my living as a Web programmer in Silicon Valley, and recently started working on a project with a Web interface that makes heavy use of DHTML. We had some 'issues' with Netscape Navigator and the DIV tag.

Fortunately for us one of the team members was a consultant from Netscape, so we asked him to find out how many DIVs we could actually put on a Web page. He asked people on the Navigator product team, and we got an answer - about 50-60.

"So," thinks I, "that's bugger all. I wonder how many I can really use? And how can I push the browser to it's absolute limit?"

And then it hit me. The Game of Life. With Style Sheets.

So I did it. 'The Web Geek' Web page produces almost 500 layer objects in Navigator. It works.

Some of my programming isn't too hot - it's all been a bit of a rush job done in my spare time over a couple of evenings, but, if you feel so inclined to copy, re-use, etc., you have non-commercial permission, and I'd appreciate an acknowledgement Tim Malcolm <[email protected]> in the code.