An idea for generating navigation based on header tags.

on-this-page.js

  /*
   * ON THIS PAGE
   * an idea for generating heirarchy from P.O.S.H.
   */
  on_this_page = $("#on-this-page");
  $("#page h2").each(function(index,element){
    element = $(element);


    id = element.attr('id');
    if (id == "")
    {
      id = "on-this-page-h2-" + index;
      element.attr('id',id);
    }
    
    on_this_page.append('<li id="' + id + '-li"><a href="#' + id + '" class="on-this-page-a">' + $(element).text() + '</a><ul id="'+ id + '-ul"></ul></li>');
  });
  
  $("#page h3").each(function(index, element){
    element = $(element);
    
    id = element.attr('id');
    if (id == "")
    {
      id = "on-this-page-h3-" + index;
      element.attr('id',id);
    }

    the_h2_id = $(element).prevAll("h2").first().attr('id');
    console.log(the_h2_id);
    the_h2_ul = $('#' + the_h2_id + '-ul');
    console.log(the_h2_ul);
    the_h2_ul.append('<li id="' + id + '-li"><a href="#' + id + '" class="on-this-page-a">' + $(element).text() + '</a></li>');
  });
  
  $(".on-this-page-a").click(function(e){
    e.preventDefault();
    $.scrollTo($(this).attr("href"), {duration:750, easing:'swing'});
  });
  /*
   * END ON THIS PAGE
   */