this is aaronland


<html>	
 <head>

 <script type = "text/javascript" src = "http://eatonweb.com/portal/weblogs.js"></script>
 <script type = "text/javascript" src = "http://aaronland.net/js/surfmenu.js"></script>
 <script type = "text/javascript" src = "http://aaronland.net/toys/surfmenu/prefs/_weblogs.js"></script>

Here is where you load the various javascript files. In this case, they've been loaded in the following order:

weblogs.js : list_of_links
surfmenu.js : the code that does the magic
_weblogs.js : user/menu specific preferences

 <script type = "text/javascript">
  <!--
   set_variables();
   userprefs();

set_variables() decides what exactly to render. It parses the URL and based on criteria (see surfmenu.js) sets variables that are read later on in the script. It can take a path to a CSS file as an optional parameter. If none it specified, it just reads the aaronland/surfmenu css file. Note: this function writes the <title> information.

userprefs() is a function in the "user prefs" file. If you don't want anything fancy to happen, just leave it blank, other wise put all your bells and whistles in here.


  //-->
 </script>

 </head>
 <body>

  <table cellpadding = "0" cellspacing  = "0" border = "0">
   <tr bgcolor = "#000000">
    <td>
   
     <table cellpadding = "3" cellspacing  = "1" border = "0">
      <tr bgcolor = "#ffffff">
       <td>

        <script type = "text/javascript">
         <!--
	   write_options(1);

The truth flag (1) in write_options() says : "I want to display my options inside a table." This assumes that you have opened (and will close) your table and have all your <tr>s and <td>s in order. If the flag is false, the options are rendered inside <div> tags.

	 
         //-->
        </script>

       </td>
      </tr>

      <tr bgcolor = "#ffffff">
       <td>

        <script type = "text/javascript"> 
         <!--
	  write_list();
         //-->
        </script>

       </td>
      </tr>
     </table>
    
    </td>
   </tr>
  </table>

I've got all kinds of foofy table stuff going on here, but I could just as easily have written the following :

 <script type = "text/javascript">
  <!--
   write_options();
   write_list();
   write_spacer();
  //-->
 </script>

write_spacer() can take two optional parameters : the path to an image spacer and the height of that image. If none are specified, the image is read from the aaronland site and it's height is 500 pixels. The spacer is necessary if you want the dhtml menu (see below) to line up with category titles at the bottom of the list.


  <script type = "text/javascript">
   <!--
    write_spacer()
   //-->
  </script>

  <div id = 'dhtmlmenu' class = 'menupos'>
   <script type = "text/javascript">	 
    <!--

Ah, dhtml.

    /*
     For reasons I have yet to understand
     this code will not execute if I stick it
     in surfmenu.js and call it as a function.
     I want to be able to write "write_dhtmlmenu()"
     Grrrrr.
    */

There is an option to display the full list of links as a single vertical column or as a table with multiple columns per rows. I modified code by NAME HERE to render a dhtml menu listing all the categories (in the array category) if we are rendering the single column. Each item on the list jumps to corresponding spot in the column, and the menu follows you around as you scroll.

You can turn the scrolling feature on and off as you please. In Explorer you'll even get some feedback when scrolling is disabled. In Netscape, you can't alter the display property after the page has loaded. Duh.

The position of the menu is not set dynamically which is kind of lame (and on the list of things to do eventually) but then writing cross-browser dhtml code (especially when Netscape is replacing their entire DOM) can be kind of lame too. Sorry.

      if ((list_all) && (!is_horz)){  
    document.write(
		   "<div class = 'menudes'>\n",
		   "<div align = 'right'>\n",
		   "categories\n",
		   "</div>\n",
		   "<hr noshade size = '1'>\n",
		   "<a href = '#top'>top</a><br>\n"
		   );
    for (i = 0; category[i]; i++){
      	document.write("  <a href = '#" + category[i] + "'>" + category[i] + "</a><br>\n");
    }
    document.write(
		   "<br>  <a href = '#bottom'>save preferences</a><br>\n",
		   "<br>menu follows scroll<br>  ",
		   "<a href = '#' onClick = \"javascript:toggle_scroll(); return false;\">",
		   "<span>toggle</a></span>\n"
		   );

    if (ie4){ document.write("<span id = 'scrollstatus'  style = 'display:none;'>off\n"); }

    document.write(
		   "</div>\n"
		   );
    
    setVariables(); 
    checkLocation();
      }
    //-->
   </script>
  </div>

 </body>
</html>