Wikipedia talk:NavFrame

Previously unsectioned comments

I found an example of a use of NafFrame which was apparently copied from another example, and was apparently messed right up. It used three layers of nested divs where only one was needed. I spent 45 minutes looking for docs, and although this was used in dozens of pages and templates, I could not find any docs.

So I started this page. Pleas fill in the copious blanks. —Michael Z. 2006-10-31 05:44 Z

If there are more than 3 instances of the <div class="NavContent"> on a page then they will all automatically hide themselves. Have a look at MediaWiki:Common.js and find the variable called NavigationBarShowDefault. It is set to 3. Some people put 3 instances of <div class="NavContent"> on a page to force the content to be hidden. --Squilibob 10:02, 21 December 2006 (UTC)

Tabs

NavFrame is not bad, but what I want to see is an implementation of a tabbed interface. With multiple NavFrame elements in a row, I'd like to see all of the headings in one line as tabs, and clicking them shuffles between multiple virtual cards. Can this be done in Wikipedia? —Michael Z. 2006-10-31 05:49 Z

Yes, it already is done in Wikipedia! ...Well, not so much Wikipedia, but MediaWiki — on the user preferences page using Monobook.css. It accomplished through some kind of JavaScript display trick with the form fieldsets. I have no idea how to apply the style into wiki content, but you're welcome to give it a shot. —Down10 ^TACO 09:06, 13 January 2007 (UTC)

table-based version

I've designed a similar solution based on tables. It should be slightly more robust and cause less accessibility issues (and separated the show/hide fucntionality from the navigation box layout at the same time). I'll try to document it here as well. —Ruud 12:44, 1 November 2006 (UTC)

Display issues in Classic skin

There's a minor problem with the javascript, but I don't know how to deal with. In the monobook skin, the [show]/[hide] button is successfully rendered on the right side of the header, in non-bold text. In the classic skin, there is no space between the button and the header text, and the button is bold if the header is bold. I would fix it, by my javascript skills are inadequte for the task of figuring out what's wrong. Karl Dickman ^talk 17:36, 28 November 2006 (UTC)

Fixed by moving CSS code to MediaWiki:Common.css. Karl Dickman ^talk 09:43, 5 December 2006 (UTC)

Category:List templates: "hide" instead of "show"

Why does the template {{template category}} display "hide" instead of "show" (while the content is hidden) when the category page is opened? --Eleassar ^{my talk} 12:56, 18 January 2007 (UTC)

Yes, this also seems to happen elsewhere; I'll try to remember to post some links here as/when I come by it again. I suspect it's a bug somewhere...?  Regards, David Kernow (talk) 10:51, 25 January 2007 (UTC)

This has been fixed already [1], for an explanation see [2]. You should purge your browser's cache. --Eleassar ^{my talk} 13:27, 25 January 2007 (UTC)

Thanks for the tip, Eleassar. Hopefully this anomaly will soon be history here... David (talk) 03:32, 26 January 2007 (UTC)

[hide]/[show] link on the left...?

Is it possible to instruct NavFrame to place the [hide]/[show] link on the left-hand side of the page,
e.g. (if using {{hidden begin}} and {{hidden end}}):

[show]  Titlebar heading

...?  Thanks for any help, David Kernow (talk) 10:51, 25 January 2007 (UTC)

I've made a hack that's achieved this but it very depend on the current code. --Dispenser 07:59, 10 February 2007 (UTC)

Thanks, Dispenser; looks very nifty. Have added a couple of variations to the page. Yours, David (talk) 19:14, 10 February 2007 (UTC)

NavContent on span instead of div‽

What needs to be done so that the hiding will work if a SPAN is used instead of a DIV for the inner section? I have an application where I need a subset of the items (which is a run-on list of words) to be visible at all times. Some of them remain outside the NavContent element—basically the section is only semi-collapsed, which is exactly what I need. This "works" when DIVs are used, except that DIV is a block element, so when they are all visible there is a line break that I don't want which breaks up my run-on list. ⇔ ChristTrekker 19:03, 7 February 2007 (UTC)

