A while back, I was part of discussion wherein the participants were talking about weblogs, lists of weblogs , and the various features that said lists offered.
A few people said they wanted something that married the floating-window aspect of peterme's peterme surf list with the ability to add or remove logs that you get with my userland.
At that point, I piped up and offered that it wouldn't be too hard to do something like that using javascript and cookies. Obviously, there are better ways but they all involve running some level of server-side script and often require setting up a database.
I thought something that the end-user could maintain themselves would be better and, anyway, I was looking for a reason to try doing some work with javascript and cookies. The downside to running all of this on the client, of course, is that preferences aren't carried across machines let alone browsers. Oh well, you take the good with the bad.
While I was writing all of this code, it occurred to me that it the whole idea of maintaining a comprehensive list that individuals could then pick and choose from was a good one and not unique to weblogs. So, I sat down and scratched my head and started chunking the code into little discreet pieces so that it can be used to create "surfmenus" for booksellers, orange distributors, whatever.
That's the part that I like!
how do I use surfmenu?A surfmenu consists of two modes : choose and chosen.
Choose : displays a form with all the items/links that you've entered for that surfmenu (see below). The list is displayed by category, and the category elements are ordered alphabetically. Every element has a check box. If an item is checked it will be included in the cookie for the current surfmenu.
The choose mode, itself, has two modes : vertical and horizontal. The former just displays one monster column that is as long as your list of links. There is a fancy dhtml menu to help you hop, skip and jump from one category to another. You can disable the dhtml-ness of the dhtml if, like others, your reaction is similar to "those kids who all had seizures watching Japanese cartoons". In 'horizontal' mode, the list is presented in rows, each row containing a user-defined number of columns.
Chosen : are only those links that you have checked off from the monster list. They are stored in a cookie on your browser, which is read when you are in 'chosen' mode (the URL of your surfmenu appended with "?chosen".) Like 'choose' mode, links will be displayed by category, with the list of items for each ordered alphabetically.
Note : categories are displayed in the order they are entered in the category array (see below.)
how do I make a surfmenu?A surfmenu consists of four parts :
A webpage : Create a new webpage for each new surfmenu. In the <head> of the page, you'll need to call three separate javascript files : one that loads your list of links, another that contains your preferences for the list, and finally one that contains the code to render the list itself.
In the <body> of the page, include any formatting or design you want and and call the javascript functions (see below) to display the list where you deem appropriate. For a thorough discussion, you can read :
http://aaronland.net/toys/surfmenu/docs/webpage.shtml
A list of links : This is a javascript file with a bunch of arrays for things like category, type, frequency (of update), and finally a big array of arrays for your links.
In the case of the weblogs list, I am linking to a javascript file that brig maintains for her weblog portal. Neat. Brig actually took the idea of storing logs/links in arrays and ran with it adding all kinds of cool options. I'm not really making good use of them in the surfmenu code, but maybe that will come soon. For a thorough discussion, you can read :
http://aaronland.net/toys/surfmenu/docs/list_of_links.shtml
Your preferences : this is another javascript file that contains variables called by the code that does the magic. They include things like the name of the cookie, page titles and any of your own code you want to include on your surfmenu. For a thorough discussion, you can read :
http://aaronland.net/toys/surfmenu/docs/your_prefs.shtml
The code that does all the magic : this is where the functions that you call in your webpage are kept. You shouldn't have to do anything with it (unless you are an "under-the-hood" kind of person) , and you can either download your own copy or link to the one on the aaronland site :
http://aaronland.net/js/surfmenu.js
why is it called surfmenu?Because I spent about 5 minutes trying to think of a clever, yet descriptive, title and then noticed that the filename for peterme's menu was called surf.html. I decided that was good enough for me.
where's the damn weblog list?http://aaronland.net/toys/surfmenu/weblogs.html
downloadYou can download the all the files required for surfmenu from
