DHTML Jigsaw Puzzle: Cross-Browser; CSS/HTML

The Stylesheet

We've decided that Explorer will follow the Navigator model, where all contained elements have a position of absolute, and are re-positioned every time a new puzzle image is loaded. Our CSS stylesheet is, therefore, identical to the Navigator version, with one insertion from the Explorer version. Explorer will adopt the Navigator way of creating the "border" of the puzzle, the elBlank element for providing a white work-space, and an absolutely-positioned control panel.

The clPuzzPiece class declaration is used by Explorer when applying style to the newly created piece elements. Navigator will never use it, and is not harmed by its simple declaration here.

The Script Files

As before, we have two external JavaScript files, puzzExt.js for all our puzzle routines, and puzzDrag.js, for our dragging functions. Our browser variables can either be declared in-page or in our first script. Since the puzzle may exist in an otherwise non-DHTML page, declare the variables in-page and conditionally write the external script calls for DHTML browsers only. This will avoid the Navigator 3 insistence on parsing all external files, regardless of the LANGUAGE value.

Since Explorer 4 for the Macintosh does not support the "clip" property, the puzzle code is hidden from it, by making it a non-version 4 browser.

The HTML

Our BODY HTML is very straight forward. It is simply an amalgam of the two versions. Taking as a basis the Navigator code, we insert harmless but important Explorer-specific snippets, here presented in blue. Navigator-specific code, ignored by Explorer is green. Note the new function calls of the Solve and Hint buttons: