Differences between revisions 12 and 46 (spanning 34 versions)
Revision 12 as of 2008-12-12 10:09:09
Size: 1823
Editor: KaiJaeger
Comment:
Revision 46 as of 2017-02-16 18:42:06
Size: 7475
Editor: KaiJaeger
Comment:
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
<<TableOfContents>>
Line 3: Line 5:
'''SeeSaw''' is a !MoinMoin macro written by Jim Wight. ~-<<SeeSaw(section="table-of-contents", show="true", seesaw="false", toshow="<<(Show>> table-of-contents)", tohide="<<(Hide>> table-of-contents)", speed="Slow")>>-~

'''''SeeSaw''''' is a !MoinMoin macro written by Jim Wight.
Line 6: Line 10:
Line 13: Line 16:
== Inline Usage == == Applications ==
There are three main applications for this purpose:
Line 15: Line 19:
This line contains some <<SeeSaw(section="example1", inline=" hidden")>> text. Click on the link to show it.  * (Show (and later may be hide) a string of characters within a particular paragraph.
Line 17: Line 21:
== Section Usage ==  * Switch between to different version of a paragraph, for example a "UNIX" and a "Windows" version.
Line 19: Line 23:
=== I. Reveale text ===  * Reveal a (potentially large amount of) text after a click on a kind of short description or header
Line 21: Line 25:
<<SeeSaw(section="example2", toshow="Show the details", tohide="Hide the details", bg="#FFFFDD")>> The first application works "Inline", the other two on a "Section".
Line 23: Line 27:
{{{#!wiki seesaw/example2/show 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.

The code:
{{{{
This line contains some <<SeeSaw(section=foo, inline=" hidden", bg="#FEE1A5")>> text. Click on the link to show it.
}}}}

Note that "foo" is used as section name. Every seesaw-section must have a name unique on the current page.

=== Section Usage ===
==== Reveal Text ====
<<SeeSaw(section="example2a", toshow="<<Show>> the details", tohide="<<Hide>> the details", bg="#FEE1A5", speed="Slow")>>

{{{#!wiki seesaw/example2a/example2a-bg/hide
Line 25: Line 45:

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 52:
=== II. Toggle text === The code:
{{{{
<<SeeSaw(section="foo", toshow="<<Show>> the details", tohide="<<Hide>> the details", bg="#FEE1A5", speed="Slow")>>
{{{#!wiki seesaw/foo/foo-bg/hide
Line 29: Line 57:
{{{#!wiki seesaw/example2/show
'''Dyalog Section'''<<BR>><<BR>>
.... (stuff to be revealed)
}}}
}}}}
Note that "foo" is used as section name. Every seesaw-section must have a name unique on the current page.

==== 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.

<<SeeSaw(section="example2b", toshow="<<Show>> the code", tohide="<<Hide>> the code", bg="#FEE1A5", speed="Slow")>>

{{{{#!wiki seesaw/example2b/example2b/hide
{{{
Prim←{{⍵/⍨2=+⌿0=⍵∘.|⍵}⍳⍵}
}}}
}}}}

The code:

{{{{{
<<SeeSaw(section="foo", toshow="<<Show>> the code", tohide="<<Hide>> the code", bg="#FEE1A5", speed="Slow")>>
{{{{#!wiki seesaw/foo/foo/hide
{{{
Prim←{{⍵/⍨2=+⌿0=⍵∘.|⍵}⍳⍵
}}}
}}}}
}}}}}

Note that "foo" is used as section name. Every seesaw-section must have a name unique on the current page.

Note also that the SeeSaw-section is enclosed not by three but by four curly brackets. Only this way the three curly brackets inside the SeeSaw-section are recognized as APL-code-markup.

==== Toggle Text ====
{{{#!wiki seesaw/example3/show
'''Dyalog Section''' (show <<SeeSaw(section="example3", toshow="NARS2000", speed="Slow")>> section)
Line 32: Line 93:
This is shown initially. It is hidden and the "APLX" section is displayed when "Show Dyalog section" is clicked. This is shown initially. It is hidden and the "NARS2000" section is displayed when "Show NARS2000 section" is clicked.
}}}
{{{#!wiki seesaw/example3/hide
'''NARS2000 Section''' (Show <<SeeSaw(section="example3", toshow="Dyalog", speed="Slow")>> section)

Some details related to NARS2000.<<BR>>
This is hidden initially.
Line 35: Line 102:
<<SeeSaw(section="example2", toshow="Show APLX section", tohide="Show Dyalog section")>> The code:
Line 37: Line 104:
{{{#!wiki seesaw/example2/hide
'''APLX Section'''<<BR>><<BR>>
Some details related to APLX.<<BR>>
This is hidden initially..
{{{{
{{{#!wiki seesaw/example3/show
'''Dyalog Section''' (show <<SeeSaw(section="foo", toshow="NARS2000", speed="Slow")>> section)
Line 42: Line 108:
'''Working but not prefect yet - still under construction!''' Some details related to Dyalog APL.<<BR>>
This is shown initially. It is hidden and the "NARS2000" section is displayed when "Show NARS2000 section" is clicked.
Line 44: Line 111:
{{{#!wiki seesaw/foo/hide
'''NARS2000 Section''' (Show <<SeeSaw(section="foo", toshow="Dyalog", speed="Slow")>> section)

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

Note that "foo" is used as section name. Every seesaw-section must have a name unique on the current page.

== Warnings ==
=== Pictures ===

'''Update''': we have not seen this for a long time, it's probably not an issue any more at all.

Sometimes, though rarely, !MoinMoin refuses to deliver all pictures, if there are many of them on a page. Although this sounds unlikely, this effect happens to happen more often in !SeeSaw-controlled sections. This is not a mistake of !SeeSaw - pressing F5 often fixes the problem, or at least changes the problem: invisible pictures might become visible while visible pictures might become invisible.

So try to avoid putting a section with many pictures into a !SeeSaw-controlled section. This is a very rare problem which you might never come across anyway.

=== Table-of-contents ===

A TOC could very well be controlled by !SeeSaw. This page acts as an example.

The code:

{{{
~-<<SeeSaw(section="table-of-contents", show="true", seesaw="false", toshow="<<(Show>> table-of-contents)",
    tohide="<<(Hide>> table-of-contents)", speed="Slow")>>-~
}}}


== 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. '''Update''': true, but these days without !JavaScript the whole web would largely stop working.

-- KaiJaeger <<DateTime(2015-06-11T08:37:36Z)>>

SeeSaw Macro

(Hide table-of-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.

The code:

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

Note that "foo" is used as section name. Every seesaw-section must have a name unique on the current page.

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

The code:

<<SeeSaw(section="foo", toshow="<<Show>> the details", tohide="<<Hide>> the details", bg="#FEE1A5", speed="Slow")>>
{{{#!wiki seesaw/foo/foo-bg/hide

.... (stuff to be revealed)
}}}

Note that "foo" is used as section name. Every seesaw-section must have a name unique on the current page.

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=⍵∘.|⍵}⍳⍵}

The code:

<<SeeSaw(section="foo", toshow="<<Show>> the code", tohide="<<Hide>> the code", bg="#FEE1A5", speed="Slow")>>
{{{{#!wiki seesaw/foo/foo/hide
{{{
Prim←{{⍵/⍨2=+⌿0=⍵∘.|⍵}⍳⍵
}}}
}}}}

Note that "foo" is used as section name. Every seesaw-section must have a name unique on the current page.

Note also that the SeeSaw-section is enclosed not by three but by four curly brackets. Only this way the three curly brackets inside the SeeSaw-section are recognized as APL-code-markup.

Toggle Text

Dyalog Section (show NARS2000 section)

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

NARS2000 Section (Show Dyalog section)

Some details related to NARS2000.
This is hidden initially.

The code:

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

Some details related to Dyalog APL.<<BR>>
This is shown initially. It is hidden and the "NARS2000" section is displayed when "Show NARS2000 section" is clicked.
}}}
{{{#!wiki  seesaw/foo/hide
'''NARS2000 Section''' (Show <<SeeSaw(section="foo", toshow="Dyalog", speed="Slow")>> section)

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

Note that "foo" is used as section name. Every seesaw-section must have a name unique on the current page.

Warnings

Pictures

Update: we have not seen this for a long time, it's probably not an issue any more at all.

Sometimes, though rarely, MoinMoin refuses to deliver all pictures, if there are many of them on a page. Although this sounds unlikely, this effect happens to happen more often in SeeSaw-controlled sections. This is not a mistake of SeeSaw - pressing F5 often fixes the problem, or at least changes the problem: invisible pictures might become visible while visible pictures might become invisible.

So try to avoid putting a section with many pictures into a SeeSaw-controlled section. This is a very rare problem which you might never come across anyway.

Table-of-contents

A TOC could very well be controlled by SeeSaw. This page acts as an example.

The code:

~-<<SeeSaw(section="table-of-contents", show="true", seesaw="false", toshow="<<(Show>> table-of-contents)", 
    tohide="<<(Hide>> table-of-contents)", speed="Slow")>>-~

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. Update: true, but these days without JavaScript the whole web would largely stop working.

-- KaiJaeger 2015-06-11 08:37:36

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