[{TableOfContents}]
!!! Section Quick Links

It would be nice to have quick links inserted at each header
* linking to the top of the page
* added: short links to the prev and next section, and to the bottom off the page (new)
* direct editing of that section of the page. See also [BrushedTemplateEditSections] which
   is similar to [Wikipedia|http://en.wikipedia.org/wiki/Help:Contents].

--[DF|DirkFrederickx]
\\Updated on Jul 05, with additional quick links, a symbolic display, and some 
bug fixes as reported by [KieronWilkinson]
\\Update end Sep 05, using standard chars instead of a webdings font which is apparently not standard available on Firefox/Windows.

%%(background:#cccc00; padding-top,padding-bottom:0.5em;)
%%(float:right;margin-left:5px;)
[edit|BrushedTemplateEditSections#DirectEditSectionLink]
%%
%%(float:right;margin-left:5px;)
«[top|BrushedTemplateEditSections#DirectEditSectionLink]
%%
%%


%%(background:#cccc00; padding-top,padding-bottom:0.5em;)
%%(border:1px solid blue; float:right; clear:both; font-size:11pt; color:blue; background:white; font-weight: bold; letter-spacing:0.2em;)
«‹•›» 
%%
__This is a title example: new style__
%%


!! Implementation

Javascript is used to insert some floating dhtml elements just in front of each of the page section.
* the edit-this-section link ( • ) uses an 
  extra {{section}} parameter in the url to jump directly 
  to the correct section during edit. (see [BrushedTemplateEditSections])
* a back-to-top ( « ), previous-section ( ‹ ),
  next-section ( › ) and bottom-of-page ( » ) quick-links do as
  what they are supposed to do.

The ~JavaScript searches through the page to find all header H2, H3 or H4 elements.
Unfortunately, the Table of Contents and the Attachement sections can not be easily distinguished from the actual body contents: some hard-coded checks are needed to skip over them. Also, weblogentries should be skipped, and the quick links should not be rendered
in page preview mode.
(suggestion -- why don't we put the actual body of a page inside a <div id='page'> )
 ''Good idea.  See [IdeaPageContentShouldBeInsideANamedDiv]''

! What you need to do to install this thing

* You need to insert some stuff in your {{template/<your-template/jspwiki.css}}
  in order to properly format the quick links, as well as some javascript.
  Check out [BrushedTemplate]
  

----
Back to [BrushedTemplate], [BrushedTemplateEditSections]

!! Discussion

! Some compatibility changes

#I changed the setAttribute("style", "") to use an IE-compatible way of setting the style, which also works on Firefox, Konquror, etc.
#The page name stuff breaks if you are using nice URL's. To correct this, you can get rid of the getPageName function and replace the URL link with this:

{{{
    a.setAttribute ("href", document.URL + "?do=Edit&section=" + cur++ );
}}}

I have not tried it without using short URL's, but it should work. Thanks for the this great tip!

-- KieronWilkinson

%%(margin:5% 0 5% 0)
Tnx for the feedback.
# Indeed, IE seems not to handle the setAttribute() properly, so it's better to use 
  the xxx.style syntax, which is commonly supported by most modern browsers.
# I corrected the getPageName() function so it accepts shortURLs as well. 
  The suggested  {{?do=Edit...}} seems not to work out well. 
  However, I didn't test it yet on a JSPWiki with shortURLs, so I keep my fingers crossed.
-- [DF|DirkFrederickx]
%%


----

Can you give me a little more detail on the changes to get the section links up? I want to apply them to another template.

--JohnHealey, 27-Jan-2006

;: Goto {{/templates/brushed/scripts/brushed.js}} ; find the javascript object QuickLinks and copy that part to your javascript (or the jspwiki-common.js) This chunck of code contains 2 functions including a {{onPageLoad}} function which does the actual job. Make sure this function gets called after the page has been loaded -- bootstrap code for this is in the {{commonheader.jsp}} of your template. Hopes this helps.--[DF|DirkFrederickx]

I tried following these directions but I am still a bit confused. Is the sectional editing already built into JSPWiki and all this widget does is link to the edit page along with section=<some number>? Are page sections something provided by the BrushedTemplate? If it is indeed possible to integrate this sectional editing into any template semi-easily, do you think you could provide a clearer step by step way to do it? This is a great feature and I would love to be able to implement it. Thanks :)--[Evan|elennick] 10/9/07

;: Sectional editing is currently only available in the BrushedTemplate. It requires a little piece of Javascript (see brushed.js), which inserts the Section Quicklinks at each header.  The edit-section feature also requires a change to editors/plain.jsp and some additional javascript since it needs to filter the section under edit and allows to switch between sections during edit. There has been no changes to the core engine of jspwiki.  If you have sufficient javascript and jsp knowledge, it's shouldn't be hard to figure out how this works, and add it to your own template. -- [DF|DirkFrederickx]

!problem with the quick links interpretation
I've been testing JSPWiki with the brush template and all the users get confused with these quick links. couldn't we have instead "top ‹ edit › down", or where can I change this? instead of "top" and "down" it would be ok arrows as before but pointing up and down, not left and right. This left and right is confusing. Also the small circle &bull; could be replaced by "edit section" (optionally in the preferences)

!where can I change the quick links? &laquo; &lsaquo; &bull; &rsaquo;  &raquo;
I would like to change the symbols used in the quick links but I couldn't find where. I found one page but it only changed in the preferences...
;:Look in brushed.js, section on Quicklinks, nl. the onPageLoad routine. It's also possible to overwrite this info via the skin.css, for example I you would like to show images instead. --[DF|DirkFrederickx]