Dynamic Navigation

Show/Hide Boxes

Hi Peder, I've added the DynamicNavigation code from WikiNews front page, it involves three parts:

• MediaWiki:Common.css - the CSS styles
• MediaWiki:Common.js - the JavaScript code which extends the DynamicNavigation areas
• Template:Dynamic navigation - The template used to create a DynamicNavigation area

In your wiki the JS and CSS articles contain no other code apart from that required by DynamicNavigation, but when setting it up on a different wiki you may find those articles already populated. If this is the case, just append them with the DynamicNavigation code from the corresponding articles on this wiki. The Dynamic navigation template contains usage instructions.

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)

Language Preference

I've made this quick extension, ExtraMagic, which will add some useful magic words including the current users name, language pref and skin pref. They are accessed with the following magic words:

{{CURRENTUSER}}
{{CURRENTLANG}}
{{CURRENTSKIN}}

If you also install ParserFunctions then you can then do conditional content based on lang pref, for example:

<div class="{{#ifeq:{{CURRENTLANG}}|en|english-example|other-langs}}">

which would give the following for english users

<div class="english-example">

or this for everyone else

<div class="other-langs">