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.

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.


This is a title example: new style

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

  • 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
  1. I changed the setAttribute("style", "") to use an IE-compatible way of setting the style, which also works on Firefox, Konquror, etc.
  2. 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

Tnx for the feedback.
  1. Indeed, IE seems not to handle the setAttribute() properly, so it's better to use the syntax, which is commonly supported by most modern browsers.
  2. 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

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

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 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
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 • could be replaced by "edit section" (optionally in the preferences) 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

Add new attachment

Only authorized users are allowed to upload new attachments.
« This page (revision-29) was last changed on 10-Oct-2007 07:13 by