Airport departure board or split-flap display effect with JavaScript

effecter Client-side scripting

Split-flap display
In this tutorial I’ll show you how to achieve the split-flap display (aka airport departure board) effect with JavaScript. Now available also as Jquery plugin

Before we start with the coding, let my explain really quick what we’ll do. For the purpose of this tutorial I’ve prepared a table with strings. My if-act (effect) will be executed on mouse over and stopped on mouse out if necessary. Let’s get started!

When you look at an airport departure board what do you see? Yep, flipping characters! So lets begin by defining the chars we want to flip in a long string.

Let’s put this variable in the body of a constructor function that will be our flipper class.

As you can see the constructor has 1 parameter that is the object whose innerHTML we’ll flip. In order to do that we need the chars of the innerHTML in an array. Chopping a string to array is simple with the method .split() of the String class. I also use another two arrays. The first I called indexes holds the indexes of the chars that need to be flipped. The other one is the array that will be flipped and it holds indexes of chars in our chars variable. With a little bit of initialization we come to this:

We’ll come to the rest of the variables in a moment but first take a look at the initialization loop. When the if-act starts every char from the innerHTML will start to flip from the char at position 0 in chars (#). I need all of them to start rolling and that’s why I push all indexes in the indexes array. Notice that indexes in this variable correspond to those of both the textArray and the cia. The flipping will be handled by a function called roll(). In its body there is a loop trough indexes. For every index I increment the value in cia and thus go another char forward from chars until I reach the char that is at the same index in textArray. In that case I exclude the index so that it’s not flipped anymore. The function looks like this:

The repaint function assembles the string and puts/shows it.

The roll method is called every 70ms by setInterval(). That’s what I need the this.interval variable for.

_this holds the instance scope. And the code of the whole class goes like this:

You can check out the demo here: split-flap display if-act

The second table holds another version of my class which starts to flip the chars one by one.

Tips and Hints: You can control the speed of the if-act by reducing/increasing the time in setInterval() and/or the number of the chars in chars.

For questions, suggestions or requests use the comment section below.

Useful Links Repository

effecter Uncategorized
The blog page about Useful Links Repository @ http://if-act.net/faddap/

Useful Links Repository was created with the intention to serve as a reference guide for valuable web development resources all over the web. The collected links are divided by categories, as each category is available as RSS Feed. There is for now no possibility for everyone to freely add resources, so please share your proposals and/or comments here.

The knowledge

I would be glad to share the knowledge gained from the creation process, posting it in the server- and client-side scripting categories and I hope the topics (DOM traversing with php and jQuery, ajax function calls with POST and GET types and the ifactnet_RSSDocment class, extending the DOMDocument) are all going to be useful as well. The creation of the admin system, offering instant modifications over the RSS files and their content with the help of AJAX requests, is briefly described here.

Parsing XML/RSS data with AJAX and jQuery

effecter Client-side scripting

As you already probably know, AJAX is a javascript technology providing us with an easy way of reading and/or parsing data from the server without using even a single line of server-side language in most of the cases, or as w3schools says – “AJAX is the art of exchanging data with a server, and update parts of a web page – without reloading the whole page.“. Although it can freely be used without any library, when using jQuery in our project, why not trying its AJAX functions as well?

What is shown in the current post is RSS file data parsing with the jQuery.ajax() method. As a sample XML I am using a RSS file, used in my Useful links repository. As the file is with ever changing (let’s hope expanding) content, I would not show its contents here, but instead – in the demo page.
Let’s start first with the code I am actually using in the page where I am editing the content of the RSS Feeds in the Useful links repository.

About the Ajax primer above

The function above takes url and element as arguments, where url is the path to the file, which we are about to open for parsing and would be passed to url parameter of the jQuery.ajax() method. The element is used for searching a string in the parsed file, but have in mind that the logic behind my search is a bit weak, as it would not work correctly if there are two or more equal “title” strings in the “item” nodes.

A  bit over the RSS files

The obligatory nodes (tags) of a RSS file are title, link, description and at least one item for the actual content, where each item should have the title, link and description tags itself as well. More about the structure of a RSS file and other optional elements could easily be found on google. Now let’s go back to the Ajax calls.

The url parameters

What you need to know when opening files with Ajax is that the path for the URL parameter of each method is relative to the root of your server, no matter where the HTML or Javascript files actually are. Actually, you won’t be able to make an Ajax call to any other (web) server. Let’s observe for example the following structure: http://myDomainName.net/library/mainFeed.xml. To pass a relative path to the xml file as argument, you should use “/library/mainFeed.xml”.

jQuery.ajax() method parameters used in the first example

The other jQuery.ajax() parameters are type – the default one is “GET”, when also “POST”, “PUT” and “DELETE” are available, but the latter two are not supported by all the browser, according to the jquery ajax() documentation page. Setting cache parameter to false would force the browse not to cache the page and the dataType tells us how the returned data would be formatted. Success is a parameter, expecting a callback function to be executed by successful load, while callback “linked” to the error parameter would be executed by any errors loading the data. Both the functions could get data, textStatus and jqXHR as arguments, in the case above – xml argument passed to success represents the data, fetched from the file as xml object (because of the dataType: “xml”).

Traversing over XML-formatted data

Now, that was pretty much the basics, the actual parsing of the data depends entirely on you, I would only give you a few (let’s hope useful) examples. When formatted as xml, the returned data could be traversed with jQuery.find() method, as you can see from the example above. Using it with the current “items title” argument would give us a set of title tags, children of the item tags. Iterating over find(“title”) would give us pretty much the same, only with the channel tag’s title. As you can see, when formatted as xml, the data returned by the ajax call would be easily manipulated like any other proper DOM Object.

If we need to return the data, fetched by the ajax call, instead of processing it in a callback function, according to my research on the matter, one thing is obligatory, namely:

Now, lets substitute the dots above with the actual code from the demo page:

First have a look at the link variable on line 41 – the relative path used there is actually almost the same as the absolute one, which it corresponds to – “http://if-act.net/faddap/categories/javascript.xml”.

The getXML function

Now let’s go to  getXML – the function which returns the fetched data, using the xmlDoc variable. Have in mind that $(xml) on line 9, is a jQuery object, representing the xml data. As everything else in the Ajax call here is pretty much the same as the code used in the Ajax code in the first primer, let’s go a bit down the code. Already having the XML Object, hold by the xmlDoc variable on line 42, we can traverse it using standard jQuery functions for traversing DOM elements.

The recursive write function

The recursive function write, shown above is just a basic primer for iterating over RSS document with unknown structure and does not cover namespaces, additional tag attributes and so on.

More on the matter

All the jQuery’s Ajax methods and functions
More on the XMLHttpRequest Call
w3schools Ajax tutorial