IP250 jQuery applied to MediaWiki (the course website)

You might remember that I was concerned that the course pages were getting difficult to navigate. This is partly because I am using a wiki format (MediaWiki), but mainly because the pages are very long.

So I’ve enhanced the navigation through a little bit of applied jQuery. If you visit the longer course pages now, when you scroll below the standard MediaWiki menu on the left side, a new navigation pane appear in the left panel. This is an HTML5 <nav> element that’s being constructed dynamically (reading it from the table of contents automatically generated for every page in the wiki).

This navigation pane has links to all the headings in the page and will remain visible regardless of scrolling unless you reload the page entirely, or scroll to the top.

If the content of navigation pane is too long to fit then a scroll bar will be visible.

If you resize the window, the navigation pane will resize to fit the height of the window.

You can see it running live on the course site, and I’ve put a documented version here: Fixed Menu for MediaWiki

What you see before you scroll down.
Course page before you scroll down - empty space below MediaWiki menu

When you scroll or page down.
The new navigation bar appears and it will persist while you navigate through the page.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s