Coding Text Fades At The Top And Bottom Of A Scroll Window? [Archive]

LycanthroGalen

01-12-2005, 02:37 AM

Hello, I'll try to explain this as clearly as possible...
I am coding a template for an online journal. I would like to set up a table with an independant scroll bar (all of this I know how to do) But I would like to have the text fade at the top and bottom of the window, to make it seem like it's apprearing at the beginning and disappearing at the end. I hope that makes sense.

Unfortunately, I'm not sure how to do that. I figure it could probably be done with either a Java app. or by using flash of some sort, but since it is just a template, and there is already some server side coding (example: %%entry%% will instert the day's journal entry into the web page) I would like to avoid the time/drain of a flash program.

So, my question is, does anyone have any knowledge of a java script that would work for this, or for that matter, anything that would work better?

Thanks a lot,
Galen

Jalenack

01-12-2005, 04:22 AM

you sure can. I almost set up my blog with this script too...this is from http://chrisjdavis.org/ ...its a wordpress plugin but i'm positive you could run just take out the wordpress stuff and get yourself the javascript:

// Description: A plugin that allows you to add a fade in for your pages, see // http://www.taijiquan.pro.br for an example
// Version: .10 RC1
// Author: Chris J. Davis (plugin) Stevarino, et all for JS
// Author URI: http://chrisjdavis.org/

initial = 255;
col = 255;

function initialColor()
{
document.getElementById("page").style.color="rgb(" + initial + ", " + initial + ", " + initial + ")";
}

function sa()
{
document.getElementById("page").style.color="rgb(" + col + "," + col + "," + col + ")";
col-=5;
if (col>30) setTimeout('sa()', 1);
}

just take the <div> that contains the text you want to fade and make it id="page" ... right inside the <div id="page"> insert <script type="text/javascript"> initialColor() </script>. Also, change the body tag to <body onload="sa();">

then you can fool around with the colors...good luck!