Difference between revisions of "Dynamic Navigation"
m |
|||
(11 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
+ | {{legacy}} | ||
+ | |||
== Show/Hide Boxes == | == Show/Hide Boxes == | ||
− | This method is from [[News:Main Page|Wiki News front page]], | + | This method is from [[News:Main Page|Wiki News front page]], which are maintained by Wikipedia users [[w:User:Mike Dillon|Mike Dillon]], [[w:User:R. Koot|R. Koot]] and [[w:User:SG|SG]]. The main page covering this is [[wikipedia:Wikipedia:NavFrame|Wikipedia:NavFrame]] (I think). It involves three parts, CSS styles, JavaScript code and a template, which follow here: |
{{Dynamic navigation | {{Dynamic navigation | ||
|BGCOLOR=#ffcccc | |BGCOLOR=#ffcccc | ||
− | |TITLE=Add these CSS rules to | + | |TITLE=Add these CSS rules to '''MediaWiki:Common.css''' |
|CONTENT=<css> | |CONTENT=<css> | ||
div.Boxmerge, | div.Boxmerge, | ||
Line 60: | Line 62: | ||
</css> | </css> | ||
|SMALLCONTENT= | |SMALLCONTENT= | ||
− | |EXT=NavOnce | + | |EXT=NavOnce NavShow |
}} | }} | ||
− | |||
{{Dynamic navigation | {{Dynamic navigation | ||
|BGCOLOR=#ccffcc | |BGCOLOR=#ccffcc | ||
− | |TITLE=Add this JavaScript to | + | |TITLE=Add this JavaScript to '''MediaWiki:Common.js''' |
|CONTENT=<js> | |CONTENT=<js> | ||
// for backwards compatibility | // for backwards compatibility | ||
Line 99: | Line 100: | ||
var reCache = {}; | var reCache = {}; | ||
return function (element, className) { | return function (element, className) { | ||
− | return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className); | + | return (reCache[className] |
+ | ? reCache[className] | ||
+ | : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className); | ||
}; | }; | ||
})(); | })(); | ||
Line 265: | Line 268: | ||
|EXT=NavOnce | |EXT=NavOnce | ||
}} | }} | ||
− | |||
{{Dynamic navigation | {{Dynamic navigation | ||
|BGCOLOR=#ccccff | |BGCOLOR=#ccccff | ||
− | |TITLE=Create the | + | |TITLE=Create the '''Template:DynamicNavigation''' containing this wikitext |
|CONTENT=<pre> | |CONTENT=<pre> | ||
<div style="clear:both;text-align:center;{{#if:{{{WIDTH|}}}|width:{{{WIDTH}}}| }};margin:auto;" align="center" class="NavFrame {{{EXT|}}}"> | <div style="clear:both;text-align:center;{{#if:{{{WIDTH|}}}|width:{{{WIDTH}}}| }};margin:auto;" align="center" class="NavFrame {{{EXT|}}}"> | ||
Line 289: | Line 291: | ||
WIDTH = Optional parameter to limit width | WIDTH = Optional parameter to limit width | ||
EXT = Optional extentions [space seperated list. case-sensitive] so far only NavOnce | 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> | + | EXT=NavOnce = only allow one navbox with this extention visible at a time (closes other one's) |
− | </noinclude> | + | </pre><tt> </pre></noinclude></tt><pre> |
</pre> | </pre> | ||
|SMALLCONTENT= | |SMALLCONTENT= | ||
Line 296: | Line 298: | ||
}} | }} | ||
− | == | + | == 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. | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |
Latest revision as of 22:41, 18 November 2014
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:
<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)</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.