Sandeep's Nook: JavaScript Page

Floating Menu

Computing
Resourses

JavaScript
Resourses

On the left of this page in yellow with black border is the floating menu. The menu will always hover in the same place on the page even when you scroll down the page. You can add any number of links to the menu, or completely change the appearance of to the menu, to best suit your needs. The placement of the menu from the top of the page can be adjusted by the users to best suit their needs.

Users could also provide a space on the left of their web pages to accommodate the floating menu as shown in this example. This would prevent the menu from obscuring any content on the webpage.

Author: Sandeep Gangadharan
Home Page: http://www.sivamdesign.com/home/

The script is given below:

This goes in the HEAD of the html file:

(document.getElementById) ? dom = true : dom = false;

function typeStart() {
  if (dom) {
    document.write('<div id="menuBox" style="position:absolute; left:' + leftSide + 'px; visibility:visible; cursor:hand">') } }

function typeEnd() { if (dom) { document.write('</div>') } }

function placeIt() {
  if (dom && !document.all) {document.getElementById("menuBox").style.top = window.pageYOffset + place + "px";}
  if (document.all) {document.all["menuBox"].style.top = document.documentElement.scrollTop + place + "px"}
  window.setTimeout("placeIt()", 10); }
// -->
</script>

Note the script in the BODY tag:

<body onload="placeIt()">

This goes in the BODY of the html file:

<table border="0" width="130" height="300" bgcolor="#ffff00" cellpadding="1" cellspacing="0" style="border-top: #000000 1px solid; background: #ffff00; border-left: #000000 1px solid; color: #000000; ; border-right: #000000 1px solid; color: #000000">
   <tr><td bgcolor="#000000" style="border-bottom: #000000 1px solid">
     <font face="arial, helvetica, sans-serif" size="2" color="#ffffff">
       <b>Computing<br /> Resourses</b>
     </font>
    </td></tr>
   <tr><td style="border-bottom: #000000 1px solid">
     <font face="arial, helvetica, sans-serif" size="2">
       <a href="http://www.microsoft.com/">Microsoft Corp.</a>
     </font>
    </td></tr>
   <tr><td style="border-bottom: #000000 1px solid">
     <font face="arial, helvetica, sans-serif" size="2">
       <a href="http://home.netscape.com/">Netscape Corp.</a>
     </font>
    </td></tr>
   <tr><td style="border-bottom: #000000 1px solid">
     <font face="arial, helvetica, sans-serif" size="2">
       <a href="http://www.macromedia.com">Macromedia Inc.</a>
     </font>
    </td></tr>
   <tr><td style="border-bottom: #000000 1px solid">
     <font face="arial, helvetica, sans-serif" size="2">
       <a href="http://www.symantec.com">Symantec Corp.</a>
     </font>
    </td></tr>
   <tr><td bgcolor="#000000" style="border-bottom: #000000 1px solid">
     <font face="arial, helvetica, sans-serif" size="2" color="#ffffff">
       <b>JavaScript<br /> Resourses</b>
     </font>
    </td></tr>
   <tr><td style="border-bottom: #000000 1px solid">
     <font face="arial, helvetica, sans-serif" size="2">
       <a href="http://www.sivamdesign.com/scripts/">Sandeep's Free JS</a>
     </font>
    </td></tr>
   <tr><td style="border-bottom: #000000 1px solid">
     <font face="arial, helvetica, sans-serif" size="2">
       <a href="http://javascript.internet.com/">JavaScript Source</a>
     </font>
    </td></tr>
   <tr><td style="border-bottom: #000000 1px solid">
     <font face="arial, helvetica, sans-serif" size="2">
       <a href="http://javascriptkit.com/cutpastejava.shtml">JavaScript Kit</a>
     </font>
    </td></tr>
   <tr><td style="border-bottom: #000000 1px solid">
     <font face="arial, helvetica, sans-serif" size="2">
       <a href="http://www.docjs.com/">Doc JavaScript</a>
     </font>
    </td></tr>
  </table>