DHTML Shock
Articles/Tutorials
Discussion Forum
Latest Additions
FAQs
Link to us
Submit-a-Script
Web Design Toolbox
Wish List

Contact Us

Script Library

Link to us!!!
Link to US!!!



Electrify your web site with our free copy and paste DHTML scripts, free DHTML Menus, free Dynamic HTML tutorials and javascript.


Home : Scrollers : Fading Text Scroller

This snazzy little text scroller fades from top to bottom, and allows you to add any HTML mark up. You can include links and images, bold, italic, etc, etc. The possibilities are endless. And the most amazing thing? It even works in Netscape :-)

Credits:
Created by: Nicholas Poh
Website: www.egroups.com/group/hWinMain
Browser Information: NN, IE4+
Additional Notes: None.

Demonstration:
Click here for multiple variations of this script.

Coding:
Copy and paste this code into the <HEAD> of your document:


Copy and paste this into your <BODY> tag


Copy and paste this where you want your scroller to appear:



These are the variables used:

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

Download the external .js file. Make sure you save the .js file in the same directory as the file containing your scroller.

Instructions:
To customize your script, edit the following lines:

function runMe()
{
// create fader
var myFader = new DynFader();

// add text, just add additional lines for more text.
myFader.addText('This is my first fader');
myFader.addText('Gosh! This is great!');

// initialize fader
myFader.attachPlaceHolder("myPlaceHolder"); //The same as your placeholder
myFader.setFont('Verdana', 'bold', 'center'); //Set the scroller font
myFader.setTextColor('#0000FF'); //Set the text color
myFader.beginFade();
}

You can additional faders on one page, by just creating a new fader. Let's assume we already have the fader above on our page. Let's add a new one:

function runMe()
{
// create fader
var myFader2 = new DynFader();

// add text
myFader2.addText('This is my second fader');
myFader2.addText('Gosh! This is great!');

// initialize fader
myFader2.attachPlaceHolder("myPlaceHolder2");
myFader2.setFont('Verdana', 'bold', 'center');
myFader2.setTextColor('#0000FF');
myFader2.beginFade();
}

That's all there is to it. Check out the demonstration to see all the uses for the fader.

Site designed, coded, and maintained by Web Shorts Site Design.
Copyright © 2000 - 2007 DHTML Shock.
Please read the Terms Of Use before using any of the scripts.
DHTML Shock Privacy Policy | Support DHTMLShock
PO Box 80575, Portland, Oregon 97280

Free Webmaster Resources Web Templates Stock Photos Free Javascripts
Cartweaver ColdFusion Shopping Cart


<reallybig.com>
Web Builder Network Portal
Advertise
on the
Reallybig.com
Network