Differences between revisions 8 and 33 (spanning 25 versions)
Revision 8 as of 2008-12-11 19:00:07
Size: 1370
Editor: KaiJaeger
Comment:
Revision 33 as of 2008-12-14 12:56:22
Size: 4549
Editor: KaiJaeger
Comment:
Deletions are marked like this. Additions are marked like this.
Line 3: Line 3:
'''SeeSaw''' is a !MoinMoin macro written by Jim Wight. '''''Note that this stuff is currently experimental'''''


<<SeeSaw(section="toc", show=True, toshow="(<<show>> Contents)", tohide="(<<hide>> Contents)")>>

{{{#!wiki seesaw/toc/show
<<TableOfContents>>
}}}

'''''SeeSaw''''' is a !MoinMoin macro written by Jim Wight.
Line 7: Line 16:
In case that a particular topic is very complex, you might have to provide quite a large amount of information. On the Web, chances are that a use will stop reading any information at all if she gets flooded with to many pieces of information. In case that a particular topic is very complex, you might have to provide quite a large amount of information. On the Web, chances are that a user will stop reading any information at all if she gets flooded with too many pieces of information.
Line 13: Line 22:
== Inline Usage == == Applications ==
Line 15: Line 24:
This line contains some <<SeeSaw(section="example1", inline=" hidden")>> text. Click on the link to show it. There are three main applications for this purpose:
Line 17: Line 26:
== Section Usage ==  * (Show (and later may be hide) a string of characters within a particular paragraph.
Line 19: Line 28:
=== I. Reveale text ===  * Switch between to different version of a paragraph, for example a "UNIX" and a "Windows" version.
Line 21: Line 30:
<<SeeSaw(section="example2", toshow="Show the details", tohide="Hide the details", bg="#FFFFDD")>>  * Reveal a (potentially large amount of) text after a click on a kind of short description or header
Line 23: Line 32:
{{{#!wiki seesaw/example2/show
This paragraph might contain a large amount of details only geeks might be interested in. This paragraph might contain a large amount of details only geeks might be interested in.
The first application works "Inline", the other two on a "Section".

These three applications are demonstrated underneath.

=== Inline Usage ===

This line contains some <<SeeSaw(section=example1, inline=" hidden", bg="#FEE1A5")>> text. Click on the link to show it.

=== Section Usage ===

==== Reveal Text ====

<<SeeSaw(section="example2a", toshow="<<Show>> the details", tohide="<<Hide>> the details", bg="#FEE1A5")>>

{{{#!wiki seesaw/example2a/example2-bg/hide
This paragraph might contain a large amount of details only geeks might be interested in. This paragraph might contain a large amount of details only geeks might be interested in. This paragraph might contain a large amount of details only geeks might be interested in. This paragraph might contain a large amount of details only geeks might be interested in.

This paragraph might contain a large amount of details only geeks might be interested in. This paragraph might contain a large amount of details only geeks might be interested in. This paragraph might contain a large amount of details only geeks might be interested in. This paragraph might contain a large amount of details only geeks might be interested in. This paragraph might contain a large amount of details only geeks might be interested in. This paragraph might contain a large amount of details only geeks might be interested in. This paragraph might contain a large amount of details only geeks might be interested in.

 * Might contain all sorts of elements

 * Including lists
Line 27: Line 57:
=== II. Toggle text === ==== Reveal Code ====
Line 29: Line 59:
<<SeeSaw(section="example2", toshow="Show the details", tohide="Hide the details")>> Note that for including code, the SeeSaw code must be embraced not by three but by four curlies (={}). Only then APL code, which needs to be embraced by three curlies as well, will get recognized as such properly.
Line 31: Line 61:
{{{#!wiki seesaw/example2
Some details; going to be replaced by something else.
<<SeeSaw(section="example2b", toshow="<<Show>> the code", tohide="<<Hide>> the code", bg="#FEE1A5")>>
Line 34: Line 63:
{{{#!wiki seesaw/example2/example2-bg
Some nonsense used for toggling.
{{{{#!wiki seesaw/example2b/example2b/hide
{{{
Pri
m←{{⍵/⍨2=+⌿0=⍵∘.|⍵}⍳⍵}
Line 37: Line 67:
}}}}

==== Toggle Text ====

{{{#!wiki seesaw/example3/show
'''Dyalog Section''' (show <<SeeSaw(section="example3", toshow="APLX")>> section)

Some details related to Dyalog APL.<<BR>>
This is shown initially. It is hidden and the "APLX" section is displayed when "Show APLX section" is clicked.
}}}

{{{#!wiki seesaw/example3/hide
'''APLX Section''' (Show <<SeeSaw(section="example3", toshow="Dyalog")>> section)

Some details related to APLX.<<BR>>
This is hidden initially.
}}}

== Conclusion ==

To hide complex parts of information is possible in two ways:

 * Splitting it into different pages, adding links to sub-pages
 
 * Represent the details by a short description and make it visible by a click on it without the additional drawback of a page reload.

The former technique has it's merits, of course, but it comes with drawbacks as well: If the sub-pieces are relatively small but their total number is high, it might increase the number of pages dramatically. Not helpful at all when searching pages.

In those cases the hide/show technique represented here is certainly an alternative. The "Reveal" method would be appropriate for that.

However, the other methods demonstrated on this page are less usefull, but still...

Only it needs !JavaScript: if the user has disabled it, the whole damn mechanism doesn't work.

SeeSaw Macro

Note that this stuff is currently experimental

( hide Contents)

Contents

SeeSaw is a MoinMoin macro written by Jim Wight.

Overview

In case that a particular topic is very complex, you might have to provide quite a large amount of information. On the Web, chances are that a user will stop reading any information at all if she gets flooded with too many pieces of information.

A common technique to deal with this problem is to provide only essential information but to allow the user to "show" more information usually represented by a short description.

That's what the MoinMoin macro SeeSaw is designed to do.

Applications

There are three main applications for this purpose:

  • (Show (and later may be hide) a string of characters within a particular paragraph.
  • Switch between to different version of a paragraph, for example a "UNIX" and a "Windows" version.
  • Reveal a (potentially large amount of) text after a click on a kind of short description or header

The first application works "Inline", the other two on a "Section".

These three applications are demonstrated underneath.

Inline Usage

This line contains some »» text. Click on the link to show it.

Section Usage

Reveal Text

Show the details

This paragraph might contain a large amount of details only geeks might be interested in. This paragraph might contain a large amount of details only geeks might be interested in. This paragraph might contain a large amount of details only geeks might be interested in. This paragraph might contain a large amount of details only geeks might be interested in.

This paragraph might contain a large amount of details only geeks might be interested in. This paragraph might contain a large amount of details only geeks might be interested in. This paragraph might contain a large amount of details only geeks might be interested in. This paragraph might contain a large amount of details only geeks might be interested in. This paragraph might contain a large amount of details only geeks might be interested in. This paragraph might contain a large amount of details only geeks might be interested in. This paragraph might contain a large amount of details only geeks might be interested in.

  • Might contain all sorts of elements
  • Including lists

Reveal Code

Note that for including code, the SeeSaw code must be embraced not by three but by four curlies (={}). Only then APL code, which needs to be embraced by three curlies as well, will get recognized as such properly.

Show the code

Prim←{{⍵/⍨2=+⌿0=⍵∘.|⍵}⍳⍵}

Toggle Text

Dyalog Section (show APLX section)

Some details related to Dyalog APL.
This is shown initially. It is hidden and the "APLX" section is displayed when "Show APLX section" is clicked.

APLX Section (Show Dyalog section)

Some details related to APLX.
This is hidden initially.

Conclusion

To hide complex parts of information is possible in two ways:

  • Splitting it into different pages, adding links to sub-pages
  • Represent the details by a short description and make it visible by a click on it without the additional drawback of a page reload.

The former technique has it's merits, of course, but it comes with drawbacks as well: If the sub-pieces are relatively small but their total number is high, it might increase the number of pages dramatically. Not helpful at all when searching pages.

In those cases the hide/show technique represented here is certainly an alternative. The "Reveal" method would be appropriate for that.

However, the other methods demonstrated on this page are less usefull, but still...

Only it needs JavaScript: if the user has disabled it, the whole damn mechanism doesn't work.

SeeSaw (last edited 2017-02-16 18:42:06 by KaiJaeger)