I suspect the answer may be "Sorry, you need to use a div for the HTML to work", but in lieu of any HTML experts passing by, is there a link to follow to the situation you describe...?  Regards, David Kernow (talk) 01:36, 8 February 2007 (UTC)

I'm thinking a small hack needs to be made to the JavaScript. MJtemplate is my WIP - original I'm trying to improve on top, my experiment underneath. ⇔ ChristTrekker 16:50, 8 February 2007 (UTC)

You could try setting the display: CSS value to either inline-block or inline; however, this will likely break the functionality that you wanted. --Dispenser 07:56, 10 February 2007 (UTC)

Both of them looked/functioned identically to the original—no change at all. At least in Firefox, which has good CSS support, so I'm actually a bit surprised. ⇔ ChristTrekker 05:22, 13 February 2007 (UTC)

I played around with the navframe code back in July to create inline expansion using span elements and inline Divs seem to have linebreaks built-in. It even supported alternate texts for hide/show with the title attribute. Couldn't get anyone to test or implement it though. Gimmetrow 22:49, 24 February 2007 (UTC)

Printable version

Pages that use NavFrames hide content when the page is printed out. Pages or templates using NavFrame should have functionality built into them so that when the user is viewing the printable version of the page the NavFrame is automatically expanded. ~MDD4696 14:33, 16 February 2007 (UTC)

Should be doable: NavFrame should be modified to use CSS classes to show and hide stuff (instead of directly setting the display property to inline or hidden) and those classes need to be added to common.js to correctly show and hide stuff in webbrowsers, but always show the contents when printed. I'll try to code something similar for the collapsible tables (which should also work correctly in combination with the navbox class, which should always hides the table when printed.) I refuse to work on the currently undocumented, unmaintained and unstable implementation of NavFrame (but might rewrite it from scratch in the future.) —Ruud 15:04, 16 February 2007 (UTC)

That would be great. I'd try to unravel it myself but don't have the time. ⇔ ChristTrekker 16:13, 19 February 2007 (UTC)

• Suggest that if/when this issue addressed, the printable version mimics the state of each NavFrame on the page rather than automatically expanding all. Regards, David Kernow (talk) 16:17, 16 February 2007 (UTC)

It's (obviously, I hope) quite hard to expand such frames after being printed so I don't beleive this is a good idea. NavFrame is abused in several places to hide portions of text (not just navigations boxes, actual paragraphs or sections of the article) and those should really be expanded when printed. On the other hand we have the navigational boxes which have absolutely no use on a printed version (paper not supporting hyperlinks and such) and should therefore not even leave a header of a collapsed box behind. —Ruud 18:03, 16 February 2007 (UTC)

Is there a reason why the meta navigation templates don't use class="noprint"? —The preceding unsigned comment was added by Dispenser (talk • contribs) 15:39, 17 February 2007 (UTC).

Won't Hide to Start

I've been having some difficulty with this code here, whenever I enter it to my homepage (which is where I want it), it doesn't automatically hide the template I've put in - unless I say style="display:none" in the navcontent - but then the hide/show starts out as hide even though the content is hidden. Any ideas?

<div class="NavFrame">
<div class="NavHead">User Talk Templates</div>
<div class="NavContent">
{{User:Pilotguy/Warnings}} </div> </div>

