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.
<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>
<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
<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 | 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">