November 4th, 2008
Airport – Information board text effect jQuery plugin
Airport is a rather simple text effect plugin for Jquery. It emulates the style of those flickering information boards you sometime find on airports and train stations.
Airport is a very, very, very simple text effect plugin for Jquery. It emulates the style of those flickering information boards you sometimes find on airports and train stations. Just watch the demo and you will understand
How to use Airport
Airtport is very easy to use. Create an element, give it an ID and throw airport on it. The values, moscow, berlin and stockholm, are the words it will flick through.
<div id="stuff"></div>
<script type="text/javascript">
$('#stuff').airport(['moscow','berlin','stockholm']);
</script>
| Version | Changes |
|---|---|
| 1.1 | Defaults to hyphen, if character not found in character array. |
Comments
Make a comment
Projects
- Accordion (jQuery)
- Airport (jQuery)
- Defaultvalue (jQuery)
- Elastic (jQuery)
- Highlight (jQuery)
- Keycan
- Lazy (jQuery)
- Limit (jQuery)
- Password Strength (jQuery)
- Show Password (jQuery)
- Tabify (jQuery)
- Valid8 (jQuery)
Latest posts
- July 8th, 2009 Why are we typing passwords twice?
- July 5th, 2009 Don’t stop password masking; let the user decide
- June 1st, 2009 You can’t validate email addresses with regular expressions
- May 20th, 2009 Konami Code: Why so verbose, when you can make it in 140 characters?
- May 18th, 2009 Let your users know if Firebug slows down your web page.
Cool plugin!
I really like this, but i’ve found a minor issue;
If a character isn’t found in the predfined array, the script stops, and therefore doesn’t ‘skip’ to the next character and carry on the transition.
Maybe some sort of option to enable/disable this behaviour would be good.
Yeah, it should probably be some kind of fail safe there. I’ve updated the plugin to version 1.1 making it pick the last character, which is a hyphen in version 1.1, if it can’t find one.
Very good! But real airport boards have fixed letter spacings, I mean in your demonstration you can see the words shake. Because “l” takes less space than “e” etc. How to fix the widths of each letter? Is there a CSS trick for that?Thanks.
One can argue that “real airports” won’t have these kind of board at all, anymore. But yes; there is a css trick, or several actually. You can set the font-family to monospace (#stuff span { font-family: monospace}) or you can set the width of the spans (#stuff span { width: 20px; float: left; display: block; text-align: center; } ).
Im really impressed by this plugin but being a new user to web design Im having major issues implementing this in to my iweb site. Could anyone help with coding this to html code so i can add it to my site? Is this possible? Many thanks.
I think a good start for you would be to take a look at the source code of the demo over at http://sandbox.unwrongest.com/jquery.airport/. Download all the files and copy the source right off.
Hi,
This is so nice plugin. I translated it to Turkish and i published on my site. Thank you.
wow, that’s a wonderful effect
Impressive plugin i must say. Downloaded. thanks mate.
[...] – Airport – Information Board Text Effect | [...]
[...] 官网：http://www.unwrongest.com/projects/airport/ [...]
[...] – Airport – Information Board Text Effect | [...]
[...] – Airport – Information Board Text Effect | [...]
[...] Airport – Information Board Text Effect | Demo Airport is a very simple writing effect plug-in unit, imitates the airport or the train station notice board demonstrated that the stand writing effect, the beat demonstrated [...]
Is there any particular reason you didn’t include numbers in the plugin by default? It was a really easy fix just include numbers before the ‘-’ in the array.
Hello Jan, i’m posting from Barcelona-Spain.
I want to put your plugin in my wordpress blog but i try all of things and possibilities but i can’t to do it working ok.
Can you help my with a FAQ or link about how to do this. I like very much this effect.
(some minutes later…)
At the end in the end I have been able to implement the code. Its easy, only i put this code in a post:
I like
//
………………..
But i’ve a serious problem… it doesn’t show accents, ñ (with spanish tilde, symbol ?, and other special characthers… in the words with which I replace your cities..
i try to change to utf-8 the htaccess file, and other possibilities but it’s impossible to me.
Somebody has any Idea????????
Thanks for your beauty plugin….
Could I also use dynamic content instead of the fixed Words passed to the function? Let’s say I have an XML file with some nodes like Artist and Title but this content changes regularly…If I want the text to change with this effect I need to pass the XML data to the airport function, would that be possible?
thx 4 your answer and keep up the good work!
[...] Airport – Information board text effect jQuery plugin | Unwrongest: [...]
[...] Airport – Information Board Text Effect | Demo [...]
[...] Um efeito muito bom para sites no ramo de aeronáutica. Vale a pena dar uma conferida! Link: http://www.unwrongest.com/projects/airport/ Demo: http://sandbox.unwrongest.com/jquery.airport/ Share/Save [...]
Buen sitio
[...] Links: Tutorial | Demo tweetmeme_url = ‘http://ajaxdump.com/?p=95′;tweetmeme_source = ‘ajaxdump’;tweetmeme_style = [...]
[...] Sorgente: http://www.unwrongest.com/projects/airport/ [...]
[...] Codice Sorgente: http://www.unwrongest.com/projects/airport/ [...]
süper bir eklenti olmuş. elleriniz dert görmesin… daha iyilerini bekliyoruz..
cool stuff,
thanks
When I actually serve my pages as application/xhtml+xml, this plugin fails to work (at least in Chrome). Works perfectly when served as text/html in both Chrome and IE, though.
cool jQuery plugin.
Salut a tous! Je suis Lyonnaise .
J’aure une question a vous poser.
Qu’est-ce que mieux
viagra,cialis,kamagra,levitra,propecia???
Parce que j’aimerais acheter pour mon mari,mais je sais pas quoi choisir…
Et encore,est que
quelque-un peut me conseiller une bon site pour acheter les medicaments???
Merci beaucoup a tous pour vos reponse, et
a bientot ! ! !
P.S.
Desole si je poste sur les mauvaise forum (topic) !
Great effect, this plug-in is cool.. nice work
Hi Jan , thanks for the awesome plugin. But I’ve one doubt. Can we flicker all those letters at once and stop repeating the flickering effect.
Great job! But I also wonder if there’s a way to stop the effect after some word is found or some number of repetitions.
Luis, if you want it to stop on a word, then you know where this word is in the array you have added it to. To illustrate the point, say i have three words in the array. I want the effect to stop after its worked through all three words. Here’s what i’d do:
set up a function level var and set it to zero (e.g var repeat = 0;).
Then, you know its the testChar(a, b, c, d) function that does all the work… So we’d want to test the value of, and set this repeat vars value within there. The first thing to note, is that it appears the c argument passed into this funtion testChar corresponds to the word in the array. So, that means we can test what word we are dealing with.
So if we want this to stop after three words, we want to add the following code to the else if (d >= longest) test within testChar:
else if (d >= longest) {
repeat = repeat + 1;
setTimeout(function() { testChar(0, 0, c + 1, 0); }, 1000);
}
This means, every time the word code (c argument) is updated, so is the repeat var… hence we know when we’ve hit our 3rd word.
Finally, to stop the code executing when the repeat var matches the third word, we’d want to add the following check as soon as we enter the testChar function:
function testChar(a, b, c, d) {
if (repeat != array.length) {
if (c >= array.length)
…..
remembering to close of the curly brace at the end of the function. Then this should stop the code when you meet the 3rd word.
thx collect it to
ajax.wespai.com
> Is there a way to speed it up?
Yes, you can change the value in the setTimeout function (line 39 in the source), default is 20, you can put 5 for a much faster effect.
How can I stop the effect ? I’m using it on rollover on a link and would like it to stop on rollout
Is there a way to speed it up?
Cool work :) thanks
Veramente un bel plugin, complimenti!!
wow… that is amazing.. very fresh idea.. thank you for share
Thanks, very cool plug-in!
Says image is missing and I can’t see anything other than a plane
unique plugins dude
Bravo! Superbly unique. Thank You
awesome plugin !
awesome work.. will give it a try right away. Thanks buddy.. Keep up the good work.
Lovely effect. Thank you
Okay, that didn’t work out quite right… You can view the live demo here:
http://www.askmp.ca/airport_board.html
Really cool, thanks. Is it possible to get capital letters? I tried editing the JavaScript.
re capitals – I see in the example can use CSS.
Hi, how can we make it accept special chars (accents, & sign, etc.) ?
I tried modifying the array of letters but this doesn’t seem to change anything.