DHTML Jigsaw Puzzle: Cross-Browser; CSS/HTML
  
|
The DHTML Lab Jigsaw Puzzle, Part IV: Cross-Browser
the stylesheet and HTML page
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.
- <STYLE TYPE="text/css">
<!--
/* As for Navigator, now used by Explorer as well - start */
#elPuzzle {
position: absolute;
left:0; top:0;
layer-background-color: black;
background-color: black;
visibility: hidden;
}
#elControls {
position: absolute;
background-color: #EEEEEE;
layer-background-color: #EEEEEE;
left: 3; top: 0;
padding: 5;
}
#elImage {
position: absolute;
left: 3; top: 3;
}
#elBlank {
position: absolute;
layer-background-color: white;
background-color: white;
left: 3; top: 3;
visibility: hidden;
}
#elGrid {
position: absolute;
left: 3; top: 3;
visibility: hidden;
}
/* As for Navigator, now used by Explorer as well - end */
.clPuzzPiece { /* Explorer-specific */
position: absolute;
visibility: hidden;
}
-->
</STYLE>
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.
- <SCRIPT LANGUAGE="JavaScript">
<!--
NS4 = (document.layers) ? 1 : 0;
isMac = (navigator.appVersion.indexOf("Mac")!=-1) ? 1 : 0;
IE4 = ((document.all) && (!isMac)) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;
if (ver4) {
document.write("<SCRIPT LANGUAGE="JavaScript1.2" SRC="puzzExt.js"><\/SCRIPT>");
document.write("<SCRIPT LANGUAGE="JavaScript1.2" SRC="puzzDrag.js"><\/SCRIPT>");
}
</SCRIPT>
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:
<BODY onLoad="whenLoaded()">
.
.
.
<DIV ID="elPuzzle">
<DIV ID="elImage"><IMG NAME="imOrig" ID="elImOrig" SRC="skiff.jpg" onLoad="whenLoaded()"></DIV>
<DIV ID="elBlank"></DIV>
<DIV ID="elGrid"><IMG NAME="imGrid" ID="elImGrid" SRC="grid.gif" onLoad="whenLoaded()"></DIV>
<DIV ID="elControls">
<FORM NAME="fmControls"><NOBR>
<INPUT TYPE=BUTTON onClick="preSolve(true)" STYLE="cursor:hand" VALUE="Solve">
<INPUT TYPE=BUTTON onClick="preSolve(false)" STYLE="cursor:hand" VALUE= "Hint">
<INPUT TYPE=BUTTON onClick="breakUp()" STYLE="cursor:hand" VALUE="Break">
</NOBR><BR><NOBR>
<SPACER TYPE=VERTICAL SIZE=5>
<INPUT NAME="gridBut" TYPE=BUTTON onClick="gridToggle()" STYLE="cursor:hand; font:5pt; position:relative; top:5" VALUE="Grid OFF">
<INPUT NAME="dragBut" TYPE=BUTTON onClick="dragToggle()" STYLE="cursor:hand; font:5pt; position:relative; top:5" VALUE="Drag ON">
</NOBR><BR><BR><NOBR>
<B STYLE="font:bold 9pt sans-serif;">Across:</B>
<SELECT onChange="puzzAcross = options[selectedIndex].value; isNewPuzz=true; isCreated=false;">
<OPTION VALUE=2>2
<OPTION VALUE=3>3
<OPTION VALUE=4>4
<OPTION VALUE=5 SELECTED>5
<OPTION VALUE=6>6
<OPTION VALUE=7>7
<OPTION VALUE=8>8
<OPTION VALUE=9>9
</SELECT>
</NOBR><NOBR>
<B STYLE="font:bold 9pt sans-serif;">Down:</B>
<SELECT onChange="puzzDown = options[selectedIndex].value; isNewPuzz=true; isCreated=false;">
<OPTION VALUE=2>2
<OPTION VALUE=3>3
<OPTION VALUE=4>4
<OPTION VALUE=5 SELECTED>5
<OPTION VALUE=6>6
<OPTION VALUE=7>7
<OPTION VALUE=8>8
<OPTION VALUE=9>9
</SELECT>
</NOBR><BR><NOBR>&nbsp;
<B STYLE="font:bold 9pt sans-serif;">Puzzle:</B>
<SELECT onChange="initPuzz(options[selectedIndex].value);">
<OPTION VALUE="balloon.jpg">Balloon
<OPTION VALUE="halfmoon.jpg">HalfMoon
<OPTION VALUE="island.jpg">Island
<OPTION VALUE="prometheus.jpg">Prometheus
<OPTION VALUE="skiff.jpg" SELECTED>Skiff
<OPTION VALUE="storm.jpg">Storm
<OPTION VALUE="sunset.jpg">Sunset
</SELECT>
</NOBR>
</FORM>
</DIV>
</DIV>
The fun starts when the page loads.
Produced by Peter Belesis and
All Rights Reserved. Legal Notices.Created: Dec. 17, 1997
Revised: Jan. 18, 1998
URL: https://www.webreference.com/dhtml/column11/puzzCBintro.html
Find a programming school near you