jQuery LED Banner – fun with jQuery!

While coming home, I’ve seen a super store showing their items on a big LED type banner. Where item names were scrolling using some lights on/off. It’s an everyday scenery, nothing special.

But I’ve come to realize soon, in back of my head, I am thinking how it can be made for web. And, LED banner has landed on earth within few hours using the wings of jQuery. Here is the fun!

jQuery LED Banner

How it works?

It’s pretty simple!

  1. createLights() makes the board (the target div) empty and create lights (span elements) in it as row and column.
  2. I have an array named ‘map’ that stores which lights should on for a character in 3 dimensional format.
  3. Using getMap() , I am creating an array of all columns for boards text.
  4. draw() is drawing (turning on required lights) the text.
  5. scrollText() make it moving. This funciton just take leftmost column and place after rightmost.
  6. LED Banner is scrolling. Done.

Let’s talk a bit more about map array. For eaxmple, take this line –

map[")"] = [[0,7],[1,6],[2,3,4,5]];

Here, this element of map store information for printing ‘)’.
it has 3 elements which means 3 columns will be used to print this.
[0,7] is first column for this character where 0th and 7th light (from top) should keep on.

Later, if I can manage some more time, hope to make it as a jQuery plugin.
However, if you are interested to make it as a plugin, go ahead!

30 Comments

  1. @Wes P
    No man, it’s not marquee. 🙂
    Check the sourcecode to see how it works.
    You can make it to write “Wes P” or anything, just need to map your characters.

    @everybody
    Thanks. Thanks a lot for your interest.

  2. Ok, I’m sure this is going to get mangled by the reply editor, but here are the rest of the letters, the digits, and the important symbols:
    Symbols are added in original source of demo.

  3. Yes, I am lazy 😛
    So, I’ve mapped only few characters (with the hope in mind that, someone will map rest of the characters).

    James Curran, at last, have done this.
    Thanks a loooooot to him. 🙂

    Along with Alphabets and Digits, he has mapped common special characters too. Also he has overwritten my characters more beautifully.
    I’ve added his map in the source of demo.

    Thanks again to James Curran.

  4. Method Array.indexOf which is not supported in IE6, IE7.
    For IE the given method becomes by means of file search in a cycle.
    Help to alter for IE6, IE7.
    Thanks.

Leave a Comment

Your email address will not be published.