dhtml.js
- Practical use
DHTML layer creation, hiding, and revealing
- Version requirement
JavaScript 1.2
- Functions
genLayer()
,hideSlide()
,showSlide()
,refSlide()
If youâve been reading the book in order, youâve seen this code in two previous applications (the slideshow and the multiple search engine interface). Figures 6-5 and 6-6 show the code that has created a layer and allows you to hide and show it at will.
Figure 6-5. âEye-catchingâ DHTML: Now you see it
Figure 6-6. Now you donât
Example 6.4 shows the contents of dhtml.js. I havenât changed a thing. Check Chapter 3 and Chapter 5 for the code details.
Example 6-4. dhtml.js
1 var NN = (document.layers ? true : false); 2 var hideName = (NN ? 'hide' : 'hidden'); 3 var showName = (NN ? 'show' : 'visible'); 4 var zIdx = -1; 5 function genLayer(sName, sLeft, sTop, sWdh, sHgt, sVis, copy) { 6 if (NN) { 7 document.writeln('<LAYER NAME="' + sName + '" LEFT=' + sLeft + 8 ' TOP=' + sTop + 9 ' WIDTH=' + sWdh + ' HEIGHT=' + sHgt + ' VISIBILITY="' + sVis + 10 '" z-Index=' + zIdx + '>' + copy + '</LAYER>'); 11 } 12 else { 13 document.writeln('<DIV ID="' + sName + 14 '" STYLE="position:absolute; overflow:none;left:' + sLeft + 15 'px; top:' + sTop + 'px; width:' + sWdh + 'px; height:' + sHgt + 16 'px; visibility:' ...
Get JavaScript Application Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.