Dave Dupplaw BSc. PhD.

jQuery Tube Sign

Download

Fork me on GitHub

As part of my dev work at WDS, I have been building a tool to help with deployments and created both the railroad widget and this widget. This one displays a sign which looks much like the information signs you get on the platforms on the London underground. The idea was to match visuals of the tube map deployment system I was developing.

Here's an example of the sign:

The sign is entirely styled in its own css file and the font called DOTMBold from Moonbase Press.

To use it, you first need to include a few other javascript libraries. In particular, you require jQuery and the jQuery widget factory.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery-tube-sign.js"></script>

You also need to include the css file, if you're not wanting to style it yourself. The css file links to a fonts directory which contains the DOTMBold font, so you need those too.

<link rel="stylesheet" href="css/jquery-tube-sign.css"/>

To create the sign, just set your div to be the sign widget. The display area of the sign is divided into two columns which we call left content and right content. The input for a row on the sign is always an object that contains the left and right fields that have the content for each column. You can use the addFixedItem to add a row to the sign, as we did in the demo sign above:

$(document).ready( function() {
	$('#tubeSign').tubeSign();
	$('#tubeSign').tubeSign('addFixedItem', {left: "Edgeware Road", right: "2 mins"} );
} );

You may have noticed the entry animation for the fixed items that are displayed in the above sign. You can make the sign rotate amongst a set of items using the addRotaList method, which also takes a time in milliseconds that determines the scroll delay, plus a string that determines how the items scroll.

Clear Before Scroll

	$('#tubeSign').tubeSign('addRotaList', [
		{left:"Edgeware Road",right:"10mins"},
		{left:"Mordon",right:"15mins"},
		{left:"West Croydon",right:"20mins"}
	], 4000, "clearBeforeEachUpdate" );

Continuous Scroll

	$('#tubeSign').tubeSign('addRotaList', [
		{left: "High Barnet", right: "11mins"},
		{left: "Cockfosters", right: "12mins"},
		{left: "Upminster", right: "14mins"}
	], 4000, "continuousScroll" );

Mix and Match

It's also possible to mix and match different scrolls and fixed items:

	$('#tubeSign').tubeSign('addFixedItem', {left: "Upcoming Shows:", right:''} );
	$('#tubeSign').tubeSign('addRotaList', [
		{left: "Les Miserables", right: "&pound;20" },
		{left: "Cats", right: "&pound;22" },
		{left: "Hairspray", right: "&pound;30" },
		{left: "We Will Rock You", right: "&pound31" }
	], 4000, "continuousScroll" );

Contributing

You can fork the code on GitHub.

License

The code is released under the MIT license, which basically means you can do whatever you like except pretend it's yours.

Comments