home *** CD-ROM | disk | FTP | other *** search
/ PC World 2001 March / PCWorld_2001-03_cd.bin / Software / Topware / aspedit / _SETUP.1 / Navbar.js < prev    next >
Text File  |  2000-02-27  |  13KB  |  432 lines
  1.  
  2. var navBarY = 0;    // Default position.
  3. var navBarX = 0;
  4.  
  5. var navBarWidth        =  -1;    // Sizes
  6. var navBarHeaderWidth  = 100;
  7. var navBarMenuWidth    = 175;
  8. var navBarBorderWidth  =   1;
  9. var navBarPaddingWidth =   4;
  10.  
  11. var navBarBorderColor   = "#000000";    // Colors.
  12. var navBarHeaderBgColor = "#999999";
  13. var navBarHeaderFgColor = "#000000";
  14. var navBarActiveBgColor = "#666666";
  15. var navBarActiveFgColor = "#ffffff";
  16. var navBarItemBgColor   = "#cccccc";
  17. var navBarItemFgColor   = "#000000";
  18. var navBarHighBgColor   = "#000080";
  19. var navBarHighFgColor   = "#ffffff";
  20.  
  21. var navBarHeaderFontFamily = "Arial,Helvetica,sans-serif";    // Fonts.
  22. var navBarHeaderFontStyle  = "plain";
  23. var navBarHeaderFontWeight = "bold";
  24. var navBarHeaderFontSize   = "10pt";
  25. var navBarItemFontFamily   = "MS Sans Serif,Arial,Helvetica,sans-serif";
  26. var navBarItemFontStyle    = "plain";
  27. var navBarItemFontWeight   = "bold";
  28. var navBarItemFontSize     = "8pt";
  29. var navBarTrackX = false;    // Tracking flags.
  30. var navBarTrackY = false;
  31. var navBarMenus = new Array();    // List of menus.
  32. var navBar;          // Base layer.
  33. var navBarHeight;    // Height of navigation bar headers.
  34. var origWidth;
  35. var origHeight;
  36.  
  37. function navBarInit() {
  38.  
  39.   var menu = new Array();
  40.   var layer, norm, high, dmmy;
  41.   var last;
  42.   var width;
  43.   var on, off;
  44.   var i, j, x, y, z;
  45.   var link;
  46.  
  47.   if (!isMinNS4 && !isMinIE4)
  48.     return;
  49.  
  50.  
  51.   if (isMinNS4) {
  52.     origWidth  = window.innerWidth;
  53.     origHeight = window.innerHeight;
  54.   }
  55.   window.onresize = navBarReload;
  56.  
  57.  
  58.   if (navBarMenuWidth < navBarHeaderWidth)
  59.     navBarMenuWidth = navBarHeaderWidth;
  60.  
  61.   navBarBuild();
  62.   moveLayerTo(navBar, navBarX, navBarY);
  63.   showLayer(navBar);
  64.  
  65.  
  66.   x = 0;
  67.   y = 0;
  68.   i = 0;
  69.   while ((layer = getLayer("menu" + (i + 1), window)) != null) {
  70.  
  71.  
  72.     width = navBarMenuWidth;
  73.     if (i == navBarMenus.length - 1)
  74.       width = navBarWidth - x;
  75.  
  76.  
  77.     menu[i] = layer;
  78.     moveLayerTo(layer, x, y);
  79.  
  80.  
  81.     z = 0;
  82.     j = 0;
  83.     while ((layer = getLayer("item" + (i + 1) + "_" + (j + 1), menu[i])) != null) {
  84.  
  85.  
  86.       norm = layer;
  87.       moveLayerTo(norm, 0, z);
  88.       clipLayer(norm, navBarBorderWidth, navBarBorderWidth,
  89.                 width - navBarBorderWidth,
  90.                 getHeight(norm) - navBarBorderWidth);
  91.       if (isMinNS4 && j > 0)
  92.         layer.visibility = "inherit";
  93.       else
  94.         showLayer(norm);
  95.  
  96.  
  97.       high = getLayer("high" + (i + 1) + "_" + (j + 1), menu[i]);
  98.       moveLayerTo(high, 0, z);
  99.       clipLayer(high, navBarBorderWidth, navBarBorderWidth,
  100.                 width - navBarBorderWidth,
  101.                 getHeight(norm) - navBarBorderWidth);
  102.       hideLayer(high);
  103.  
  104.  
  105.       dmmy = getLayer("dmmy" + (i + 1) + "_" + (j + 1), menu[i]);
  106.       moveLayerTo(dmmy, 0, z);
  107.       clipLayer(dmmy, 0, 0, width, getHeight(norm));
  108.       if (j == 0)
  109.         menu[i].high = high;
  110.       else {
  111.         dmmy.high = high;
  112.         dmmy.onmouseover = navBarItemOn;
  113.         dmmy.onmouseout  = navBarItemOff;
  114.       }
  115.       link = navBarMenus[i][j * 2 + 1];
  116.       if (link != "") {
  117.         if (isMinNS4) {
  118.           dmmy.document.link = link;
  119.           dmmy.document.onmousedown = navBarItemGo;
  120.         }
  121.         if (isMinIE4) {
  122.           dmmy.link = link;
  123.           dmmy.onmousedown = navBarItemGo;
  124.         }
  125.       }
  126.  
  127.  
  128.       z += getHeight(norm) - navBarBorderWidth;
  129.       if (j == 0)
  130.         off = z + navBarBorderWidth - 1;
  131.       on = z + navBarBorderWidth;
  132.       j++;
  133.     }
  134.     x += navBarHeaderWidth - navBarBorderWidth;
  135.  
  136.  
  137.     menu[i].offWidth  = navBarHeaderWidth;
  138.     menu[i].offHeight = off + 1;
  139.     menu[i].onWidth   = width;
  140.     menu[i].onHeight  = on;
  141.     menu[i].onmouseover = navBarMenuOn;
  142.     menu[i].onmouseout  = navBarMenuOff;
  143.     clipLayer(menu[i], 0, 0, menu[i].offWidth, menu[i].offHeight);
  144.  
  145.  
  146.     showLayer(menu[i]);
  147.     i++;
  148.   }
  149.  
  150.  
  151.   navBarHeight = menu[i - 1].offHeight;
  152.  
  153.     menu[i - 1].onmouseover = null;
  154.     menu[i - 1].onmouseout  = null;
  155.  
  156.  
  157.   clipLayer(menu[i - 1], 0, 0, menu[i - 1].onWidth, menu[i - 1].offHeight);
  158.  
  159.  
  160.   clipLayer(navBar, 0, 0, navBarWidth, menu[0].offHeight);
  161.  
  162.  
  163.   if (navBarTrackX || navBarTrackY) {
  164.     navBarScroll();
  165.     if (isMinNS4)
  166.       setInterval('navBarScroll()', 20);
  167.     if (isMinIE4)
  168.       window.onscroll = navBarScroll;
  169.   }
  170. }
  171.  
  172.  
  173. function navBarBuild() {
  174.  
  175.   var i, j, k, str, tmp;
  176.   var padding, width;
  177.   var headText, actvText, itemText, highText;
  178.   var tblStart, tblEnd;
  179.  
  180.  
  181.   navBarMenus[navBarMenus.length] = new Array(" ", "");
  182.  
  183.  
  184.   width = (navBarMenus.length - 2) * (navBarHeaderWidth - navBarBorderWidth)
  185.           + (navBarMenus[navBarMenus.length - 2].length > 2 ? navBarMenuWidth
  186.              : navBarHeaderWidth);
  187.   if (navBarWidth < 0)
  188.     navBarWidth = Math.max(getWindowWidth(), getPageWidth()) - navBarX;
  189.   if (navBarWidth == 0)
  190.     navBarWidth = width;
  191.   if (navBarWidth > 0)
  192.     navBarWidth = Math.max(navBarWidth, width);
  193.  
  194.  
  195.   padding = navBarPaddingWidth + navBarBorderWidth;
  196.   headText = 'color:' + navBarHeaderFgColor + ';'
  197.            + 'font-family:' + navBarHeaderFontFamily + ';'
  198.            + 'font-size:' + navBarHeaderFontSize + ';'
  199.            + 'font-style:' + navBarHeaderFontStyle + ';'
  200.            + 'font-weight:' + navBarHeaderFontWeight + ';';
  201.   actvText = 'color:' + navBarActiveFgColor + ';'
  202.            + 'font-family:' + navBarHeaderFontFamily + ';'
  203.            + 'font-size:' + navBarHeaderFontSize + ';'
  204.            + 'font-style:' + navBarHeaderFontStyle + ';'
  205.            + 'font-weight:' + navBarHeaderFontWeight + ';';
  206.   itemText = 'color:' + navBarItemFgColor + ';'
  207.            + 'font-family:' + navBarItemFontFamily + ';'
  208.            + 'font-size:' + navBarItemFontSize + ';'
  209.            + 'font-style:' + navBarItemFontStyle + ';'
  210.            + 'font-weight:' + navBarItemFontWeight + ';';
  211.   highText = 'color:' + navBarHighFgColor + ';'
  212.            + 'font-family:' + navBarItemFontFamily + ';'
  213.            + 'font-size:' + navBarItemFontSize + ';'
  214.            + 'font-style:' + navBarItemFontStyle + ';'
  215.            + 'font-weight:' + navBarItemFontWeight + ';';
  216.   tblStart = '<table border=0 cellpadding=' + padding
  217.            + ' cellspacing=0 width="100%"><tr><td>';
  218.   tblEnd   = '</td></tr></table>';
  219.  
  220.  
  221.   str = "";
  222.   for (i = 0; i < navBarMenus.length; i++) {
  223.  
  224.  
  225.     width = navBarMenuWidth;
  226.     if (i == navBarMenus.length - 1)
  227.       width = Math.max(navBarHeaderWidth,
  228.               navBarWidth - (navBarMenus.length - 1) * navBarHeaderWidth);
  229.  
  230.     if (isMinNS4)
  231.       str += '<layer name="menu' + (i + 1) + '"'
  232.           +  ' bgcolor="' + navBarBorderColor + '"'
  233.           +  ' width=' + width
  234.           +  ' visibility=hidden>\n'
  235.     if (isMinIE4)
  236.       str += '<div id="menu' + (i + 1) + '"'
  237.           +  ' style="position:absolute;'
  238.           +  ' background-color:' + navBarBorderColor + ';'
  239.           +  ' width:' + width + 'px;'
  240.           +  ' height:100%;'
  241.           +  ' visibility:hidden;">\n';
  242.     for (k = 0; k < navBarMenus[i].length; k += 2) {
  243.       j = k / 2;
  244.       tmp = (i + 1) + "_" + (j + 1);
  245.       if (j == 0) {
  246.         if (isMinNS4) {
  247.           str += '  <layer name="item' + tmp + '" '
  248.               +  ' bgcolor="' + navBarHeaderBgColor + '" '
  249.               +  ' width=' + width + '>' + tblStart
  250.               +  '<span style="' + headText + '">' + navBarMenus[i][k]
  251.               +  '</span>' + tblEnd + '</layer>\n';
  252.           str += '  <layer name="high' + tmp + '" '
  253.               +  ' bgcolor="' + navBarActiveBgColor + '" '
  254.               +  ' width=' + width + '>' + tblStart
  255.               +  '<span style="' + actvText + '">' + navBarMenus[i][k]
  256.               +  '</span>' + tblEnd + '</layer>\n';
  257.           str += '  <layer name="dmmy' + tmp + '" '
  258.               +  ' width=' + width + '>'
  259.               +  '</layer>\n';
  260.         }
  261.         if (isMinIE4) {
  262.           str += '  <div id="item' + tmp + '"'
  263.               +  ' style="position:absolute;'
  264.               +  ' background-color:' + navBarHeaderBgColor + ';'
  265.               +  ' width:' + width + 'px;">' + tblStart
  266.               +  '<span style="' + headText + '">' + navBarMenus[i][k]
  267.               +  '</span>' + tblEnd + '</div>\n';
  268.           str += '  <div id="high' + tmp + '"'
  269.               +  ' style="position:absolute;'
  270.               +  ' background-color:' + navBarActiveBgColor + ';'
  271.               +  ' width:' + width + 'px;">' + tblStart
  272.               +  '<span style="' + actvText + '">' + navBarMenus[i][k]
  273.               +  '</span>' + tblEnd + '</div>\n';
  274.           str += '  <div id="dmmy' + tmp + '"'
  275.               +  ' style="position:absolute;'
  276.               +  ' width:' + width + 'px;'
  277.               +  ' height:100%;">'
  278.               +  '</div>\n';
  279.         }
  280.       }
  281.       else {
  282.         if (isMinNS4) {
  283.           str += '  <layer name="item' + tmp + '" '
  284.               +  ' bgcolor="' + navBarItemBgColor + '" '
  285.               +  ' width=' + width + '>' + tblStart
  286.               +  '<span style="' + itemText + '">' + navBarMenus[i][k]
  287.               +  '</span>' + tblEnd + '</layer>\n';
  288.           str += '  <layer name="high' + tmp + '" '
  289.               +  ' bgcolor="' + navBarHighBgColor + '" '
  290.               +  ' width=' + width + '>' + tblStart
  291.               +  '<span style="' + highText + '">' + navBarMenus[i][k]
  292.               +  '</span>' + tblEnd + '</layer>\n';
  293.           str += '  <layer name="dmmy' + tmp + '" '
  294.               +  ' width=' + width + '>'
  295.               +  '</layer>\n';
  296.         }
  297.         if (isMinIE4) {
  298.           str += '  <div id="item' + tmp + '"'
  299.               +  ' style="position:absolute;'
  300.               +  ' background-color:' + navBarItemBgColor + ';'
  301.               +  ' width:' + width + 'px;">' + tblStart
  302.               +  '<span style="' + itemText + '">' + navBarMenus[i][k]
  303.               +  '</span>' + tblEnd + '</div>\n';
  304.           str += '  <div id="high' + tmp + '"'
  305.               +  ' style="position:absolute;'
  306.               +  ' background-color:' + navBarHighBgColor + ';'
  307.               +  ' width:' + width + 'px;">' + tblStart
  308.               +  '<span style="' + highText + '">' + navBarMenus[i][k]
  309.               +  '</span>' + tblEnd + '</div>\n';
  310.           str += '  <div id="dmmy' + tmp + '"'
  311.               +  ' style="position:absolute;'
  312.               +  ' width:' + width + 'px;'
  313.               +  ' height:100%;">'
  314.               +  '</div>\n';
  315.         }
  316.       }
  317.     }
  318.     if (isMinNS4)
  319.       str += '</layer>\n';
  320.     if (isMinIE4)
  321.       str += '</div>\n';
  322.   }
  323.  
  324.  
  325.   if (isMinNS4) {
  326.     navBar = new Layer(width);
  327.     navBar.document.writeln(str);
  328.     navBar.document.close();
  329.     clipLayer(navBar, 0, 0, navBarWidth, getWindowHeight());
  330.   }
  331.  
  332.   if (isMinIE4) {
  333.     str = '<div id="navBar" style="position:absolute;'
  334.         + ' width:' + navBarWidth + 'px;'
  335.         + ' height:' + (getWindowHeight() - navBarY) + 'px;'
  336.         + ' overflow:hidden;">'
  337.         + str + '</div>\n';
  338.  
  339.  
  340.     if (!isMinIE5) {
  341.       x = getPageScrollX();
  342.       y = getPageScrollY();
  343.       window.scrollTo(getPageWidth(), getPageHeight());
  344.     }
  345.     document.body.insertAdjacentHTML("beforeEnd", str);
  346.     if (!isMinIE5)
  347.       window.scrollTo(x, y);
  348.  
  349.     navBar = getLayer("navBar");
  350.   }
  351. }
  352.  
  353.  
  354. function navBarScroll() {
  355.  
  356.   var x, y, d;
  357.   var max;
  358.  
  359.  
  360.   x = navBarX;
  361.   d = getPageScrollX() - navBarX;
  362.   if (navBarTrackX && d > 0)
  363.     x += d;
  364.   y = navBarY;
  365.   d = getPageScrollY() - navBarY;
  366.   if (navBarTrackY && d > 0)
  367.     y += d;
  368.  
  369.  
  370.   if (isMinIE4) {
  371.     max = Math.max(getPageWidth(), navBarWidth) - (navBarX + navBarWidth);
  372.     x = Math.max(navBarX, Math.min(x, max));
  373.     max = Math.max(getPageHeight(), getWindowHeight()) 
  374.           - getWindowHeight() - navBarHeight + navBarY;
  375.     y = Math.max(navBarY, Math.min(y, max));
  376.   }
  377.  
  378.  
  379.   moveLayerTo(navBar, x, y);
  380. }
  381.  
  382. function navBarMenuOn() {
  383.  
  384.  
  385.   clipLayer(this, 0, 0, this.onWidth, this.onHeight);
  386.   clipLayer(navBar, 0, 0, navBarWidth, this.onHeight);
  387.   showLayer(this.high);
  388. }
  389.  
  390. function navBarMenuOff() {
  391.  
  392.  
  393.   if (isMinIE4 && window.event.toElement &&
  394.       window.event.srcElement.id.substr(4, 1) ==
  395.       window.event.toElement.id.substr(4, 1))
  396.     return;
  397.   clipLayer(this, 0, 0, this.offWidth, this.offHeight);
  398.   clipLayer(navBar, 0, 0, navBarWidth, this.offHeight);
  399.   hideLayer(this.high);
  400. }
  401.  
  402. function navBarItemOn() {
  403.  
  404.  
  405.   showLayer(this.high);
  406. }
  407.  
  408. function navBarItemOff() {
  409.  
  410.  
  411.   hideLayer(this.high);
  412. }
  413.  
  414. function navBarItemGo() {
  415.  
  416.  
  417.   if (this.link.indexOf("javascript:") == 0)
  418.     eval(this.link);
  419.   else
  420.     window.location.href = this.link;
  421.  
  422.   return false;
  423. }
  424.  
  425. function navBarReload() {
  426.  
  427.  
  428.   if (isMinNS4 && origWidth == window.innerWidth && origHeight == window.innerHeight)
  429.     return;
  430.   window.location.href = window.location.href;
  431. }
  432.