Dynamic Navigation

Legacy: This article describes a concept that has been superseded in the course of ongoing development on the Organic Design wiki. Please do not develop this any further or base work on this concept, now this page is for historic record only.

Show/Hide Boxes

This method is from [Page|Wiki News front page], which are maintained by Wikipedia users Mike Dillon, R. Koot and SG. The main page covering this is Wikipedia:NavFrame (I think). It involves three parts, CSS styles, JavaScript code and a template, which follow here:

Add these CSS rules to MediaWiki:Common.css

<css> div.Boxmerge, div.NavFrame {

       margin: 0px;
       padding: 2px;
       border: 1px solid #aaaaaa;
       text-align: center;
       border-collapse: collapse;
       font-size: 95%;

} div.Boxmerge div.NavFrame {

       border-style: none;
       border-style: hidden;

} div.NavFrame + div.NavFrame {

       border-top-style: none;
       border-top-style: hidden;

} div.NavPic {

       background-color: #ffffff;
       margin: 0px;
       padding: 2px;
       float: left;

} div.NavFrame div.NavHead {

       height: 1.6em;
       font-weight: bold;
       font-size: 100%;
       background-color: #efefef;
       position:relative;

} div.NavFrame p {

       font-size: 100%;

} div.NavFrame div.NavContent {

       font-size: 100%;

} div.NavFrame div.NavContent p {

       font-size: 100%;

} div.NavEnd {

       margin: 0px;
       padding: 0px;
       line-height: 1px;
       clear: both;

} a.NavToggle {

       position:absolute;
       top:0px;
       right:3px;
       font-weight:normal;
       font-size:smaller;

} </css>

Add this JavaScript to MediaWiki:Common.js

<js> // for backwards compatibility var addLoadEvent = addOnloadHook;

// Cookie set/get functions from W3C function setCookie(c_name, value, expiredays) {

 var exdate = new Date();
 exdate.setDate(exdate.getDate() + expiredays);
 document.cookie = c_name+ "=" +escape(value) +
 ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());

}

function getCookie(c_name) {

 if (document.cookie.length > 0) {
   c_start = document.cookie.indexOf(c_name + "=");
   if (c_start != -1) { 
     c_start = c_start + c_name.length + 1; 
     c_end = document.cookie.indexOf(";", c_start);
     if (c_end == -1) c_end = document.cookie.length;
     return unescape(document.cookie.substring(c_start, c_end));
   } 
 }
 return "";

}

// hasClass()

// Description: Uses regular expressions and caching for better performance.
// Maintainers: w:User:Mike Dillon, w:User:R. Koot, w:User:SG

var hasClass = (function () {

   var reCache = {};
   return function (element, className) {
     return (reCache[className]
       ? reCache[className]
       : (reCache[className] = new RegExp("(?:\\s

Create the Template:DynamicNavigation containing this wikitext

<div style="clear:both;text-align:center;{{#if:{{{WIDTH|}}}|width:{{{WIDTH}}}| }};margin:auto;"  align="center" class="NavFrame {{{EXT|}}}">
<div class="NavHead" style="clear:both;text-align:center;background:{{{BGCOLOR}}};">{{{TITLE}}}</div>
<div class="NavContent" style="clear:both;text-align:left;">
{{{CONTENT}}}
</div>
<div class="NavContent" style="clear:both;font-size: 90%;text-align:left;">
{{{SMALLCONTENT|}}}
</div>
</div>
<noinclude><pre>Parameter:
  BGCOLOR = colour of the heading of the navigation box
  TITLE   = heading of the navigation box
  CONTENT = contents of the navigation box.  Use &#124; to separate links.
            It is not possible to include a pipe ("|") in the contents
            as this symbol is used to separate parameters.
  SMALLCONTENT = OPTIONAL. as per CONTENT but produces 90% fontsize
  WIDTH   = Optional parameter to limit width
  EXT     = Optional extentions [space seperated list. case-sensitive] so far only NavOnce
      EXT=NavOnce    =    only allow one navbox with this extention visible at a time (closes other one's)

  </pre></noinclude>

To make the first open by default

At the end of the last function (called createNavigationBarToggleButton) there are two loops which close all the navbars. The first loops closes the separate navs and the second closes the grouped ones (that can have only one open at a time). To make either kind default to having their first navbar open, start the loop at 2 instead of 1.