.Net ramblings
# Tuesday, 21 April 2009
Javascript dynamic anchor select menu
I got a request from a client for a 'mini' navigation menu to appear on a page to allow the user to 'jump' to the various sections of the page.  Maintaining a set of named anchor hyperlinks in a document (with a javascript-based select menu) is not really an option for someone who doesn't know HTML, which is most people who use content management.  In the wrong hands this creates more trouble than it's worth. 
so i started thinking. the documents in question are well structured, using paragraphs and headings, as enforced by the content management system.  i worked out this solution which is exactly what i need, a maintenance free javascript jump menu, that doesn't add clutter to the document with named anchors.  it assumes that the all H2 tags should be displayed as links in the menu.  the javascript iterates through the H2 tags and loads up the menu, with a ScrollTo function used when an item is selected.

here's a screenshot


The code for the HTML page:
<script src="/JumpMenu.js" type="text/javascript"></script>
<select id="jumpNavSelect" name="jumpNavSelect" onchange="JumpToHeading(this.selectedIndex)">
<option value="">On this page...</option>
</select>
and the JumpMenu.js file
var array;

function CreateAnchorMenu() {
array = document.getElementsByTagName("h2");
var src = document.getElementById('jumpNavSelect');
// iterate through all H2 headings, add dropdown items for each.
for (var i = 0; i < array.length; i++) {
var heading = array[i];
var text = heading.firstChild.nodeValue;
if (!text)
continue;
src[i+1] = new Option(text, i);
}
}

function JumpToHeading(HeadingIndex) {
if (HeadingIndex == 0)
return;
var heading = array[HeadingIndex-1];
ScrollToElement(heading);
}

function ScrollToElement(theElement) {
var selectedPosX = 0;
var selectedPosY = 0;
while (theElement != null) {
selectedPosX += theElement.offsetLeft;
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
window.scrollTo(selectedPosX, selectedPosY);
}

window.onload = CreateAnchorMenu;

Tuesday, 21 April 2009 13:30:58 (GMT Daylight Time, UTC+01:00)  #    Comments [3]  .Net General | Asp.Net

Thursday, 20 August 2009 08:59:48 (GMT Daylight Time, UTC+01:00)
This is a GREAT little tool to use. I have been researching named anchors and Jump Menus for a while and I have a question that idirectly relates to this. I am building a web site for my church (non-profit organization). I am fluent in HTML and I use Dreamweaver CS3. There is a page where I would like to use a Jump menu to take me to the named anchors within the same page. However I am not able to do it. I am setting the values as "index.html#anchor1" I have tried referencing the anchor alone "#anchor1" But none of these work. I have tried both with and without a go button. Is there any way I can implement your "script" to my HTML page so that I could get rid of my anchors and replace them with H2's? Or, do you know the proper way to link the jump menu to the named anchors?

ANY INPUT WOULD HELP

Thank you in advance,

Elias
Elias Tenopala
Thursday, 20 August 2009 09:25:25 (GMT Daylight Time, UTC+01:00)
hi Elias. you can remove all your anchors and the hyperlinks to them. this script will do it automatically for you, as long as you add a H2 heading for each section/paragraph that you want included in the links. all you need to do is copy and paste the HTML code to the top of your page, and make sure you have the JumpMenu.js file in your root folder.
best of luck
tim
tim
Sunday, 09 October 2011 17:58:28 (GMT Daylight Time, UTC+01:00)
hi tim
i wonder if you could spare 5-10mins to help me fix this its not the header but the dropdown menu basicly am trying to not use a drop down menu it
ive basicly tryed putting id="jumpNavSelect" name="jumpNavSelect" onchange="JumpToHeading(this.selectedIndex)" this everywhere it should go but its not working so it makes me think that its the JS its self that needs fixing or adapting to make it work here a link to wot am working on http://orderoftherisen.dyndns-web.com/sites/badges/menutest.html
OpenID
Please login with either your OpenID above, or your details below.
Name
E-mail
Home page

Comment (Some html is allowed: a@href@title, strike) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

[Captcha]Enter the code shown (prevents robots):

Live Comment Preview