Thanks for any help you guys can give (oh and note: if I use {{Hidden}} and say 2={{User:Pilotguy/Warnings}} for the second parameter - it works, strangeness.Daniel()Folsom ^T|_C|^U 21:22, 19 February 2007 (UTC)

Wrapping NavFrame around existing content

Hi! I just wrote some javascript to remove some, er, clutter from wikipages (if you've edited more than a few pages, the copywrite warnings are a little redundant). Source is in User:Saintrain/J/deSpamWiki.js. Among the functions, it will put the edit-page "special characters" text block into a collapsed NavFrame. This releases a lot of real estate.

The essence:

• look for the <div ... class="editpage-specialchars"> ... </div>
• create the NavFrame divs
• re-parent the "editpage" div as the NavContent div
• call toggleNavigationBar to collapse it.

So, to all of you who thought of NavFrame and implemented and documented it, Thanks!!! --Saintrain 01:44, 19 March 2007 (UTC)

P.s. and Thanks!!! to Firebug for helping me id the blocks (and maybe find a typo or two).

On another wiki

If I wanted this on another wiki, what would I have to copy? The stuff from Common.css and Common.js?--Richard (Talk - Contribs) 22:12, 20 May 2007 (UTC)

Answer (15 months later) Manual:NavFrame Calendar (talk) 17:12, 15 September 2008 (UTC)

Keeping table width

How do you keep the table the same width when it is closed? I'm trying to replicate collapsible tables in another wikipedia, and they become narrower when the content is set to display:none (because the width is then determined by the width od the text in the first row only). This doesn't happen with the examples here, even though the code seems to be the same. Is there some trick to it? --Tgr 22:19, 20 May 2007 (UTC)

collapsable + sortable table?

Is it possible to get a collapsable and sortable table? ∞Σɛ_Þ² ^(τ|c) 12:34, 26 May 2007 (UTC)

See the new section WP:NavFrame#Sortable collapsible tables.--Patrick 08:12, 28 May 2007 (UTC)

Subsection has since been removed. Calendar (talk) 17:13, 15 September 2008 (UTC)

Table of content

• If sections are hidden inside NavFrames, is it possible to make the associated link in the TOC functional?user:hillgentleman|user talk:hillgentleman|Sat, 26 May 2007 14:25:36 +14:25 14:25, 26 May 2007 (UTC)

How to install

This may be obvious to some, but others seem to find this NavFrames feature difficult to enable on their own wiki:

1. View the source for MediaWiki:Common.js copy and past it's contents into the MediaWiki:Common.js article at your wiki.
2. View the source for MediaWiki:Common.css copy and past it's contents into the MediaWiki:Common.css article at your wiki.

Note that only some portion of these articles is required for NavFrames and Sortable tables, though I'm not sure which parts, perhaps someone else can clarify which are required.

Note that the MediaWiki media player portion of these Common files will call some http .js code. This will cause some browsers to report an https/http SSL mismatch error as some of the content is not encrypted. If your site is running SSL you may want to remove or comment out this section of both articles to prevent this error.

Note that if the show/hide buttons aren't showing up on your frames, this is probably being caused because some portions of MediaWiki:Common.js call some http .js code. There's a possibility that these .js codes cause JavaScript errors on your page thus preventing the show/hide buttons from showing up. As described above, you may want to remove or comment out this section. —Preceding unsigned comment added by Figure002 (talk • contribs) 14:22, 25 June 2008 (UTC)

--D0li0 00:36, 7 July 2007 (UTC)

I need to know which specific parts are required because I thought I copied all relevant parts but I don't get the [show]/[hide] controls. :( --Gamer Eek 07:09, 22 August 2007 (UTC)

Javascript error: "hasClass is not defined" in MediaWiki:Common.js on line 48:

function createCollapseButtons()
{
    var tableIndex = 0;
    var NavigationBoxes = new Object();
    var Tables = document.getElementsByTagName( "table" );

    for ( var i = 0; i < Tables.length; i++ ) {
        if ( hasClass( Tables[i], "collapsible" ) ) {
            NavigationBoxes[ tableIndex ] = Tables[i];
            Tables[i].setAttribute( "id", "collapsibleTable" + tableIndex );

--Gamer Eek 03:23, 23 August 2007 (UTC)

OK, turns out it was becuase I didn't have this variable defined in my MediaWiki:Common.js file:

 /* Test if an element has a certain class **************************************
  *
  * Description: Uses regular expressions and caching for better performance.
  * Maintainers: [[User:Mike Dillon]], [[User:R. Koot]], [[User:SG]]
  */
 
 var hasClass = (function () {
     var reCache = {};
     return function (element, className) {
         return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className);
     };
 })();

--Gamer Eek 03:31, 23 August 2007 (UTC)

I was able to get m:Help:Collapsing work in tables adding the "Collapsible tables" section from m:MediaWiki:Common.js into my skins/common/wikibits.js --Subfader (talk) 22:16, 27 March 2008 (UTC)

More detailed instructions: Manual:NavFrame Calendar (talk) 17:12, 15 September 2008 (UTC)

NavContent introduction improved

I elaborated the introductory comments on NavContent divs for the benefit of beginning coders. --Brad 12:16, 29 August 2007 (UTC)

Hide tags doubled up

For some reason on my Wiki it displays two [hide] links on the left hand side (rather than the right, which is where I thought it defaulted to), one of which hides, the other of which acts like a show, but then tries to hide. The table in question is supposed to be autocollapsed by default, but it never seems to be. Looking at the table code, the syntax seems to match the examples given, but I'm not sure why it's not working. Any ideas? --TheSweet 04:44, 4 September 2007 (UTC)

Same with me. My wiki is in XML (perhaps it is related?). Any solution? SSPecter ^Talk|E-Mail ◆ _{00:05, 7 April 2008 (UTC)}.

I had this problem until I removed a second redundant block of javascript in MediaWiki:Common.js for the Collapsible Tables. The function CreateCollapseButtons () was apparently being called twice to produce the two controls. --FGrose (talk) 01:02, 13 November 2009 (UTC)

I too had this problem until yesterday. The hide/show buttons were displayed twice, on the right side in my case. However, this only happened with my custom MediaWiki skin, so I knew it had to be an error in my skin file. It turned out that I had to remove the call to a function printTrail(). I don't know what it does, but maybe it caused some Javascripts to be called a second time. Figure002 (talk) 10:44, 8 May 2012 (UTC)

For dl element

Current NavFrame supports it only in a div element. I want the form that supported this in a dl, dt and dd element to do it. Because there is an undesirable case in semantic markup. --kahusi (Talk) 08:06, 3 November 2007 (UTC)

Problem with collapse

Can't get it to function around Levine2112 signature.[3] Thanks for any help you could give me. Anthon01 (talk) 22:12, 28 February 2008 (UTC)

His signature is here Levine2112 ^discuss Anthon01 (talk) 22:30, 28 February 2008 (UTC)

I just compared the signature (as my browser sees it) here, where Anth copied it, and at L's talk. They are identical; however, at the talk page, the box with the word "discuss" does not link to L's talk, while here it does. I'm mystified. Pete St.John (talk) 17:08, 29 February 2008 (UTC)

--- because the parser doesn't follow links to his talk page, from his talk page. D'uh. Thanks L. Pete St.John (talk) 18:30, 29 February 2008 (UTC)

Printable version revisited

There was a discussion of this above as I can see, but no apparently resolution. I would like to know if printing support is enabled for NavFrames, with all NavFrames expanded on printing. We are looking to incorporate this in an infobox through {{collapsible list}} but want to make sure that the info in the box is available when printed as it is info usually not fully duplicated in the text. --MASEM 19:42, 23 May 2008 (UTC)

Show/Hide links not showing on opera 9.27

At the moment, in Opera 9.27, the show/hide links are not visible. Tested on both, Windows and Linux. Is there a playe where this should be reported? ~ | twsx | ^talk_cont | ~ 10:34, 31 May 2008 (UTC)

They seem to be visible for me on Opera 9.27 on Windows Vista. Is there any specific template or page where they are not working for you? --CapitalR (talk) 16:16, 31 May 2008 (UTC)

They are globally not working for me, however, i noticed something interesting: They are only not working if i am logged in. If i log out, all is fine. Now, i remembered that i have played around a little with the Gadgets in the preferences dialog. It seems that the Twinkle Gadged will mess up those boxes for you. Should i report this to bugzilla? ~ | twsx | ^talk_cont | ~ 11:11, 7 June 2008 (UTC)

Make Entire Title Bar the Show/Hide Link

Has anyone attempted to make the entire Title bar the link to Show/Hide or is this not possible? What I mean is, instead of the [Show]/[Hide] button, make the entire bar that holds each table title the link so that other users can click anywhere in the Title Bar to either show and hide. --Thanks --{~~Phaydn~~} (TaLk) 19:28, 3 June 2008 (UTC)

Question about the TOC

When I put === titles inside a nawframe, it's possible to open the navframe automatic? --Lastwebpage (talk) 09:19, 2 August 2008 (UTC)

deprecated?

If I am not mistaken, Wikipedia:Collapsible tables is for tables, but the Wikipedia:NavFrame can be used for anything, so how can one claim that "NavFrame have been deprecated in favor of collapsible tables since September 2007"? It should be changed to read "Using NavFrame for wikitables has been deprecated in favour of collapsible tables since September 2007". NerdyNSK (talk) 13:09, 12 September 2008 (UTC)

NavFrame can be used for anything as long as you enclose it inside DIV, just like Collapsible Table can be used for anything as long as you enclose it inside TABLE. —AlexSm 15:51, 12 September 2008 (UTC)

Two months and no action... should I be bold? - lucideer 01:41, 17 November 2008 (UTC)

I think you should! -18:10, 4 February 2009 (UTC) —Preceding unsigned comment added by 83.78.94.81 (talk)

There are things you can do with NavFrame that you cannot do with collapsible tables. I have changed the "deprecated" notice roughly along the lines suggested above. —AlanBarrett (talk) 19:58, 4 February 2009 (UTC)

Accessibility of collapsed sections

Using Firefox 3 with Javascript disabled by the very widely used "NoScript" extension, I find that the "collapsible" sections on {{Infobox Ship Begin/doc}} are already collapsed with no option to expand them. Andy Mabbett (User:Pigsonthewing); Andy's talk; Andy's edits 18:27, 22 September 2008 (UTC)

It's an obvious accessibility issue, unfortunately no one else seems to care: see my post at MediaWiki talk:Common.js/Archive Nov 2007#CSS hidden NavFrame. —AlexSm 18:41, 22 September 2008 (UTC)

Raised at WP:VPT and WT:ACCESS. Andy Mabbett (User:Pigsonthewing); Andy's talk; Andy's edits 18:53, 22 September 2008 (UTC)

I've just modified MediaWiki:Common.js so that NavFrames can now be made collapsed by default by adding the class "collapsed" to the NavFrame itself. Example code:

<div class="NavFrame collapsed">
  <div class="NavHead">[... This is the title of the hidden content ...]</div>
  <div class="NavContent">[... This content is initially hidden ...]</div>
</div>

produces:

[... This is the title of the hidden content ...]

[... This content is initially hidden ...]

(If it doesn't work for you, clear your browser cache.)

The old way of adding style="display:none" directly to the NavContent element(s) still works too, but should be considered deprecated. Now all we need to do is go around replacing all the hardcoded style attributes with the new class. (Might also be worth requesting a bot run.) —Ilmari Karonen (talk) 15:06, 23 September 2008 (UTC)

Combination of Ext. Embed Document with colapsible div or tab

Hi,

I have tried to combine both of the funktions to be able to have several PDFs on one page and to be able to display them if wanted instead of having them displayed via link and so losing the main navigation frame of media wiki.

The result is a blank display in both variants. Although using the Tab verison while building up the display the pdf wil be shown until the open table cell will be displalyed. It seems that it lies over the area that displays the pdf.

Do both java scripts collide with each other? does anybody has experience with this?

Cheers —Preceding unsigned comment added by 91.199.43.40 (talk) 12:24, 18 November 2008 (UTC)

general use

Has anyone tried using this for general (non-navigational) content? In particular I want to wrap a 'collapsible' template around a source code div, and I'm wondering if this is the best way, or if there is something better? Monguin61 (talk) 04:21, 20 March 2009 (UTC)

Accessibility of collapsed sections 2

As there were a lot of footnotes on a page I was working on, I put them in a NavFrame initially collapsed. I was informed by users that, although the highlighting of a footnote is present when a footnote is clicked on, The user is not taken to the footnote. This seems fairly logical: it is hidden after all. I was wondering if there was a workaround so that, if a footnote link was clicked on, the NavFrame containing the footnote could be opened automatically. At present I've removed the "collapsed" parameter from the NavFrame, which allows footnotes to operate normally. (See notes here: Julian the Apostate.) -- spin^control 06:15, 15 April 2009 (UTC)

I would like this too but it might take javascript... -Eekerz (talk) 03:23, 8 February 2010 (UTC)

I don't want the hidden content automatically centered, but instead moved to the left

None of the examples show this. Is there a way so that things are listed from the left, lined up like normal writing, instead of centered as they are now? Dream Focus 15:28, 16 April 2009 (UTC)

Someone told me on my talk page. I added the information to the article, to help others who wish to know this. It does make long items a lot easier to read. Dream Focus 17:20, 16 April 2009 (UTC)

inline collapsing?

I've been considering creating a template for inline collapsing. basically this would involve using SPANs rather than DIVs - clicking the 'show' link would expand the NavContent SPAN rightward or leftward inline, rather than up or down on a separate line. This would be useful (IMO) for tucking away material in the middle of a paragraph without disrupting the flow of the paragraph itself (e.g. hiding personal attacks or disruptive comments while retaining the sense of the text). To work, this needs revisions over at over at the sire javascript and CSS pages, but I wanted to throw the idea out first and see if there's some consensus for it before I present it there. thoughts? --Ludwigs2 00:13, 17 March 2010 (UTC)

scratch this - I'm just going to advertise this over at the Pump (technical). --Ludwigs2 00:23, 17 March 2010 (UTC)

WP:VPT#inline NavFrame collapsing?. (Link it and they shall come. (maybe) ;) -- Quiddity (talk) 09:33, 17 March 2010 (UTC)

lol - a little messianic in presentation, but a valid point. --Ludwigs2 15:58, 17 March 2010 (UTC)

Wayne or Garth or Aerosmith?!? -- Quiddity (talk) 20:00, 17 March 2010 (UTC)

I was actually thinking Field of Dreams. but if I have to choose from the preceding list... --Ludwigs2 20:20, 17 March 2010 (UTC)

Perhaps like this template at the PandoraWiki? It's very useful. I'm surprised that there's nothing like it on Wikipedia. Why isn't there? What do I have to do to get it created? Esn (talk) 10:57, 14 December 2010 (UTC)

It is useful mainly not within articles, but within tables, where space is truly limited. Esn (talk) 11:38, 14 December 2010 (UTC)

Title always bold

Hello!

I would like to know if there is a way of using the NavFrame "parameter" in a way when the head/title is not bold by default and, if there is such way, how do I do it (i.e. what is the code and where must I put it exactly in order for NavFrame don't stay bold in a given usage?

Thanks! Momergil (talk) 17:45, 23 February 2011 (UTC)

Lead example is bad

The SovietAFVs example box shown in the lead is not helpful - it uses Template:navbar and not the NavFrame etc classes. Is there a more sensoble example we can use instead? — Cheers, Steelpillow (Talk) 10:17, 20 July 2011 (UTC)

Don't appear the 'Hide' button

I'd put the Dialogbox code on my wikia and in another wikia the button "Hide" appears but not on my wikia.

Diálogo

{{{text}}}

RoxShadow (talk) 10:06, 24 March 2015 (UTC)

Need NavFrame that works with tablets and mobile phones

I'm looking at a Featured Article, Sun, which has gotten to be quite large, and which has highly technical sections interspersed with sections of more general interest. A number of complaints have been raised in Talk about the article's level of difficulty. It would be nice if I could use NavFrame to hide the technical stuff, to be shown as necessary. NavFrame works beautifully on a desktop, but doesn't work at all on tablets or mobile phones. So I'm not willing to use it. Are there any alternatives? Stigmatella aurantiaca (talk) 17:01, 21 June 2015 (UTC)

Button-Layout to Hide/Show sections

Is it possible to display the Hide/Show buttons not like an edit-link, but like a button?

Not like  [Hide]  or  [Show]  like  [Edit] , but more like Hide  or  Show  or  ⊟  or  ⊞ ?

--79.207.126.55 (talk) 13:48, 22 October 2017 (UTC)

You asked this at Help talk:Collapsing#Button-Layout to Hide/Show sections and the answer is the same. --Redrose64 🌹 (talk) 15:54, 22 October 2017 (UTC)