Created page with "only for testing ---- == Collapsible table == Specify the class '''collapsible''' for the table. Optionally specify the class '''nocollapse''' for specific rows. ''viz.'' * Ne..."
New page
only for testing
----
== 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
|-
||
|align=center|
{| class="collapsible"
!colspan="2"| This is a test
|-
| Column 1 || Column 2
|}
|-
!colspan=2|Table with certain rows specified "nocollapse"
|-
||
|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
|-
||
|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
|-
||
|
; collapsed
[... Title of hidden content(1) ...]
[... This content(1) is initially hidden ...]
; noautocollapse
[... Title of hide-able content(2) ...]
[... This content(2) does not auto-collapse ...]
; default
[... Title of hidden content(3) ...]
[... This content(3) may auto-collapse ...]
[... 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
|-
|}
|-
!colspan=2 BGCOLOR="#ffffff"|Nested ''NavFrame'' blocks
|-
||
|
[... Title of hidden content(0) ...]
[... This content is initially hidden and ...]
[--- contains the previous example ---]
; collapsed
[... Title of hidden content(1) ...]
[... This content(1) is initially hidden ...]
; noautocollapse
[... Title of hide-able content(2) ...]
[... This content(2) does not auto-collapse ...]
; default
[... Title of hidden content(3) ...]
[... This content(3) may auto-collapse ...]
[... 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
|-
|}
[--- previous example inserted above here ---]
|-
!colspan=2 BGCOLOR="#ffffff"|''NavGlobal'' DIV placed anywhere on page creates [show all] [hide all] buttons
|-
||
|
|-
|}
== 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 "display:'''none'''" in-line style and the '''collapsed''' 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.
;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.
|-
||
|
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.
initially VISIBLE small image -->
[[File:Tree.jpg|thumb|120px|Caption here]]
initially INVISIBLE large image -->
[[File:Tree.jpg|thumb|360px|Caption here]]
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.
|-
||
|
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.
[[File:Tree.jpg|thumb|120px|Caption here]]
[[File:Tree.jpg|thumb|360px|Caption here]]{{clr}}
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.
|-
||
|
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.
initially VISIBLE small image -->
[[File:Tree.jpg|right|120px|Caption here]]
initially INVISIBLE large image -->
[[File:Tree.jpg|right|360px|Caption here]]
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.
|-
||
|
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.
[[File:Tree.jpg|right|120px|Caption here]]
[[File:Tree.jpg|right|360px|Caption here]]{{clr}}
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.
|-
|}