TwistyContrib < TWiki < Astrophysics Wiki

r3 - 22 Feb 2006 - 08:42:37 - TWikiContributorYou are here: Astrophysics Wiki >

TWiki Web > TwistyContrib

---+!! <nop>%TOPIC%

%TOC%

---++ Summary

This contrib packages in a convenient way the Javascript library and the CSS file needed to implement TWisty Sections.

See the  [[%ATTACHURL%/toggle-optm-jsoff-sep.html][attached file]] for a demo and an example of usage.

To use the libraries, you must place the following scriplet either in the head section of the page (by modifying the %TWIKIWEB%.TWikiSkins) or putting it somewhere in the topic:

<verbatim>
<style type="text/css" media="all">
@import url("%PUBURLPATH%/TWiki/TwistyContrib/twist.css");
</style>

<script type="text/javascript" src="%PUBURLPATH%/TWiki/TwistyContrib/twist.js"></script>
</verbatim>

It's recommended to use the TWiki:Plugins.TwistyPlugin, as it eases the deployment and use of this contrib.

%RED%Caution: If the previous scriplet is put in the HEAD section of the page or the TWiki:Plugins.TwistyPlugin is used, it won't work if the =&lt;body onload=""&gt;= manager is set by the skin. Check the [[%ATTACHURL%/twist.js][twist.js]] file for an idea on how to register an eventmanager for the onload event without overwriting the previous one.%ENDCOLOR%

This Contrib should work in all versions of TWiki. It has been tested against TWiki:Codev.CairoRelease and TWiki:Codev.DakarRelease.

---++ Customization

Skins can customize the color of the twisty placeholder by modifiying the =.twistyPlaceholder= style.

---++ Settings

	* Set SHORTDESCRIPTION = Twisty section javascript library to open/close content dynamically 
	* Set STUB = TWiki::Contrib::TwistyContrib

---++ Installation Instructions

	* Download the ZIP file from the Plugin web (see below)
	* Unzip ==%TOPIC%.zip== in your ($TWIKI_ROOT) directory. Content:
	| *File:* | *Description:* |
   | ==data/TWiki/TwistyContrib.txt== |  |
   | ==lib/TWiki/Contrib/TwistyContrib.pm== |  |
   | ==pub/TWiki/TwistyContrib/toggle-optm-jsoff-sep.html== |  |
   | ==pub/TWiki/TwistyContrib/twist.css== |  |
   | ==pub/TWiki/TwistyContrib/twist.js== |  |

	* Optionally, run ==%TOPIC%_installer== to automatically check and install other TWiki modules that this module depends on. You can also do this step manually.
	* Alternatively, manually make sure the dependencies listed in the table below are resolved.
	None

---++ Demo & Text

If the contrib is properly installed (and Javascript is enabled in your browser!), then you should see some folding sections below. Look at [[%SCRIPTURLPATH{"view"}%/%WEB%.%TOPIC%?raw=on]] to see how it's done.

<style type="text/css" media="all">
@import url("%PUBURLPATH%/TWiki/TwistyContrib/twist.css");
</style>

<script type="text/javascript" src="%PUBURLPATH%/TWiki/TwistyContrib/twist.js"></script>


<span id="demoshow" class="twistyHidden">
<button class="twistyTrigger"> Unfold </button>
</span>
<span id="demohide" class="twistyMakeVisible">
<button class="twistyTrigger"> Fold </button>
</span>
<div id="demotoggle" class="twistyMakeVisible">
---
Click on the button above to fold this section.
---
</div>

<span id="no_1show" class="twistyMakeVisible">
	<a href="#" class="twistyTrigger">Expand...</a>
	<span class="twistyPlaceholder twistyMakeVisible">Hamlet is without question the most famous play in the English language...</span>
</span>
<span id="no_1hide" class="twistyHidden">
	<a href="#" class="twistyTrigger">Collapse...</a>
</span>
<div id="no_1toggle" class="twistyMakeHidden">
Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development; the playwright achieved artistic maturity in this work through his brilliant depiction of the hero's struggle with two opposing forces: moral integrity and the need to avenge his father's murder.

<span id="no_2show" class="twistyMakeVisible">
<a href="#" class="twistyTrigger">More...</a>
</span>
<span id="no_2hide" class="twistyHidden twistyMakeVisible">
<a href="#" class="twistyTrigger">Hide more</a>
</span>

</div>

<div id="no_2toggle" class="twistyMakeHidden">
For more Shakespeare plays, see Wikipedia:WilliamShakespeare
</div>

---++ Contrib Info

| Authors: | Javascript created by TWiki:Main.SamHasler, Contrib packaged by  TWiki:Main.RafaelAlvarez |
| Copyright &copy;: | 2005 Sam Hasler and Rafael Alvarez |
| License: | [[http://www.gnu.org/copyleft/gpl.html][GPL]] |
| Dependencies: | None |
|  12 Sep 2005 | 1.000 First Version |
|  Home: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC% |
|  Feedback: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev |
|  Appraisal: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal |

__Related Topics:__ %TWIKIWEB%.TWikiPreferences
 
-- TWiki:Main.SamHasler - 12 Sep 2005

Show attachments

Hide attachments

Topic attachments
I	Attachment	Action	Size	Date	Who	Comment
css	twist.css	manage	0.5 K	25 Oct 2006 - 00:16	TWikiContributors	Style Sheet
html	toggle-optm-jsoff-sep.html	manage	1.7 K	25 Oct 2006 - 00:16	TWikiContributors	Example of usage
js	twist.js	manage	4.5 K	25 Oct 2006 - 00:16	TWikiContributors	Javscript library

TWiki

TwistyContrib

New topic

Information

Main Web Users Groups Index Search Changes Notifications Statistics Preferences

Webs Main Sandbox TWiki Zen Information

Main Web Users Groups Index Search Changes Notifications Statistics Preferences

Webs Main Sandbox TWiki Zen

Astrophysics Wiki

Edit Wysiwyg Attach Printable

Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Astrophysics Wiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.TwistyContrib