SeeSaw

Purpose

To enable sections of a page to be see-sawed (toggled) between hidden and shown, or unconditionally placed in either state.

Description

SeeSaw creates a link or button for performing its actions. ('Link' in the remainder of this description should be interpreted as 'link or button'.) The link has two parts: at any time one is shown and the other hidden. SeeSaw uses the CSS 'display' attribute to switch between the two parts, and to hide and show sections. Every page element that SeeSaw affects is normally identified with the CSS class name 'seesaw', so that it is impossible for it to accidentally affect unrelated elements. Sections are either block (HTML div) or inline (HTML span).

The link is created by a call of the following form:

<<SeeSaw(section="section", toshow="toshow", tohide="tohide",
         show=True|False, bg="background", inline="inline",
         image="arrow|plumin", speed="slow|normal|fast"|integer,
         seesaw=True|False, addclass="list", type="link|button",
         effect="slide|fade")>>

section

in basic usage, specifies the name of a section that the link will toggle; the name is also attached to the link's parts as a CSS class name, and needs to be attached to sections that the link is to affect; the value of section defaults to 'section'; extended usage is described below;

toshow

specifies the text to display for showing the section; it defaults to 'Show' (for block) and '»»' (for inline)

tohide

specifies the text to display for hiding the section; if toshow is given, but not tohide, tohide is set to the value of show; toshow is undefined if only tohide is provided; it defaults to 'Hide' (block) and '««' (inline);

show

specifies whether the section is to be shown initially; it defaults to False

bg

specifies the background colour to use for the section; it defaults to None

inline

specifies the text of an inline section; SeeSaw creates inline sections itself, immediately after the links; it defaults to None, and non-presence implies the call relates to a block section

image

selects an image set to use for the links instead of text, with toshow and tohide being ignored; it defaults to None; the location of the images must be configured in the 'Configuration' section of SeeSaw.py, where additional image sets can easily be added;

speed

specifies the rate at which the section (not inline) should appear or disappear, or provides a number of milliseconds for the animation to last; it defaults to 0, unless 'effect' (see below) is used, in which case it defaults to 400

seesaw

SeeSaw will, by default, only toggle block sections created for it, i.e. bearing the CSS class name 'seesaw'; this option, when set to False, enables other divs to be toggled from a SeeSaw link; it defaults to True

addclass

specifies a space-separated list of additional CSS class names to be associated with the link, and inline section, if any, to enable them to be manipulated using those names in other SeeSaw calls; it defaults to None

type

specifies the type of HTML element to create for performing the actions; it defaults to 'link'

effect

specifies an alternative style of animation for showing and hiding the section (not inline); it defaults to None

(NB String arguments don't need to be quoted unless they contain spaces or special characters)

The (leading) arguments can also be given positionally, in the order of the keyword arguments above, e.g.

<<SeeSaw(section1, Show, Hide, True)>>

is equivalent to

<<SeeSaw(section=section1, toshow=Show, tohide=Hide, show=True)>>

In extended usage, 'section' is a space- or slash-separated list of plain or modified section or CSS class names specifying actions to be carried out when the link is clicked. The items can have any of the following forms:

section  - as in basic usage
%section - for toggling links and sections identified by "section"
+section - for unconditionally showing other section(s)
-section - for unconditionally hiding other section(s)

The full description can be found in the source file, or can be seen at http://seesaw.ncl.ac.uk

Requirements

SeeSaw uses JavaScript and requires jQuery.

Examples

<<SeeSaw(section=example5, toshow="See-Saw", show=True, bg="#FFFFDD")>> example 5
{{{#!wiki seesaw/example5/show
This is part 1 of example 5; it is displayed initially.<<BR>>
It is hidden and part 2 displayed when See-Saw is clicked
}}}
{{{#!wiki seesaw/example5/example5-bg
This is part 2 of example 5; it has a different background colour and is
displayed when part 1 is hidden.<<BR>>
It is hidden and part 1 displayed again when See-Saw is clicked.
}}}

SeeSaw can be seen in action at http://seesaw.ncl.ac.uk

Download

Copyright

2008,2009,2011 Jim Wight

discussions

please look with pylint on SeeSaw.py and fix issues showed there e.g.

W:251:execute: Redefining built-in 'dict'
W:252:execute: Redefining built-in 'type'

and others