A jQuery plugin that sets a division to flip between text values like a flight board at an airport. If you find this plugin useful please vote for it on the jQuery site.
This page provides a documentation reference for working with the plugin v1.0.1. See a demonstration of the flight board plugin and download the code from there. Or see a minimal page that you could use as a basis for your own investigations.
Customise each targetted division with the settings below (all are optional):
$(selector).flightboard({messages: [..., ...]});.
afterFlip | beforeFlip | flips | lettersImage | lettersSeq | lettersSize | maxLength | messages | opacity | pause | repeat | selection | sequential | shading | shadingImages | speed
| Name | Type | Default | Comments |
|---|---|---|---|
| lettersImage | string | 'img/flightboard-large.png' | The location (URL) of the image that contains a horizontal amalgamation of the letters to be shown on the flight board. |
| lettersSize | number[2] | [25, 34] | The width and height of the individual letters within the
lettersImage setting.
The height should be an even number. |
| lettersSeq | string | ' ABCDEFGHIJKLMNOPQ RSTUVWXYZ0123456789' | The sequence of the individual letters within the
lettersImage setting. |
| messages | string[] | ['SEE THE FLIGHT BOARD', 'CHANGE MESSAGES'] | The messages to display on the flight board.
The case of these messages must match the case in the
lettersSeq setting. |
| maxLength | number | 20 | The number of characters to show on the flight board. |
| flips | number or number[2] | [3, 5] | The number of flips made for individual characters during a message flip on the flight board. The value may be a single number or an array with the minimum and maximum values. At each flip a random intermediate character is shown. |
| sequential | boolean | false | Set to true to always move sequentially through all the letters
to the target character. Set to false to select random characters
based on the flips option.Since 1.0.1. |
| speed | number | 500 | The number of milliseconds that it takes for each individual character
flip to complete. There may be multiple character flips per message flip -
see flips setting. |
| repeat | boolean | true | Set to true to automatically flip the board to a new message after pausing the time below. Set to false to only flip on demand. |
| pause | number | 2000 | The number of milliseconds to pause between message flips. |
| selection | string | 'forward' | Determine how the next message to be shown is selected. The value should be one of 'forward', 'backward', or 'random'. |
| shading | boolean | true | Set to true to add the shading for enhancing the 3D effects. Set to false to not apply shading. |
| opacity | number | 0.5 | The maximum opacity for the highlight and shadow. Valid values are 0.0 to 1.0. |
| shadingImages | string[2] | ['img/flightBoardHigh.png', 'img/flightBoardShad.png'] | Locations of the highlight and shadow images used by IE for the shading effects. |
| beforeFlip | function | null | A callback made just before each flip starts.
The function receives the current (shown) and next (to be shown) messages
as parameters, while this refers to the containing division. |
| afterFlip | function | null | A callback made just after each flip ends.
The function receives the current (just hidden) and next (just displayed) messages
as parameters, while this refers to the containing division.$(selector).flightboard({afterFlip: endedFlip});
function endedFlip(current, next) {
$('#flipStatus').text('ended ' + current + ' » ' + next);
} |
change | current | destroy | flip | next | setDefaults | start | stop
| Signature | Returns | Comments |
|---|---|---|
| $.flightboard.setDefaults(options) | flight board object | Update the default
instance settings to use with all flight board instances.options (object) is the set of default settings |
| $(selector).flightboard('change', options, value) | jQuery object | Update the settings
for the flight board instance attached to the given division(s).options (object) is the set of new settings or
(string) the name of a single settingvalue (any, optional) is the value of the single setting |
| $(selector).flightboard('destroy') | jQuery object | Remove the flight board functionality from the given division(s). |
| $(selector).flightboard('flip', next) | jQuery object | Trigger another flip of the flight board for the given division(s).next (int, optional) the index of the next message to show |
| $(selector).flightboard('stop') | jQuery object | Stop the automatic rotation of the flight board for the given division(s). |
| $(selector).flightboard('start') | jQuery object | Start the automatic rotation of the flight board for the given division(s). |
| $(selector).flightboard('current') | string | Retrieve the currently visible message in the flight board for the given division. |
| $(selector).flightboard('next') | string | Retrieve the next message in the flight board to be displayed for the given division. |
Contact Keith Wood at kbwood{at}iinet.com.au with comments or suggestions.