Difference between revisions of "Dynamic Navigation"

From Organic Design
Jump to: navigation, search
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]], it involves three parts, CSS styles, JavaScript code and a template, which follow here:
+
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 [[MediaWiki:Common.css]]
+
|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 [[MediaWiki:Common.js]]
+
|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 [[Template:DynamicNavigation]] containing this wikitext
+
|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>&nbsp;&nbsp;&lt;/pre>&lt;/noinclude></tt><pre>
 
</pre>
 
</pre>
 
|SMALLCONTENT=
 
|SMALLCONTENT=
Line 296: Line 298:
 
}}
 
}}
  
== Language Preference ==
+
== To make the first open by default ==
I've made this quick extension, [[OD:Extension:ExtraMagic.php|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:
+
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.
<pre>
 
{{CURRENTUSER}}
 
{{CURRENTLANG}}
 
{{CURRENTSKIN}}
 
</pre>
 
 
 
If you also install [[MW:Extension:ParserFunctions|ParserFunctions]] then you can then do conditional content based on lang pref, for example:
 
<pre>
 
<div class="{{#ifeq:{{CURRENTLANG}}|en|english-example|other-langs}}">
 
</pre>
 
 
 
which would give the following for english users
 
<pre>
 
<div class="english-example">
 
</pre>
 
 
 
or this for everyone else
 
<pre>
 
<div class="other-langs">
 
</pre>
 

Latest revision as of 00:41, 19 November 2014

Legacy.svg 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, this is only useful for a historic record of work done. You may find a link to the currently used concept or function in this article, if not you can contact the author to find out what has taken the place of this legacy item.


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:




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.