Last updated: 20 Apr 2012
AutoAnchor Menu Standalone Usage
Usage ConceptsIn general to use the script you need to perform a series of scatter-gather operations where:
- Scatter will distribute named anchors to specific points of the document (e.g. to top, bottom or to header
- Gather will assemble menu from the scattered named anchors.
- Links to top and to bottom can be put at the beginning and/or at the end of the menu;
Links to main headers (e.g.
H1) could be at the beginning of the menu and less significant (e.g.
H2etc) after that or could be mixed to produce hierarchy.
Usage InstructionsTo use the script do the following:
- Download script code, put it on your server and reference the script in page header;
- Create headers for sections of your article (e.g. using
- Initialize AutoAnchor instance:
var a = AutoAnchorMenu(obj, options);Where:
|obj||Id or instance of the container to put generated menu into.|
|options||Associative array of options.|
|entryMarkup||Html code for single menu entry. In it,
Html code to include after single menu entry. Will be placed after any submenu
items of the menu item.
Html code that will be inserted before entry with a level lower than previous entry.
Html code that will be inserted before entry with a level higher than previous entry.
Marker variable that tells if a scattered anchor has already been handled. Changing
this value after a menu has been agthered allows using second AutoAnchor Menu from already
When scattering to tag name everything before tag with this class will be ignored. Useful
when page contains same
When scattering to tag name everything after tag with this class will be ignored. Useful
when page contains same
Create anchor names from header texts stripping unwanted characters and replacing spaces with
underscore. Please note that header texts must be unique.
AutoAnchor instance can be initalized during one of the following:
- During the normal HTML parsing flow if menu you want to create is located after the aticle in HTML.
domreadyevent handler if you're using a framework that supports that (such as jQuery or MooTools).
loadevent handler (not recommended).
- Use the AutoAnchor instance to perform scatter-gather operations:
Scatters anchors to specific tags in the document.
||Scatters anchors at the top and at the bottom of the document respectively.|
The following invocation will generate a menu that has links to top and to bottom and a two-level menu with links to
var anch = AutoAnchorMenu(); anch.scatterTop('To top') .scatterBottom('To bottom') .gather() .scatter('h1') .scatter('h2', 2) .gather();