home *** CD-ROM | disk | FTP | other *** search
/ Dynamic HTML Construction Kit / Dynamic HTML Construction Kit.iso / source_code / dhtmlunl / dhtml.exe / CD Content / Chap23 / dun23_8.txt < prev    next >
Encoding:
Text File  |  1997-12-18  |  7.3 KB  |  182 lines
  1. <html>
  2.  
  3. <head>
  4.  
  5. <title>DHTML Site Navigator</title>
  6.  
  7. </head>
  8.  
  9.  
  10.  
  11. <!-- small style sheet to set the font properties on the menu --> 
  12.  
  13. <style type="text/css">
  14.  
  15. <!--
  16.  
  17. all.mnuTxt{
  18.  
  19. text-decoration:none;
  20.  
  21. color:black;
  22.  
  23. font-family:Tahoma,Arial,Helvetica;
  24.  
  25. font-size:10pt
  26.  
  27. }
  28.  
  29. -->
  30.  
  31. </style>
  32.  
  33.  
  34.  
  35. <script language="JavaScript1.2">
  36.  
  37. <!--//
  38.  
  39.  
  40.  
  41. //initialize the global variables immediately...
  42.  
  43. var seed = 1;
  44.  
  45. var lastPage = '';
  46.  
  47. var timerID = null;
  48.  
  49. var timerRunning = false;
  50.  
  51.  
  52.  
  53. //A throwback to my days with JavaScript 1.0 under Netscape 2.0, the ParseArray function builds 
  54.  
  55. //an array on the fly, based on the number of arguments passed to it.  Occasionally, this type 
  56.  
  57. //of script is useful for when you're not too clear on how many elements are going to be in the 
  58.  
  59. //array.  Added bonus code! It works on any JavaScript compliant browser!
  60.  
  61. function ParseArray() {
  62.  
  63.    this.length = ParseArray.arguments.length;
  64.  
  65.    for (var i = 0; i < this.length; i++) {
  66.  
  67.       this[i+1] = ParseArray.arguments[i]
  68.  
  69.    }
  70.  
  71. }
  72.  
  73.  
  74.  
  75.  
  76.  
  77. //A slideTo variant that uses the global variable 'seed' to increase the movement of the target layer. 
  78.  
  79. function slideTo(targetLayer, targetTop) {
  80.  
  81.    seed = seed * 1.2;
  82.  
  83.    if((targetTop >= 0) &&  ((targetLayer.top + seed * 1.2) < targetTop)) {
  84.  
  85.       if (targetLayer.top < targetTop) targetLayer.top = targetLayer.top + seed;
  86.  
  87.       setTimeout('slideTo(document.layers["'+targetLayer.name+'"],'+targetTop+')',1);
  88.  
  89.    } else if((targetTop < 0) &&  ((targetLayer.top - seed * 1.2) > targetTop)) {
  90.  
  91.       if (targetLayer.top > targetTop) targetLayer.top = targetLayer.top - seed;
  92.  
  93.       setTimeout('slideTo(document.layers["'+targetLayer.name+'"],'+targetTop+')',1);
  94.  
  95.    } else {
  96.  
  97.       //make sure the layer is exactly at its target position and reset the 'seed' variable.
  98.  
  99.       seed = 1;
  100.  
  101.       targetLayer.top = targetTop;
  102.  
  103.    }
  104.  
  105. }
  106.  
  107.  
  108.  
  109.  
  110.  
  111. //The fun really starts here... two array are created to hold the titles and urls for the menu 
  112.  
  113. //bar, and initialize the clock.  The init() function is called by the onLoad event of the document.
  114.  
  115. function init() {
  116.  
  117. //The sTitles array holds the titles of the pages on the select menu.
  118.  
  119.    var sTitles = new ParseArray('Current News',
  120.  
  121.                                 'Site Help',
  122.  
  123.                                 'Company Info',
  124.  
  125.                                 'Feedback');
  126.  
  127.  
  128.  
  129. //The sUrls array holds the filenames for the pages in the select list.
  130.  
  131.    var sUrls = new ParseArray('content1.htm',
  132.  
  133.                               'content2.htm',
  134.  
  135.                               'content3.htm',
  136.  
  137.                               'content4.htm');
  138.  
  139.  
  140.  
  141. //This for loop cycles through the sUrls and sTitles arrays, and populates the DHTML
  142.  
  143. //menu's select box with the page names and URLs to use.  To add a new page to the menu, 
  144.  
  145. //you'd simply add or change elements in the two arrays above.
  146.  
  147.    for (var s = 1; s <= sUrls.length; s++) {
  148.  
  149.       var nPage = new Option(sTitles[s], sUrls[s]);
  150.  
  151.       document.layers['sysmenu'].layers['lock'].document.forms[0].pages.options[s] = nPage;
  152.  
  153.    }
  154.  
  155.    //One of the buttons on the menu bar is a clock, so when the page is loaded, 
  156.  
  157.    //the clock is set and fired up to keep track of the current time for the user.
  158.  
  159.    stopclock()
  160.  
  161.    showtime()
  162.  
  163. }
  164.  
  165.  
  166.  
  167. //Which way to go?  The showMenu() function determines the menu bar's current top position and 
  168.  
  169. //fires off the slideTo function to handle the animation.  Most importantly, notice the first 
  170.  
  171. //if... block that checks to see if the Auto Hide checkbox is clear before activating any movement.
  172.  
  173. function showMenu(layerName) {
  174.  
  175.    if (document.layers['sysmenu'].layers['lock'].document.forms[0].hold.checked != false) {
  176.  
  177.       if (document.layers[layerName].top <= -32) {
  178.  
  179.          slideTo(document.layers[layerName], 0);
  180.  
  181.       } else if(document.layers[layerName].left >= 0) {
  182.  
  183.          slideTo(document.layers[layerName], -32);
  184.  
  185.       }
  186.  
  187.    }
  188.  
  189. }
  190.  
  191.  
  192.  
  193. //This function stops the clock if necessary.  Guards against dreaded memory leaks!
  194.  
  195. function stopclock(){
  196.  
  197.       if(timerRunning)
  198.  
  199.           clearTimeout(timerID)
  200.  
  201.       timerRunning = false
  202.  
  203.   }
  204.  
  205.  
  206.  
  207. //A quick hack of the classic showtime() function, this function formats a string with the 
  208.  
  209. //current time, and tacks an 'am' or 'pm' onto it.  The big switch from some of the older clock 
  210.  
  211. //functions out there is that it changes the text on a  button as opposed to the text in a 
  212.  
  213. //simple text box.
  214.  
  215. function showtime(){
  216.  
  217.       var now = new Date();
  218.  
  219.       var hours = now.getHours();
  220.  
  221.       var minutes = now.getMinutes();
  222.  
  223.       var timeValue = "" + ((hours > 12) ? hours - 12 : hours);
  224.  
  225.       timeValue  += ((minutes < 10) ? ":0" : ":") + minutes;
  226.  
  227.       timeValue  += (hours >= 12) ? " pm" : " am";
  228.  
  229.       //notice how the button is referred to via the complete layer hierarchy
  230.  
  231.       document.layers['sysmenu'].layers['lock'].document.forms[0].clock.value = timeValue; 
  232.  
  233.       timerID = setTimeout("showtime()",1000);
  234.  
  235.       timerRunning = true;
  236.  
  237. }
  238.  
  239.  
  240.  
  241. //the openPage function grabs the value of the current selection from the 'pages' select 
  242.  
  243. //object and loads it into the 'contentLayer' layer.  By loading the external document 
  244.  
  245. //into an existing layerA quick hack of the classic showtime() function, this function formats a string with the 
  246.  
  247. //current time, and tacks an 'am' or 'pm' onto it.  The big switch from some of the older clock 
  248.  
  249. function openPage(obj) {
  250.  
  251.    if (obj.pages.selectedIndex > 0) {
  252.  
  253.       lastPage = document.layers['contentLayer'].src;
  254.  
  255.       document.layers['contentLayer'].src=obj.pages.options[obj.pages.selectedIndex].value;
  256.  
  257.    }
  258.  
  259. }
  260.  
  261.  
  262.  
  263. //-->
  264.  
  265. </script>
  266.  
  267.  
  268.  
  269. <body onLoad="init()" bgcolor="black">
  270.  
  271.  
  272.  
  273. <!-- the first layer uses mouseover and mouseout events to determine whether the layer -->
  274.  
  275. <!-- is shown or hidden. It also serves as the parent layer for the rest of the menu. -->
  276.  
  277. <layer id="sysmenu" 
  278.  
  279.    onMouseOver="showMenu('sysmenu')" 
  280.  
  281.    onMouseOut="showMenu('sysmenu')" bgcolor="silver" width=99% height=34 left=0 top=0>
  282.  
  283.  
  284.  
  285.  
  286.  
  287. <!-- Graphics? Not here!  The shadow is a 1 pixel tall layer in a darker shade of gray. -->
  288.  
  289. <layer bgcolor="gray" width=100% height=1 left=0 top=33></layer>
  290.  
  291.  
  292.  
  293. <!-- The menu is held within the 'lock' layer's document.  I used a table here to simplify -->
  294.  
  295. <!ùthe task of keeping the form elements lined up. -->
  296.  
  297. <layer id="lock" width=100% height=27 left=5 top=3>
  298.  
  299. <table cellspacing=0 cellpadding=0 border=0 width=100%>
  300.  
  301. <tr>
  302.  
  303. <form name="locker"><td align=center valign=middle>
  304.  
  305. <span class="mnuTxt"><input type="checkbox" name="hold">Auto Hide  | 
  306.  
  307. <input type="button" value="Home" onClick="parent.window.document.layers['contentLayer'].src='content0.htm'" > |
  308.  
  309. <select size=1 name="pages">
  310.  
  311. <option value=""> ---- Site Quick Navigator ----
  312.  
  313. <option value=""> 
  314.  
  315. <option value=""> 
  316.  
  317. <option value=""> 
  318.  
  319. <option value=""> 
  320.  
  321. </select> <input type="button" value="Open" 
  322.  
  323.    onClick="openPage(this.form)"> | 
  324.  
  325. <input type="button" name="clock" value=" 00:00   "> |
  326.  
  327. <input type="button" value="Exit" onClick="self.close()" >
  328.  
  329.  
  330.  
  331. </span>
  332.  
  333. </td></form>
  334.  
  335. </tr>
  336.  
  337. </table>
  338.  
  339. </layer>
  340.  
  341.  
  342.  
  343. </layer>
  344.  
  345.  
  346.  
  347. <!ùthis layer serves as the screen, or canvas that the other pages are loaded in. -->
  348.  
  349. <layer top=45 left=200 id="contentLayer" height=245 width=400 src="content0.htm">
  350.  
  351.  
  352.  
  353. </layer>
  354.  
  355.  
  356.  
  357. </body>
  358.  
  359. </html>
  360.  
  361.  
  362.  
  363.