jQuery Flight Board

Default Settings

The flight board functionality can easily be added to a division with appropriate default settings. It then displays the messages in a cycle after two seconds. Highlights and shadows are used to enhance the 3D effect.

Stop and restart the automatic flipping with the appropriate commands.

You can also remove the flight board functionality with the 'destroy' command if it is no longer required.

This widget is costly when animating. I would recommend only having one per page.

Basic board: Stop Remove

$('#defaultBoard').flightboard();

$('#stopBoard').toggle(function() {
		$(this).text('Start');
		$('#defaultBoard').flightboard('stop');
	}, function() {
		$(this).text('Stop');
		$('#defaultBoard').flightboard('start');
	}
);

$('#removeBoard').toggle(function() {
		$(this).text('Re-attach');
		$('#defaultBoard').flightboard('destroy');
	},
	function() {
		$(this).text('Remove');
		$('#defaultBoard').flightboard();
	}
);

You can override the defaults globally as shown below:

$.flightboard.setDefaults({speed: 750, pause: 3000});

Processed fields are marked with a class of hasFlightBoard and are not re-processed if targetted a second time.

Options

Control how the flight board works by supplying various options when attaching it. You can change the options on the fly with

$(selector).flightboard('change', {...})

You can trigger a new message change with

$(selector).flightboard('flip')

This command can also take a callback function to notify you of the completion of the change.

Change flip speed: 300400 500 7501000 2000ms per flip with 0500 10002000 5000ms pause

Number of flips: 1 23 45 67 89 10 to 1 23 45 67 89 10

Shading: true false

Sequential letters: true false

Next message: Forward Backward Random

Alternate image: Default (flightBoardLarge.png) Alternate (flightBoardLarge2.png) Small (flightBoardSmall.png)

Repeat: true false Flip

$('#optionsBoard').flightboard({maxLength: 14,
	messages: ['FIRST MESSAGE', 'SECOND MESSAGE', 'THIRD MESSAGE']});

var imageOptions = [];
imageOptions[0] = {lettersImage: 'img/flightBoardLarge.png', lettersSize: [25, 34]};
imageOptions[1] = {lettersImage: 'img/flightBoardLarge2.png', lettersSize: [25, 34]};
imageOptions[2] = {lettersImage: 'img/flightBoardSmall.png', lettersSize: [14, 18]};

$('#options select').change(function() {
	var minFlips = parseInt($('#minFlips').val());
	var maxFlips = Math.max(minFlips, parseInt($('#maxFlips').val()));
	$('#optionsBoard').flightboard('change', 
		$.extend(imageOptions[$('#image').val()],
		{flips: [minFlips, maxFlips],
		speed: parseInt($('#speed').val()),
		pause: parseInt($('#pause').val()),
		shading: $('#shading').val() == 'true',
		sequential: $('#sequential').val() == 'true',
		selection: $('#selection').val(),
		repeat: $('#repeat').val() == 'true'}));
	$('#flipButton').attr('disabled',
		($('#repeat').val() == 'true' ? 'disabled' : ''));
});

$('#flipButton').click(function() {
	$('#optionsBoard').flightboard('flip');
});

Flip Callbacks

There are two callbacks available: one just as the flip is starting and another as the flip ends.

Before/after flip:

  Status:

$('#callbackBoard').flightboard(
	{beforeFlip: startingFlip, afterFlip: endedFlip});

function startingFlip(current, next) {
	$('#flipStatus').text('started ' + current + ' » ' + next);
}

function endedFlip(current, next) {
	$('#flipStatus').text('ended ' + current + ' » ' + next);
}

Flip Clock

Use the flight board as a clock.

Clock:

$('#clock .board').flightboard({
	maxLength: 2, messages: [''], flips: 1, repeat: false});

// setInterval(updateClock, 1000);

var lastTime = currentTime();

function updateClock() {
	var thisTime = currentTime();
	for (var i = 0; i <= 4; i++) {
		if (thisTime[i] != lastTime[i]) {
			$('#clock' + timeNames[i] + 'Board').
				flightboard('change', 'messages', [lastTime[i], thisTime[i]]).
				flightboard('flip');
		}
	}
	lastTime = thisTime;
}

function currentTime() {
	var now = new Date();
	var hour = now.getHours() % 12 || 12;
	var min = now.getMinutes();
	var sec = now.getSeconds();
	return [(hour < 10 ? '0' : '') + hour,
		(min < 10 ? '0' : '') + min,
		(sec < 10 ? '0' : '') + sec,
		(now.getHours() < 12 ? 'AM' : 'PM')];
}

<div id="clockHrBoard" class="board"></div>
<div class="clockSep">:</div>
<div id="clockMinBoard" class="board"></div>
<div class="clockSep">:</div>
<div id="clockSecBoard" class="board"></div>
<div id="clockAPBoard" class="board"></div>

In the Wild

This tab highlights examples of this plugin in use "in the wild".

To add another example, please contact me (kbwood{at}iinet.com.au) and provide the plugin name, the URL of your site, its title, and a short description of its purpose and where/how the plugin is used.

Quick Reference

A full list of all possible settings is shown below. Note that not all would apply in all cases. For more detail see the documentation reference page.

$(selector).flightboard({
	lettersImage: 'img/flightBoardLarge.png', // Amalgamated image for letters background
	lettersSize: [25, 34], // Width and height of individual letters
	lettersSeq: ' ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', // Positioning of letters within image
	messages: ['SEE THE FLIGHT BOARD', 'CHANGE MESSAGES'], // Messages to display
	maxLength: 20, // Maximum length of flight board
	flips: [3, 5], // Number of flips before new value,
		// may be an array with minimum and maximum flips
	sequential: false, // True to step through all letters, false for random ones
	speed: 500, // Time taken (milliseconds) for a single transition
	repeat: true, // True to automatically trigger a new transition after a pause
	pause: 2000, // Time (milliseconds) between transitions
	selection: 'forward', // How to choose the next item to show:
		// 'forward', 'backward', 'random'
	shading: true, // True to add shading effects, false for no effects
	opacity: 0.5, // Maximum opacity (0.0 - 1.0) for highlights and shadows
	// Locations of the highlight/shadow images for IE
	shadingImages: ['img/flightBoardHigh.png', 'img/flightBoardShad.png'],
	beforeFlip: null, // Callback before flipping
	afterFlip: null // Callback after flipping
});

$.flightboard.setDefaults(options) // Change global settings
$(selector).flightboard('change', options) // Change settings
$(selector).flightboard('change', name, value) // Change one setting
$(selector).flightboard('destroy') // Remove flight board
$(selector).flightboard('stop') // Stop automatic flipping
$(selector).flightboard('start') // Start automatic flipping
$(selector).flightboard('flip', next) // Flip to next message
$(selector).flightboard('current') // Retrieve current message
$(selector).flightboard('next') // Retrieve next message