jQuery LED Banner – fun with jQuery! « ajaxray => Anis Ahmad's Tech Blog

jQuery LED Banner – fun with jQuery!

by admin on February 28, 2010

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!

How it works?

It’s pretty simple!

createLights() makes the board (the target div) empty and create lights (span elements) in it as row and column.
I have an array named ‘map’ that stores which lights should on for a character in 3 dimensional format.
Using getMap() , I am creating an array of all columns for boards text.
draw() is drawing (turning on required lights) the text.
scrollText() make it moving. This funciton just take leftmost column and place after rightmost.
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 • Tagged as: banner, fun, Jquery, plugin, scrolling
Share on Twitter, Facebook, Delicious, Digg, Reddit

30 comments

Good work! It looks so simple after implementation. very nice one.
keep it up man.

by M.M.H.Masud on February 28, 2010 at 2:26 am. Reply #

Social comments and analytics for this post…

This post was mentioned on Twitter by ajaxray: http://icio.us/wq5c25…

by uberVU - social comments on February 28, 2010 at 3:06 am. Reply #

[...] Visit link: jQuery LED Banner – fun with jQuery! – Let's explore the web … [...]

by jQuery LED Banner – fun with jQuery! – Let's explore the web … » WB Tips on February 28, 2010 at 4:34 am. Reply #

[...] Go here to read the rest: jQuery LED Banner – fun with jQuery! – Let's explore the web … [...]

by jQuery LED Banner – fun with jQuery! – Let's explore the web … » KHMER855.COM on February 28, 2010 at 7:50 am. Reply #

It’s really nice

by raju mazumder on February 28, 2010 at 12:15 pm. Reply #

really its beautiful

by sagar kanti sen on February 28, 2010 at 4:16 pm. Reply #

Thumbs up!! Great idea.

by Yunus Ali Khan on February 28, 2010 at 5:51 pm. Reply #

And here I was, thinking we’d moved beyond the days scrolling marque… o.O It is nifty though.

by Wes P on March 1, 2010 at 9:49 pm. Reply #

That’s a beautiful thing. Good work.

by Jon on March 1, 2010 at 9:50 pm. Reply #

@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.

by Anis Ahmad on March 1, 2010 at 11:00 pm. Reply #

Very impressive!!!

by Ravindran on March 1, 2010 at 11:03 pm. Reply #

Nice! Thanks for sharing.

by SM on March 2, 2010 at 6:30 pm. Reply #

Great tool. Thanks for this!

by Can Aydo?an on March 2, 2010 at 9:47 pm. Reply #

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.

by James Curran on March 4, 2010 at 10:25 am. Reply #

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.

by Anis Ahmad on March 4, 2010 at 1:43 pm. Reply #

Hey Everyone,
After reading this and the source, I decide to program it from scratch. I call it jLED.
It’s the same concept but with a different approach.
http://bateru.com/projects/jled/jled.html
I’m going to convert it to a plugin in the next two days.

by Larry Battle on March 6, 2010 at 2:12 am. Reply #

Woow. This is very great. Again showed the power of jQuery itself.

by Betsson Burada on March 20, 2010 at 1:56 am. Reply #

[...] the original post: jQuery LED Banner – fun with jQuery! By: Admin Date: April 22, 2010 7:18 pm Categories: Object, ee, jqueryPost tags:banner, [...]

by jQuery LED Banner – fun with jQuery! | Tutz - Best Tutorials on April 22, 2010 at 7:59 pm. Reply #

[...] the original here: jQuery LED Banner – fun with jQuery! By: Admin Date: April 22, 2010 9:38 pm Categories: Object, ee, jqueryPost tags:banner, [...]

by jQuery LED Banner – fun with jQuery! | Tutz - Best Tutorials on April 22, 2010 at 10:24 pm. Reply #

Led lights are great because they are long lasting and consumes less electricity. cool idea!

by Martha Thomson on May 11, 2010 at 10:59 pm. Reply #

[...] Lien : http://www.ajaxray.com/blog/2010/02/28/jquery-led-scrolling-banner-fun-plugin/ [...]

by Démonstrations : Créer une bannière de type LED avec jQuery « FrameLinks on July 22, 2010 at 1:19 am. Reply #

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.

by Guest on August 5, 2010 at 1:50 am. Reply #