Dynamic Navigation
Show/Hide Boxes
This method is from [Page|Wiki News front page], it involves three parts, CSS styles, JavaScript code and a template, which follow here:
<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">