Dynamic Text Fader
Version 2.20
Copyright (C) Nicholas Poh

History

20/12/2000
 Released Dynamic Fader 2.20

Fixed:

  • Setting font property to fader now works correctly in Netscape 4. Previously, setting font property to any fader will cause all other fader to have the same property.
  • Modified the insertPlaceHolder() method to accept Border and BorderColor.
  • Fader alignment is 100% workable in Netscape. No more misalignment when inserted into table. Check out the demo.
  • Modified some part of the script. 
20/12/2000
 Released Dynamic Fader 2.13a
Script is STILL messy.

Fixed:

  • setFontSize() method works correctly for Netscape 6. The problem exist because Netscape 6 requires unit for the size. As for this, if no unit is given, 'pt' is used as the default unit.
  • Adding DIV tag inside fader text no longer causes Netscape 6 to display fader incorrectly.
Future plan:
  • Rewrite the script to be more readable and more compatible with other browser beside IE and Netscape.
  • Preload images and display them in the fader. Currently, IE 5 and Netscape 6 display images correctly, except images are loaded again and again when texts are changed. Does not work in Netscape 4 as images are reloaded everytime the texts are scrolled. Suggestions are required on how to implement this.
  • Please send me more suggestion. Thanks. 
19/12/2000
 Released Dynamic Fader 2.13
Script is messy because I'm releasing this in a hurry.

Added:

  • Support for Netscape 6.
Known problem:
  • setFontSize() method does not work with Netscape 6.
  • Adding DIV tag inside fader will cause Netscape 6 to scroll the fader incorrectly for that text only. The offsetHeight property always return 0 causing the text to stop at incorrect location. Scrolling is also very jerky. You can see this problem in the demo (fader no. 4) during the alignment demonstation. 
10/10/2000
 Released Dynamic Fader 2.12b

Added:

  • setGlow() method. This method makes the text glow. Check out the demo. I implement this method to the 4th fader. (Internet Explorer only) 
29/09/2000
 Released Dynamic Fader 2.12a

Fixed:

  • Bug fix for insertPlaceHolder() function (Netscape).
    Version 2.12 align the placeholder to the browser's width. This version fixes this. 
26/09/2000
 Released Dynamic Fader 2.12

Fixed:

  • Cannot find placeholder when placed inside DIV or SPAN tag in Netscape.
  • Fix problem where the script unable to detect the correct width of the browser causing the alignment of the PlaceHolder placed wrongly. (Netscape)
Added:
  • setFontSize() method.
Known problem but unable to solve:
  • setFont() and setFontSize() methods change all the DynFaders' font in the page (Netscape). There is a workaround but might slow down the fader, so I won't implement it yet. If you have any idea, please send it to me.

Links and Download

How do I add Dynamic Text Fader into my web page?

Step 1:

Copy dynfader.js to the folder where your page is and include the code below in the HEAD section of your HTML file,

Explaination: By inserting the code above, you included the script I have written into your page. The code above direct the browser to read the script from dynfader.js

Step 2:

Then in the BODY section, add the following code at the place where you want the Fader to appear,

where,

PlaceHolderName = The name of the placeholder
Width = The width of the placeholder in pixel
Height = The height of the placeholder in pixel
Alignment = Valid value ('left', 'right' or 'center')
BackgroundColor = Any RGB value (ex, '#FF00FF'). Omit for transparent background
Border = Numeric value
BorderColor = Any RGB value (ex, '#FF00FF', 'red'). Default is black

Example,

Explaination: A placeholder is where the Dynamic Text Fader will appear. You can insert more than one placeholder in a page. Inserting a placeholder won't do anything until you link it with a fader.

Make sure that the SCRIPT tag does not contain the LANGUAGE attribute or the scrolling will slow down on Netscape.

Step 3:

Now, the most important part is coming. Add the following code in the HEAD section. Make sure it come after the code in Step 1.

Explaination: This will initialize the Dynamic Text Fader. Any modification to the fader must be done in the runMe() function. You will find more Dynamic Text Fader method in this page which you can apply here.

Notice the attachPlaceHolder method, this method binds the fader with a placeholder.

Step 4:

Finally, we need to run the runMe() script. To do that, find the BODY section and make it look something like this,

I want to know more of Dynamic Text Fader's methods

Click here for more information of Dynamic Text Fader's methods.