Scrolling Message LED Display

This script is a scrolling message that displays exactly like an LED display. You can change colors, effects and background, all depending on what you prefer. And to answer your question, Yes! it will work on a white background.
[ Scrolling LED Message On White Background ]

We have tested the code in IE7.0, IE5.5, IE6.0, Netscape4.08, Netscape7.0, Netscape8.1, Firefox1.5.0.3, Opera8.54 and AOL Explorer1.2. This script worked well in all platforms with no variations noted.

Depending on your knowledge of HTML and java script, this is an easy two (2) part copy and paste code with minimal reconfigurations. The first part gets pasted directly into the <BODY> tag and the second part gets pasted into the <BODY> section of your document wherever you want it to appear. If you need a little refresher on howto insert an onLoad event handler into the body tag, see the below example.

T he next set of reconfigurations are for the messages and effects.

//____________________CONFIGURATION
AREA_______________________________________________

//THIS LED SCRIPT TAKES UP 200 pixels HORIZONTAL and 28 pixels VERTICAL
-Have Fun :-)

//YOUR MESSAGE GOES ON NEXT 4 LINES DOWN, *ALLOWABLE CHARACTERS ARE:
A-Z, Period, space, comma, numerals, question mark and 'message codes'

//THE 4 MESSAGE CODES: (@) - PAUSE FOR 3 SECONDS, (#) - FLASH FOR 3 SECONDS,
(^) - SCROLL UP EFFECT, (_) - SUN EFFECT, ( $ ) - SPLIT EFFECT

//EXAMPLE: var message="_ Java^^ ScriptSource! # For the best dhtml scripts... http://javascript.internet.com ";

var message="This Is A Scroll With# LED Effects^ That You Can Change Colors And Effects$ To Your Choice It Will Also Work With A White$ Background _";

A s you can see in the above section of code, how we have placed our message and effects with the different characters.

N ow for the foreground (letters) and background color for the scrolling LED effect. The below link will give you a color chart that has both words and Hex codes for colors.
[ Color Picker ]

var LEDonColor='Red'; //color of the LEDs when they are on

var LEDoffColor='#7D0605'; //color of the LEDs when they are off

B oth the above can be changed to whatever fits your page. On the default like the above, you will see little Dots in the background against the Red letters. You can play around with the colors until it suits your needs and appearance.

T his last part is the positioning of the scroll itself. This we really cannot tell you how to set it because of where you want it positioned on your page. These configurations you need to change until it is where you need it. This is basically for all intensive purposes "Absolute Positioning". So................... Just play around with it until it fits your site.

startXPos=(screen.width/2)-100; //start of horizontal position eg.
startXPos=20; places the leds 20 pixels from left

startYPos=20; //start of vertical position

//____________________END CONFIGURATION
AREA_______________________________________________

B elow is how we have the positioning set on this page

startXPos=(screen.width/2)-100; //start of horizontal position eg.
startXPos=20; places the leds 20 pixels from left

startYPos=150; //start of vertical position

Little Extra Not Included In The Script: The last this we shall cover is to make the <BODY> section of the script into an external.js file and called from an external location. Reason you may want to do this is quite simple. This script is quite large and bloated (17.2 KB -17,628 bytes). To avoid taking up so much space on your page, you can very easily call it from an external location and not weigh down your page. Also if you have this effect on more than one page, instead of reconfiguring the scroll on every page, just update the external.js file and it will reflect the changes on all the pages you have this effect. If you need a little refresher on howto, see below.

The <BODY> section of code starts and ends with opening and closing JavaScript tags, See below:

Opens With:
<script language="JavaScript">

<BODY> Section of code goes here
Closes With:
</script>

Remove the opening and closing JavaScript tags.

Copy/cut and paste everything in-between into a notepad and save it as scrollingLed.js*

The newly created (Saved As) file will look something like this

Upload the newly created scrollingLed.js into your directory

Paste the below snipplet of code into the <BODY> section of your document to call scrollingLed.js
<script type="text/javascript" src="scrollingLed.js"> </script>

If you have uploaded the scrollingLed.js into a different directory, you will have to change the path of the above to reflect the location.

If changing the path is a little confusing, grab the below link and it is explained in detail.
[ Upload To Different Directory ]

* We named our external.js file scrollingLed.js. This is just so we know what it is to at any given moment. You can name it anything you want. This is entirely up to you on this.

If you would like to see an example of this effect with the use of an external.js file in the <BODY> section, grab the below link and you are there.
[ LED Scroller With External.JS File ]

Note Of Importance Remember that earlier we discussed the positioning of the scroll and for all intensive purposes it is "Absolute Positioning" where the position is a constant on the page no matter where you place the script. It "WILL NOT" vary. So..... it is very important that you have the positioning correct before you turn the script into an external file. If the positioning is not correct, the scroll may possibly cover material you need to be seen etc. Just as a little refresher on absolute positioning, you can grab the below link and this is explained in detail. Do not make use of the code on the tutorial page, just the information as a guide on how it works.
[ Absolute Positioning - Refresher ]

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link* and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here [ Rate This Page ]

For your Information: * Since the original script site no longer archives this effect, we now are archiving this script for your convenience.