Extension:NavContent

NavContent is an extension that implements a type of navigational frame, i.e. a mechanism for users to expand (and collapse) certain page content by clicking on a link. This extension goes a bit beyond the simplest form of navigational frame and the main features of this implementation are
 * show and hide content,
 * dynamic loading of content,
 * toggle between content, and
 * step through content.

Show and hide content
Insert the following line of code in your wiki text

This will create a simple navigational bar.


 * [[image:NavContent_A.png]]

If you click on the "Answer" link the content associated with this link will be revealed. In this case it will just be a link to a non-existent page "Answer to exercise 1.1".


 * [[image:NavContent_B.png]]

One more click on the "Answer" link will hide the content again.

Dynamic loading of content
Continuing with the example above, you should now create a new page "Answer to exercise 1.1" in the wiki with the following content:

If you now click on the "Answer" link, on the page containing the navigation bar, you will this time first see a flash of a loading message


 * [[image:NavContent_C.png]]

and then the content of your newly created page is inserted instead of the red-link you saw before.


 * [[image:NavContent_D.png]]

Toggle between content
You should now expand the NavContent code to:

This time the navigation bar contains two links "Answer" and "Solution".


 * [[image:NavContent_E.png]]

These links will individually show/hide the content associated with them. If, for example, you click on "Solution" a link to the non-existent page "Solution to exercise 1.1" will be folded out.


 * [[image:NavContent_F.png]]

Now, clicking on "Answer" will replace the current content with the content associated with the "Answer" link, i.e. the "Answer" and "Solution" links toggle each other.


 * [[image:NavContent_G.png]]

(You can, of course, have any number of links in the navigational bar and they all toggle each other.)

Step through content
To complete this example you should now create a page "Solution to exercise 1.1" in the wiki with the following content:

On the page containing the #NAVCONTENT function the text from the page "Solution to exercise 1.1" is, as expected, injected as the content under the "Solution" link. However, if you click on "Solution" only the text up to the first   is displayed and a second navigational bar is displayed at the bottom.


 * [[image:NavContent_H.png]]

You can use this so-called progress bar to reveal or hide parts of the page with the links "Show more", "Show less", "Show all" and "Hide all". For example, clicking on "Show more" will show the second part of the solution.


 * [[image:NavContent_I.png]]

(As you might have guessed: inserting more   lines will subdivide the included material into more parts for the user to step through.)

Show full content on printable version
If you click on the "Printable version" link in the toolbox (located in the sidebar of the page), then the resulting printable page will contain all loaded material in an expanded view.


 * [[image:NavContent_J.png]]

Install jQuery
Install the javascript library jQuery.

Save the code
Create the directory $IP/extensions/NavContent and save the code in the files NavContent.php, NavContent.i18n.php, NavContent.js, NavContent.css and NavContentPrint.css</tt>, respectively, in that directory. You should also download the image file Loading.gif</tt> and save it in the same directory. (Optionally, download a suitable image from www.ajaxload.info.) This is the image that is shown while content is being loaded.

Configure the extension
Add the following lines at the end of the file $IP/LocalSettings.php</tt>

where
 * $wgJQueryRoot</tt> is the path to the javascript file jquery.js</tt>,
 * $wgNavContentRoot</tt> is the path to this extension.

Further configuration: <ol> <li>If you want some javascript functions to run on included content then you need to add these functions to the array $wgNavContentSubpagesJsCode</tt> before NavContent.php</tt> is included. These functions will be fed a DOM-pointer to the included material as an argument. For example, if you use the JsMath extension and want jsMath to be run on included content you write

which will result in jsMath.Process(...)</tt> being run after a page is loaded. (If you do this, make sure you set autoload = 0</tt> in the jsMath configuration file easy/load.js</tt>.)</li> <li>If you do not want all content to be expanded when the user is viewing a printable version of the page then you should write

before NavContent.php</tt> is included. </li> <li>You should consider changing the two style sheet files NavContent.css</tt> and NavContentPrint.css</tt>. At present they are merely useful for very simplistic needs. </ol>

Loading.gif
Right-click and save this image:

History

 * Version 0.9:Initial version
 * Version 0.9.1:Pages referenced by #NAVCONTENT are now allowed to contain a slash. (Bug reported by Daniel E. Forester).
 * Version 0.9.2:German translation of messages. (Thanks to Ruedi Seiler).
 * Version 0.9.3:French translation of messages.