Mathmagician (talk | contribs) (Mbox - please use mw-collapsible instead) |
Winston Sung (talk | contribs) No edit summary |
||
| (16 intermediate revisions by 11 users not shown) | |||
| Line 1: | Line 1: | ||
| + | <noinclude>{{LangSelect}}</noinclude><includeonly> |
||
| − | {{Mbox |
||
| + | {{Languages}} |
||
| − | |image = High_priority.svg |
||
| + | {{Archive|{{{archive|[[w:Help:Collapsing|Collapsing]] is a default feature of MediaWiki.}}}}} |
||
| − | |text = <p style="font-size:125%">'''This script has been superceded by features in core MediaWiki software'''</p><p style="font-size:110%">Now that all Wikia wikis have been upgraded from MediaWiki 1.16 to 1.19, collapsible elements are supported by default in core MediaWiki. See [[Help:Collapsing]] for more details. All users are highly advised to phase out usage of this script and begin using '''mw-collapsible''' class instead. This will allow you to remove outdated code from your wiki (this script), which in turn makes maintaining your code base easier and makes pages load faster.</p> |
||
| − | }} |
||
| − | |||
| − | <div style="margin: 2px 5px 3px; border: 1px solid #ccc; background-color: #ddd; color: #333; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-align: center;">Please submit translations for missing languages to [[Talk:ShowHide|the talkpage]] instead of putting them in your wiki's Common.js</div> |
||
| − | |||
{{Infobox JavaScript |
{{Infobox JavaScript |
||
| + | | Status = archive |
||
| − | | Description = Script for collapsible tables/divs using jQuery |
||
| + | | Description = {{{description|Script for collapsible tables/divs using jQuery}}} |
||
| − | | Scope = For site-wide use |
||
| + | | Scope = s |
||
| Author = [[User:Dantman|Dantman]] |
| Author = [[User:Dantman|Dantman]] |
||
| − | | Updated = |
+ | | Updated = {{updated|MediaWiki:ShowHide/code.js}} |
| − | | Code = [[/code.js]] |
+ | | Code = [[MediaWiki:ShowHide/code.js|code.js]] |
| + | | Languages = {{Language list|nocat={{#ifeq:{{FULLPAGENAME}}|ShowHide|false|true}}|en|be|bg|cs|de|el|es|fr|hu|it|ja|ko|nl|pl|pt|pt-br|ru|tr|uk|vi|zh}} |
||
| − | | Skins = Monaco<br />Monobook<br />Oasis (partial) |
||
| − | | Languages = {{#language:bg}}<br />{{#language:de}}<br />{{#language:en}}<br />{{#language:es}}<br />{{#language:fr}}<br />{{#language:hu}}<br />{{#language:it}}<br />{{#language:ja}}<br />{{#language:ko}}<br />{{#language:nl}}<br />{{#language:pl}}<br />{{#language:pt}}<br />{{#language:pt-br}}<br />{{#language:ru}}<br />{{#language:zh}} |
||
}} |
}} |
||
| + | {{{intro|'''ShowHide''' is a script for collapsible tables and divs. It was in use before [[w:Help:Collapsing|core MediaWiki collapsibles]] existed, but '''should no longer be installed on wikis'''. If you used this feature, you can search for <code>collapsible</code> (replaced with <code>mw-collapsible</code>) or <code>NavFrame</code> classes in your wiki and replace them with equivalent classes in the new collapsibles.}}} |
||
| + | == {{{deprecation-header|Deprecation}}} == |
||
| − | '''ShowHide''' is a script for collapsible tables and divs. |
||
| + | {{{deprecation-text|As ShowHide has been deprecated for over 5 years, wikis might be interested in migrating from it to the regular [[w:Help:Collapsing|collapsing]] feature. For that purpose, a warning feature has been added to ShowHide that warns users when the wiki is using ShowHide and listing the elements that use deprecated classes in their JavaScript console. There is also a banner notification appearing only for administrators and content moderators across whole Template and MediaWiki namespaces when ShowHide is imported, and elsewhere when deprecated classes are in use on the page. Upon dismissing the banner notification, it won't show up for the next 6 months.}}} |
||
| + | {{{enable-feature|To enable the feature, place this piece of JavaScript in your personal JavaScript page:}}} |
||
| − | == Feature overview == |
||
| + | <syntaxhighlight lang="js"> |
||
| − | ;Localization |
||
| + | window.ShowHideDisplayWarning = true; |
||
| − | : Customize button labels according to site (or user) language preference. |
||
| − | ;Show all / Hide all |
||
| − | : [show all] and [hide all] buttons can be placed ''anywhere'' on a page and in ''multiple'' locations. |
||
| − | : All ''NavFrame'' blocks on the page are affected however, collapsible tables are not affected by these buttons. This behavior is by design. |
||
| − | ;Specify collapsed by default |
||
| − | : A ''NavFrame'' block or collapsible table that also uses the '''collapsed''' class will be hidden by default but can always be manually expanded. |
||
| − | ;Auto-collapse threshold |
||
| − | : When the specified number of ''NavFrame'' blocks or collapsible tables with the '''autocollapse''' class are present on a page then all will collapse by default. The counts are handled separately, so one ''NavFrame'' and one collapsible table will not be considered 2. |
||
| − | :* Can be overridden for specific ''NavFrames'' if the '''noautocollapse''' class is also used. |
||
| − | ;Specify non-collapsible rows of a table |
||
| − | : Using '''class="nocollapse"''' on a row will prevent that row from collapsing. |
||
| − | ;Nesting collapsible content |
||
| − | : Nesting collapsible tables is supported. |
||
| − | : Nesting ''NavFrame'' blocks is supported. |
||
| − | ;A ''complementary'' pair of NavContent blocks enables: |
||
| − | : In-place magnify/shrink of an image. |
||
| − | : Author-specified word-wrap for both image sizes. |
||
| − | |||
| − | == Configuration == |
||
| − | To use ShowHide please include [[ShowHide/code.js]] in your site's [[MediaWiki:Common.js]] using: |
||
| − | * <code>importScriptPage('ShowHide/code.js', 'dev');</code> |
||
| − | Perhaps the function <code>importScriptPage</code> is not available. In this case, insert the following additional code. |
||
| − | <source lang="javascript"> |
||
| − | function importScriptPage (page, server) { |
||
| − | var url = '/index.php?title=' + encodeURIComponent(page.replace(/ /g,'_')).replace('%2F','/').replace('%3A',':') + '&action=raw&ctype=text/javascript'; |
||
| − | if (typeof server == "string") url = (server.indexOf('://') == -1)?'http://' + server + '.wikia.com' + url:server + url; |
||
| − | return importScriptURI(url); |
||
| − | } |
||
| − | </source> |
||
| − | <div style="font-size: 75%; text-align: right;">see [http://community.wikia.com/wiki/Forum:Show/hide_tables_no_longer_working_in_Oasis._Need_help]</div> |
||
| − | |||
| − | You can change the configuration of ShowHide by creating a '''ShowHideConfig''' object inside either: |
||
| − | * your site's [[MediaWiki:Common.js]] or |
||
| − | * your personal [[Special:Mypage/wikia.js|User:USERNAME/wikia.js]] or [[Special:Mypage/monobook.js|User:USERNAME/monobook.js]] depending on what skin you are using. |
||
| − | |||
| − | ;autoCollapse |
||
| − | : ShowHideConfig'''.autoCollapse''' sets the threshold for default collapse of all collapsible content on a page. When the number of ''NavFrames'' or collapsible tables with the '''autocollapse''' on the page is equal to or greater than specified number then auto-collapse is triggered. |
||
| − | :: By default this is set to 2 meaning for example "If there are two or more ''NavFrames'' on the page, then hide them all by default", and likewise for collapsible tables with '''autocollapse''' on them. |
||
| − | :: You can change this to any number. |
||
| − | ::* Setting it to '''0''' will make it so things are always collapsed by default. |
||
| − | ::* setting it to '''Infinity''' will make it so things never auto-collapse. (Note: '''Infinity''' is ''case-sensitive'') |
||
| − | |||
| − | :* ''NavFrames'' with the '''noautocollapse''' class ''do count toward the NavFrame threshold'' and are never auto-collapsed but can always be manually collapsed. |
||
| − | :* ''NavFrames'' with the '''collapsed''' class ''do count toward the NavFrame threshold'' and are always initially collapsed but can always be manually expanded. |
||
| − | ; userLang |
||
| − | : (true|false) ShowHide is smart about what language to use to display show/hide messages. Currently by default it will prefer the user's language, but use the content language otherwise, and fall back to English if there are no messages in a desired language. You can disable this by setting the ShowHideConfig'''.userLang''' option to false. |
||
| − | ; ''langCode'' |
||
| − | : Messages for localization of the language used in button labels can be added using the two-character language code as a key (e.g. ShowHideConfig'''.en''' or ShowHideConfig'''.ja''') and then creating an object for four messages. The four messages used are "show", "hide", "showAll", and "hideAll". See example below for how to override the default labels used for the English language. Translations for missing languages can be posted to [[Talk:ShowHide|the talkpage]]. |
||
| − | ; ''linkBefore'' |
||
| − | : Set to true to have ShowHide prepend links to NavFrame instead of appending them. |
||
| − | ; brackets |
||
| − | : Allows changing the style of the brackets around the "show" and "hide" buttons from the default <code><nowiki>[]</nowiki></code>. |
||
| − | |||
| − | === Example === |
||
| − | <syntaxhighlight lang="javascript"> |
||
| − | var ShowHideConfig = { autoCollapse: Infinity }; |
||
| − | importScriptPage('ShowHide/code.js', 'dev'); |
||
</syntaxhighlight> |
</syntaxhighlight> |
||
| − | :If you prefer to ''override'' the default labels for, say, English language then you can use ''langCode'' key, '''en''', to do so. This might be done in your personal [[Special:Mypage/wikia.js|User:USERNAME/wikia.js]] or [[Special:Mypage/monobook.js|User:USERNAME/monobook.js]]. |
||
| − | <syntaxhighlight lang="javascript"> |
||
| − | var ShowHideConfig = { |
||
| − | autoCollapse: 3, |
||
| − | en: { |
||
| − | show: "more", |
||
| − | hide: "less", |
||
| − | showAll: "expand all", |
||
| − | hideAll: "collapse all" |
||
| − | } |
||
| − | }; |
||
| − | </syntaxhighlight> |
||
| − | :If you would like to change the brackets from <code><nowiki>[]</nowiki></code> to say <code><nowiki>{}</nowiki></code>,you can use: |
||
| − | <syntaxhighlight lang="javascript"> |
||
| − | var ShowHideConfig = { |
||
| − | brackets: '{}' |
||
| − | }; |
||
| − | </syntaxhighlight> |
||
| − | |||
| − | === Styling === |
||
| − | For CSS styling of the show/hide button, the class <code>collapseLink</code> refers to what is inside the brackets, while the class <code>collapseButton</code> refers to the whole button. |
||
| − | |||
| − | == Collapsible table == |
||
| − | Specify the class '''collapsible''' for the table. Optionally specify the class '''nocollapse''' for specific rows. ''viz.'' |
||
| − | * Nesting collapsible tables is supported. |
||
| − | *: Use '''class="nocollapse"''' on the row where the nested table is located to ensure its header row (with the nested show/hide button) remains visible. |
||
| − | |||
| − | {|class="wikitable" |
||
| − | !width=40%|Wiki markup |
||
| − | !width=40%|Rendered |
||
| − | |- |
||
| − | || |
||
| − | <pre> |
||
| − | {| class="collapsible" |
||
| − | !colspan="2"| This is a test |
||
| − | |- |
||
| − | | Column 1 || Column 2 |
||
| − | |} |
||
| − | </pre> |
||
| − | |align=center| |
||
| − | {| class="collapsible" |
||
| − | !colspan="2"| This is a test |
||
| − | |- |
||
| − | | Column 1 || Column 2 |
||
| − | |} |
||
| − | |- |
||
| − | !colspan=2|Table with certain rows specified "nocollapse" |
||
| − | |- |
||
| − | || |
||
| − | <pre> |
||
| − | {| class="wikitable collapsible" |
||
| − | !colspan="2"| Title |
||
| − | |- class="nocollapse" |
||
| − | | Column 1 || Column 2 |
||
| − | |- class="nocollapse" |
||
| − | | abc || def |
||
| − | |- |
||
| − | | 123 || 765 |
||
| − | |- |
||
| − | | xyz || 123 |
||
| − | |- class="nocollapse" |
||
| − | | pqr || 987 |
||
| − | |- |
||
| − | |} |
||
| − | </pre> |
||
| − | |align=center| |
||
| − | {| class="wikitable collapsible" |
||
| − | !colspan="2"| Title |
||
| − | |- class="nocollapse" |
||
| − | | Column 1 || Column 2 |
||
| − | |- class="nocollapse" |
||
| − | | abc || def |
||
| − | |- |
||
| − | | 123 || 765 |
||
| − | |- |
||
| − | | xyz || 123 |
||
| − | |- class="nocollapse" |
||
| − | | pqr || 987 |
||
| − | |- |
||
| − | |} |
||
| − | |- |
||
| − | !colspan=2 BGCOLOR="#ffffff"|Nested tables |
||
| − | |- |
||
| − | || |
||
| − | <pre> |
||
| − | {| class="wikitable collapsible" |
||
| − | !colspan="2"| Title |
||
| − | |- |
||
| − | | Column 1 || Column 2 |
||
| − | |- |
||
| − | | abc || def |
||
| − | |- |
||
| − | | abc || def |
||
| − | |- class="nocollapse" |
||
| − | |colspan=2| |
||
| − | {| class="toccolours collapsible" |
||
| − | !colspan="2" BGCOLOR="#ffffff"| Embedded table |
||
| − | |- class="nocollapse" |
||
| − | | Column A || Column B |
||
| − | |- class="nocollapse" |
||
| − | ||the |
||
| − | |quick |
||
| − | |- |
||
| − | ||brown |
||
| − | |fox |
||
| − | |- |
||
| − | |} |
||
| − | |- |
||
| − | | xyz || 123 |
||
| − | |- |
||
| − | | pqr || 987 |
||
| − | |- |
||
| − | |} |
||
| − | </pre> |
||
| − | |align=center| |
||
| − | {| class="wikitable collapsible" |
||
| − | !colspan="2"| Title |
||
| − | |- |
||
| − | | Column 1 || Column 2 |
||
| − | |- |
||
| − | | abc || def |
||
| − | |- |
||
| − | | abc || def |
||
| − | |- class="nocollapse" |
||
| − | |colspan=2| |
||
| − | {| class="toccolours collapsible" |
||
| − | !colspan="2"| Embedded table |
||
| − | |- class="nocollapse" |
||
| − | | Column A || Column B |
||
| − | |- class="nocollapse" |
||
| − | ||the |
||
| − | |quick |
||
| − | |- |
||
| − | ||brown |
||
| − | |fox |
||
| − | |- |
||
| − | |} |
||
| − | |- |
||
| − | | xyz || 123 |
||
| − | |- |
||
| − | | pqr || 987 |
||
| − | |- |
||
| − | |} |
||
| − | |- |
||
| − | |} |
||
| − | |||
| − | |||
| − | == Collapsible ''NavFrame'' block == |
||
| − | Use the following class definitions within tag pairs: |
||
| − | ; NavGlobal : for placing '''[show all]''' and '''[hide all]''' buttons anywhere on the page |
||
| − | ; NavFrame : defines a ''NavFrame'' block which is the outer wrapper for using the classes '''NavHead''', '''NavContent''' and '''NavPic''' |
||
| − | ; NavHead : the header where the show/hide link will be placed |
||
| − | ; NavContent : block text content that is collapsible (may include a table) |
||
| − | ; NavPic : image content that is collapsible |
||
| − | |||
| − | * Nesting ''NavFrame'' blocks (tags using the '''NavFrame''' class) is supported. |
||
| − | *: Check that all tags are closed. If you see progressive indentation then that is a symptom of a tag that was never closed. |
||
| − | |||
| − | {|class="wikitable" |
||
| − | !width=40%|Wiki markup |
||
| − | !width=40%|Rendered |
||
| − | |- |
||
| − | !colspan=2 BGCOLOR="#ffffff"|Default behavior and override behavior |
||
| − | |- |
||
| − | || |
||
| − | <pre> |
||
| − | ; collapsed |
||
| − | <div class="NavFrame collapsed"> |
||
| − | <div class="NavHead"> |
||
| − | [... Title of hidden content(1) ...] |
||
| − | </div> |
||
| − | <div class="NavContent"> |
||
| − | [... This content(1) is initially hidden ...] |
||
| − | </div> |
||
| − | </div> |
||
| − | |||
| − | ; noautocollapse |
||
| − | <div class="NavFrame noautocollapse"> |
||
| − | <div class="NavHead"> |
||
| − | [... Title of hide-able content(2) ...] |
||
| − | </div> |
||
| − | <div class="NavContent"> |
||
| − | [... This content(2) does not auto-collapse ...] |
||
| − | </div> |
||
| − | </div> |
||
| − | |||
| − | ; default |
||
| − | <div class="NavFrame"> |
||
| − | <div class="NavHead"> |
||
| − | [... Title of hidden content(3) ...] |
||
| − | </div> |
||
| − | <div class="NavContent"> |
||
| − | [... This content(3) may auto-collapse ...]<br/> |
||
| − | [... and contains a collapsible table ...] |
||
| − | {| class="wikitable collapsible" |
||
| − | !colspan="2"| Title |
||
| − | |- class="nocollapse" |
||
| − | | Column 1 || Column 2 |
||
| − | |- class="nocollapse" |
||
| − | | abc || def |
||
| − | |- |
||
| − | | 123 || 765 |
||
| − | |- |
||
| − | | xyz || 123 |
||
| − | |- class="nocollapse" |
||
| − | | pqr || 987 |
||
| − | |- |
||
| − | |} |
||
| − | </div> |
||
| − | </div> |
||
| − | </pre> |
||
| − | | |
||
| − | ; collapsed |
||
| − | <div class="NavFrame collapsed"> |
||
| − | <div class="NavHead"> |
||
| − | [... Title of hidden content(1) ...] |
||
| − | </div> |
||
| − | <div class="NavContent"> |
||
| − | [... This content(1) is initially hidden ...] |
||
| − | </div> |
||
| − | </div> |
||
| − | |||
| − | ; noautocollapse |
||
| − | <div class="NavFrame noautocollapse"> |
||
| − | <div class="NavHead"> |
||
| − | [... Title of hide-able content(2) ...] |
||
| − | </div> |
||
| − | <div class="NavContent"> |
||
| − | [... This content(2) does not auto-collapse ...] |
||
| − | </div> |
||
| − | </div> |
||
| − | |||
| − | ; default |
||
| − | <div class="NavFrame"> |
||
| − | <div class="NavHead"> |
||
| − | [... Title of hidden content(3) ...] |
||
| − | </div> |
||
| − | <div class="NavContent"> |
||
| − | [... This content(3) may auto-collapse ...]<br/> |
||
| − | [... and contains a collapsible table ...] |
||
| − | {| class="wikitable collapsible" |
||
| − | !colspan="2"| Title |
||
| − | |- class="nocollapse" |
||
| − | | Column 1 || Column 2 |
||
| − | |- class="nocollapse" |
||
| − | | abc || def |
||
| − | |- |
||
| − | | 123 || 765 |
||
| − | |- |
||
| − | | xyz || 123 |
||
| − | |- class="nocollapse" |
||
| − | | pqr || 987 |
||
| − | |- |
||
| − | |} |
||
| − | </div> |
||
| − | </div> |
||
| − | |- |
||
| − | !colspan=2 BGCOLOR="#ffffff"|Nested ''NavFrame'' blocks |
||
| − | |- |
||
| − | || |
||
| − | <pre> |
||
| − | <div class="NavFrame"> |
||
| − | <div class="NavHead"> |
||
| − | [... Title of hidden content(0) ...] |
||
| − | </div> |
||
| − | <div class="NavContent"> |
||
| − | [... This content is initially hidden and ...]<br/> |
||
| − | [--- contains the previous example ---] |
||
| − | |||
| − | |||
| − | ; collapsed |
||
| − | <div class="NavFrame collapsed"> |
||
| − | <div class="NavHead"> |
||
| − | [... Title of hidden content(1) ...] |
||
| − | </div> |
||
| − | <div class="NavContent"> |
||
| − | [... This content(1) is initially hidden ...] |
||
| − | </div> |
||
| − | </div> |
||
| − | |||
| − | ; noautocollapse |
||
| − | <div class="NavFrame noautocollapse"> |
||
| − | <div class="NavHead"> |
||
| − | [... Title of hide-able content(2) ...] |
||
| − | </div> |
||
| − | <div class="NavContent"> |
||
| − | [... This content(2) does not auto-collapse ...] |
||
| − | </div> |
||
| − | </div> |
||
| − | |||
| − | ; default |
||
| − | <div class="NavFrame"> |
||
| − | <div class="NavHead"> |
||
| − | [... Title of hidden content(3) ...] |
||
| − | </div> |
||
| − | <div class="NavContent"> |
||
| − | [... This content(3) may auto-collapse ...]<br/> |
||
| − | [... and contains a collapsible table ...] |
||
| − | {| class="wikitable collapsible" |
||
| − | !colspan="2"| Title |
||
| − | |- class="nocollapse" |
||
| − | | Column 1 || Column 2 |
||
| − | |- class="nocollapse" |
||
| − | | abc || def |
||
| − | |- |
||
| − | | 123 || 765 |
||
| − | |- |
||
| − | | xyz || 123 |
||
| − | |- class="nocollapse" |
||
| − | | pqr || 987 |
||
| − | |- |
||
| − | |} |
||
| − | </div> |
||
| − | </div> |
||
| − | [--- previous example inserted above here ---] |
||
| − | |||
| − | </div> |
||
| − | </div> |
||
| − | </pre> |
||
| − | | |
||
| − | <div class="NavFrame"> |
||
| − | <div class="NavHead"> |
||
| − | [... Title of hidden content(0) ...] |
||
| − | </div> |
||
| − | <div class="NavContent"> |
||
| − | [... This content is initially hidden and ...]<br/> |
||
| − | [--- contains the previous example ---] |
||
| − | |||
| − | |||
| − | ; collapsed |
||
| − | <div class="NavFrame collapsed"> |
||
| − | <div class="NavHead"> |
||
| − | [... Title of hidden content(1) ...] |
||
| − | </div> |
||
| − | <div class="NavContent"> |
||
| − | [... This content(1) is initially hidden ...] |
||
| − | </div> |
||
| − | </div> |
||
| − | |||
| − | ; noautocollapse |
||
| − | <div class="NavFrame noautocollapse"> |
||
| − | <div class="NavHead"> |
||
| − | [... Title of hide-able content(2) ...] |
||
| − | </div> |
||
| − | <div class="NavContent"> |
||
| − | [... This content(2) does not auto-collapse ...] |
||
| − | </div> |
||
| − | </div> |
||
| − | |||
| − | ; default |
||
| − | <div class="NavFrame"> |
||
| − | <div class="NavHead"> |
||
| − | [... Title of hidden content(3) ...] |
||
| − | </div> |
||
| − | <div class="NavContent"> |
||
| − | [... This content(3) may auto-collapse ...]<br/> |
||
| − | [... and contains a collapsible table ...] |
||
| − | {| class="wikitable collapsible" |
||
| − | !colspan="2"| Title |
||
| − | |- class="nocollapse" |
||
| − | | Column 1 || Column 2 |
||
| − | |- class="nocollapse" |
||
| − | | abc || def |
||
| − | |- |
||
| − | | 123 || 765 |
||
| − | |- |
||
| − | | xyz || 123 |
||
| − | |- class="nocollapse" |
||
| − | | pqr || 987 |
||
| − | |- |
||
| − | |} |
||
| − | </div> |
||
| − | </div> |
||
| − | [--- previous example inserted above here ---] |
||
| − | |||
| − | </div> |
||
| − | </div> |
||
| − | |- |
||
| − | !colspan=2 BGCOLOR="#ffffff"|''NavGlobal'' DIV placed anywhere on page creates [show all] [hide all] buttons |
||
| − | |- |
||
| − | || |
||
| − | <pre> |
||
| − | <div class="NavGlobal"> |
||
| − | <!-- place anywhere on page for |
||
| − | [show all] [hide all] |
||
| − | buttons |
||
| − | --> |
||
| − | </div> |
||
| − | </pre> |
||
| − | | |
||
| − | <div class="NavGlobal"> |
||
| − | <!-- place anywhere on page for |
||
| − | [Show all] [Hide all] |
||
| − | buttons |
||
| − | --> |
||
| − | </div> |
||
| − | |- |
||
| − | |} |
||
| − | |||
| − | == Magnify and shrink pictures without leaving the article == |
||
| − | Normally, if you click on the magnify sprite, http://images.wikia.com/common/releases_200911.1/skins/common/images/magnify-clip.png , located right-most inside the thumbnail image caption box you are ''taken away from the article you were browsing'' to a page in the File namespace where the detail and history for that image can be viewed. The size of the image displayed there ''may not be'' the precise size that the author wanted to show the reader. If you click on the image itself you are taken to that same details page. |
||
| − | |||
| − | * You can use ShowHide functionality to toggle between a small image and a magnified image ''in-situ'' - i.e. without leaving the currently displayed wiki article. |
||
| − | * The article text will adjust to flow around the expanded image in whichever way the author has designed it to. |
||
| − | * The author may specify the precise sizes of the smaller image and the larger image. |
||
| − | |||
| − | This is really just a special application of the NavFrame class but with: |
||
| − | # ''two'' NavContent div elements instead of just ''one'' |
||
| − | # a potentially confusing relationship between the <code>"display:'''none'''"</code> in-line style and the <code>'''collapsed'''</code> in-line class tag |
||
| − | # careful placement of {{t|clr}} so as to disable text-wrap based on whichever image is currently visible |
||
| − | |||
| − | Note that using the NavPic class does not yield the same result. Indeed, the NavPic class currently serves no useful purpose. |
||
| − | <!-- Dantman, I think the magnify sprite located within div.magnify ought to become the "collapseLink" whenever the NavPic class has been used. Currently that so-called magnify sprite is a redundant link to the File: page just as the image area itself links to the File page. What do you think? Is that intuitive? complex? simple? -- najevi --> |
||
| − | |||
| − | ;Caveat: The style display:none will cause the content of that div element to never be displayed at a browser that has disabled (or does not support) javascript. |
||
| − | |||
| − | {| class="wikitable" |
||
| − | !width=40%|Wiki markup |
||
| − | !width=40%|Rendered |
||
| − | |- |
||
| − | |colspan=2| Note how the ''combined effect'' of "collapsed" and "display:none;" is for the 120px thumbnail to be initially VISIBLE with a '''show''' button displayed to reveal the larger, hidden image. |
||
| − | |- |
||
| − | || |
||
| − | <pre> |
||
| − | Duis aute ... |
||
| − | <!-- "collapsed" will toggle the coded state |
||
| − | of the in-line style "display:" --> |
||
| − | <div class="NavFrame collapsed"> |
||
| − | <div class="NavHead"></div> |
||
| − | <!-- display:none + collapsed |
||
| − | => initially VISIBLE small image --> |
||
| − | <div class="NavContent" style="display:none;" > |
||
| − | [[File:Tree.jpg|thumb|120px|Caption here]]</div> |
||
| − | <!-- display:block + collapsed |
||
| − | => initially INVISIBLE large image --> |
||
| − | <div class="NavContent" style="display:block;"> |
||
| − | [[File:Tree.jpg|thumb|360px|Caption here]]</div> |
||
| − | </div> |
||
| − | Lorem ipsum ... |
||
| − | </pre> |
||
| − | | |
||
| − | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
||
| − | <!-- "collapsed" will toggle the coded state |
||
| − | of the in-line style "display:" --> |
||
| − | <div class="NavFrame collapsed"> |
||
| − | <div class="NavHead"></div> |
||
| − | <!-- display:none + collapsed |
||
| − | => initially VISIBLE small image --> |
||
| − | <div class="NavContent" style="display:none;" > |
||
| − | [[File:Tree.jpg|thumb|120px|Caption here]]</div> |
||
| − | <!-- display:block + collapsed |
||
| − | => initially INVISIBLE large image --> |
||
| − | <div class="NavContent" style="display:block;"> |
||
| − | [[File:Tree.jpg|thumb|360px|Caption here]]</div> |
||
| − | </div> |
||
| − | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
||
| − | |- |
||
| − | |colspan=2| Notice that the {{t|clr}} has been placed ''inside'' the div associated with the larger 360px image. |
||
| − | |- |
||
| − | || |
||
| − | <pre> |
||
| − | Duis aute ... |
||
| − | <div class="NavFrame collapsed"> |
||
| − | <div class="NavHead"></div> |
||
| − | <div class="NavContent" style="display:none;" > |
||
| − | [[File:Tree.jpg|thumb|120px|Caption here]]</div> |
||
| − | <div class="NavContent" style="display:block;"> |
||
| − | [[File:Tree.jpg|thumb|360px|Caption here]]{{clr}}</div> |
||
| − | <!-- |
||
| − | {{clr}} on this line would prevent text-wrap beside thumbnail |
||
| − | --> |
||
| − | </div> |
||
| − | Lorem ipsum ... |
||
| − | </pre> |
||
| − | | |
||
| − | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
||
| − | <div class="NavFrame collapsed"> |
||
| − | <div class="NavHead"></div> |
||
| − | <div class="NavContent" style="display:none;" > |
||
| − | [[File:Tree.jpg|thumb|120px|Caption here]]</div> |
||
| − | <div class="NavContent" style="display:block;"> |
||
| − | [[File:Tree.jpg|thumb|360px|Caption here]]{{clr}}</div> |
||
| − | <!-- |
||
| − | {{clr}} on this line would prevent text-wrap beside thumbnail |
||
| − | --> |
||
| − | </div> |
||
| − | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
||
| − | |- |
||
| − | |} |
||
| − | |||
| − | |||
| − | ;Repeating the same two example but using '''Right''' instead of '''Thumb''' for the image and also floating the Show/Hide button right rather than the default. |
||
| − | |||
| − | {| class="wikitable" |
||
| − | !width=40%|Wiki markup |
||
| − | !width=40%|Rendered |
||
| − | |- |
||
| − | |colspan=2| Note how the ''combined effect'' of "collapsed" and "display:none;" is for the 120px thumbnail to be initially VISIBLE with a '''show''' button displayed to reveal the larger, hidden image. |
||
| − | |- |
||
| − | || |
||
| − | <pre> |
||
| − | Duis aute ... |
||
| − | <!-- "collapsed" will toggle the coded state |
||
| − | of the in-line style "display:" --> |
||
| − | <div class="NavFrame collapsed"> |
||
| − | <div class="NavHead" style="float:right;"></div> |
||
| − | <!-- display:none + collapsed |
||
| − | => initially VISIBLE small image --> |
||
| − | <div class="NavContent" style="display:none;" > |
||
| − | [[File:Tree.jpg|right|120px|Caption here]]</div> |
||
| − | <!-- display:block + collapsed |
||
| − | => initially INVISIBLE large image --> |
||
| − | <div class="NavContent" style="display:block;"> |
||
| − | [[File:Tree.jpg|right|360px|Caption here]]</div> |
||
| − | </div> |
||
| − | Lorem ipsum ... |
||
| − | </pre> |
||
| − | | |
||
| − | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
||
| − | <!-- "collapsed" will toggle the coded state |
||
| − | of the in-line style "display:" --> |
||
| − | <div class="NavFrame collapsed"> |
||
| − | <div class="NavHead" style="float:right;"></div> |
||
| − | <!-- display:none + collapsed |
||
| − | => initially VISIBLE small image --> |
||
| − | <div class="NavContent" style="display:none;" > |
||
| − | [[File:Tree.jpg|right|120px|Caption here]]</div> |
||
| − | <!-- display:block + collapsed |
||
| − | => initially INVISIBLE large image --> |
||
| − | <div class="NavContent" style="display:block;"> |
||
| − | [[File:Tree.jpg|right|360px|Caption here]]</div> |
||
| − | </div> |
||
| − | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
||
| − | |- |
||
| − | |colspan=2| Notice that the {{t|clr}} has been placed ''inside'' the div associated with the larger 360px image. |
||
| − | |- |
||
| − | || |
||
| − | <pre> |
||
| − | Duis aute ... |
||
| − | <div class="NavFrame collapsed"> |
||
| − | <div class="NavHead" style="float:right;"></div> |
||
| − | <div class="NavContent" style="display:none;" > |
||
| − | [[File:Tree.jpg|right|120px|Caption here]]</div> |
||
| − | <div class="NavContent" style="display:block;"> |
||
| − | [[File:Tree.jpg|right|360px|Caption here]]{{clr}}</div> |
||
| − | <!-- |
||
| − | {{clr}} on this line would prevent text-wrap beside thumbnail |
||
| − | --> |
||
| − | </div> |
||
| − | Lorem ipsum ... |
||
| − | </pre> |
||
| − | | |
||
| − | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
||
| − | <div class="NavFrame collapsed"> |
||
| − | <div class="NavHead" style="float:right;"></div> |
||
| − | <div class="NavContent" style="display:none;" > |
||
| − | [[File:Tree.jpg|right|120px|Caption here]]</div> |
||
| − | <div class="NavContent" style="display:block;"> |
||
| − | [[File:Tree.jpg|right|360px|Caption here]]{{clr}}</div> |
||
| − | <!-- |
||
| − | {{clr}} on this line would prevent text-wrap beside thumbnail |
||
| − | --> |
||
| − | </div> |
||
| − | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
||
| − | |- |
||
| − | |} |
||
| − | |||
| − | == Updates == |
||
| − | <table cellpadding="0" cellspacing="0" border="0" style="width:100%; margin-bottom:3px; margin-top:3px;"><tr><td style="background:transparent;"><div style="overflow:auto; height:200px; width:100%; -moz-border-radius-topleft:-0.5em; border:0px solid #AAAAAA; padding-left:-0.5em; background:transparent;"> |
||
| − | ;April 28, 2012 |
||
| − | *Korean i18n. |
||
| − | ;April 16, 2012 |
||
| − | *Portuguese and Brazilian Portuguese i18n. |
||
| − | ;April 13, 2012 |
||
| − | *Chinese i18n. |
||
| − | ;March 2, 2012 |
||
| − | *Hungarian i18n. |
||
| − | ;October 17, 2011 |
||
| − | *Bulgarian i18n. |
||
| − | ;October 15, 2011 |
||
| − | *Fixed French i18n. |
||
| − | ;October 9, 2011 |
||
| − | *Italian i18n. |
||
| − | ;June 10, 2011 |
||
| − | * Japanese i18n. |
||
| − | ;May 31, 2011 |
||
| − | * Code cleanup, styling and a bug fix for NavFrame collapsing. |
||
| − | ;February 22, 2011 |
||
| − | * Russian i18n. |
||
| − | ;January 18, 2011 |
||
| − | * Polish i18n. |
||
| − | ;June 26, 2010 |
||
| − | * Dutch, German, and French i18n. |
||
| − | ;December 19, 2009 |
||
| − | * Apply the missing $button node. |
||
| − | * Support linkBefore config option to switch location of show/hide button. |
||
| − | * Quote keywords used in keys to avoid breaking older browsers. |
||
| − | ;July 2, 2009 |
||
| − | * Bugfix for collapsible tables default collapse and nesting of them |
||
| − | ;July 1, 2009 |
||
| − | * Minor bugfix for show/hide all labels. |
||
| − | ;June 30, 2009 |
||
| − | * Centralized i18n started and smart choosing of what language to use. |
||
| − | * Modified and fixed ability to configure ShowHide. |
||
| − | ;June 29, 2009 |
||
| − | * Fix a minor collapsible tables bug so we fully support nesting of collapsible tables in our version |
||
| − | ;June 28, 2009 |
||
| − | * Support nocollapse on table rows |
||
| − | ;June 19th, 2009 |
||
| − | * Support noautocollapse class to stop NavFrame from auto-collapsing certain things. |
||
| − | * Suggestion from es.pokemon, switched the a to a span using tabIndex, and added code to allow enter to trigger the show/hide. |
||
| − | * Also support the spacebar. |
||
| − | ;June 14th, 2009 |
||
| − | * Refactored to use jQuery and posted here. |
||
| − | </div></td><td style="width:5px;"> </td></tr></table> |
||
| − | |||
| − | == See also == |
||
| + | {{{not-site-wide-use|This particular setting cannot be enabled site-wide and is only used to help migrating over to the core MediaWiki feature.}}} |
||
| − | *[[Help:Dynamic navigation]] |
||
| + | </includeonly> |
||
| − | *[http://joeyaa08.blogspot.com/2010/02/collapsible-templates.html Joeyaa: Collapsible Templates]. Written by [http://community.wikia.com/wiki/User:Joeyaa User:Joeyaa]. |
||
| − | *[http://cannabis.wikia.com/wiki/User:Timeshifter/Collapsed_table_via_NavFrame Collapsed table via NavFrame]. Simple explanation and example of how show/hide capability was created with just one line added to a wiki's MediaWiki:Common.js page. |
||
| − | *[[ShowHide2]] |
||
| − | *[[mediawikiwiki:Manual:Collapsible tables|MediaWiki Manual:Collapsible tables]] |
||
| − | *[[w:c:community:Forum:Need help with ShowHide script|Forum:Need help with ShowHide script]] - implementing Show/Hide with the Oasis/Wikia skin. |
||
| − | [[Category:JavaScript]] |
||
Latest revision as of 14:04, 26 December 2023
This article is about a system or feature that is no longer in use.
The page is retained for historical reasons.
Reason: Collapsing is a default feature of MediaWiki.
ShowHide is a script for collapsible tables and divs. It was in use before core MediaWiki collapsibles existed, but should no longer be installed on wikis. If you used this feature, you can search for collapsible (replaced with mw-collapsible) or NavFrame classes in your wiki and replace them with equivalent classes in the new collapsibles.
Deprecation
As ShowHide has been deprecated for over 5 years, wikis might be interested in migrating from it to the regular collapsing feature. For that purpose, a warning feature has been added to ShowHide that warns users when the wiki is using ShowHide and listing the elements that use deprecated classes in their JavaScript console. There is also a banner notification appearing only for administrators and content moderators across whole Template and MediaWiki namespaces when ShowHide is imported, and elsewhere when deprecated classes are in use on the page. Upon dismissing the banner notification, it won't show up for the next 6 months.
To enable the feature, place this piece of JavaScript in your personal JavaScript page:
window.ShowHideDisplayWarning = true;
This particular setting cannot be enabled site-wide and is only used to help migrating over to the core MediaWiki feature.
Text above can be found here (edit)