Assorted javascripts

A collection of scripts I've written, mostly for layout purposes. I've tried to make sure that a) if the user doesn't have javascript enabled, the default display will still be sensible; b) creating the associated html is as simple as possible; and c) while no javascript editing should be necessary, a degree of customisation is easy.

Image Rotater

Summary:

A javascript to display a set of images in rotation, either in sequence or pseudo-randomly (avoiding one image twice in a row). If javascript isn't available, the default image will display.

Sequential

images in sequential rotation

Pseudo-random

images in pseudo-random rotation

To use:

Place <script type='text/javascript' src='rotating.js'></script> at the bottom of your html body, then create the image with the general structure:

    <img class="rotating source(1.png,2.png,3.png) seconds3 randomY"
      id="img_01" alt="images in rotation" src="images/1.png" />

Css class names are customisable in the javascript.

Download rotating.js (5KB)

Expand/Collapse Toggler

Summary:

A javascript to let the user expand and collapse a chunk of text (as on this page). If javascript isn't available, the text will default to being expanded.

To use:

Place <script type='text/javascript' src='toggle.js'></script> at the bottom of your html body, then create your toggles with the general structure:

    <h4>Title <a class="toggle"></a></h4>
      <div class="collapsed">
        Text goes here.
      </div>

The toggle text and class names are customisable in the javascript.

Note that to work it will create id names (or, if id names are present, replace them) for each toggle and collapsed element based on the class names: by default toggle0, toggle1, toggle2 etc and collapsed0, collapsed1, collapsed2 etc.

Download toggle.js (4KB)

Circle Menus

Summary:

A javascript to display a set of elements (text, link, image...) around the circumference of a circle and displays blurbs in the centre when a label is hovered over. If there are more elements than positions available, 'more' buttons let the user navigate. If javascript isn't available, the elements display as per normal css styling.

1

one

2

two

3

three

4

four

5

five

6

six

7

seven

8

eight

9

nine

10

ten

11

eleven

12

twelve

To use:

Place <script type='text/javascript' src='circlemenu.js'></script> at the bottom of your html body, then create your elements in the general structure:

    <div class="circle_menu max5 width200">
     <div class="menu_item">
      <div class="menu_head">
       label
      </div>
      <div class="menu_body">
       description
      </div>
     </div>
       [...]
     <div class="menu_item">
      <div class="menu_head">
       label
      </div>
      <div class="menu_body">
       description
      </div>
     </div>
    </div>

Every tag name, class name, and 'more/less' text I could think of are customisable in the javascript.

Note that to work it will create id names (or, if id names are present, replace them) for each 'menu_item' element: by default menu_item0, menu_item1, menu_item2 etc.

Download circlemenu.js (12KB)

Deborah Fitchett