help w/ fading text using javascript....

[stoopidstp]

What I'm trying to do is something similar to menu bar at the top of the page. Where it has Bio, Pictures, etc. I've searched the internet trying to figure it out and haven't had any luck.

thanks,
stoopidstp

[beetle]

Are you just looking for a script that will do this, or do you want to learn for yourself?

[stoopidstp]

learn how to do this myself. So any tips would be great.

Thanks,
stoopidstp

[Selatos]

I know a script that fades background color, and it could be easily converted into something that would work for text, but the only downside is that the user cant do anything while the background/text* is fading, so it would add a superficial load time onto the page.

All you would need to do is use DHTML style modifiers, you can change anything's style if you give it an id.

*in this case

[Bill Posters]

Here is a text fade script that I found some time ago and used to good effect on a previous version of my personal site.

I've no idea how well supported it will be by today's browsers.
When I used it it was IE only, but I haven't tested it on anything other then IE5 (Yes) and NN4.7 (No, but didn't break page)

If it doesn't work in the way you want it too, I'm sure it wouldn't take too much tweaking to make it do so.

Luckily it is well annotated, so it all seems pretty clear

Anyway, you might find it useful as a starting point...

/*****************************************\
||       Fade Script Version 1.01        ||
||  http://www.xs.mw/anarchos/fade.js    ||
||              (c) 1999                 ||
|| ___________________________________   ||
||                                       ||
|| Fade, hex, setbgColor functions by:   ||
|| Dak Phoenix > phoenix-archetypes.com  ||
|| ___________________________________   ||
||                                       ||
|| Modifications for mouseover by:       ||
|| Anarchos    > i.am/Anarchos           ||
|| ___________________________________   ||
|| 	  					                              ||
|| Some sections based on scripts by     ||
|| The Shadow  > www.icon.co.za/~andrewk ||
|| ___________________________________   ||
||						                                 ||
|| Questions/Comments/etc. ->		          ||
||						                                 ||
|| Please send any questions or comments ||
|| on the script to:			                  ||	
|| anarchos3@hotmail.com                 ||
||					                                  ||
\*****************************************/

document.onmouseover = domouseover;
document.onmouseout = domouseout;

function domouseover() {
  if(document.all){
  srcElement = window.event.srcElement;
  if (srcElement.className.indexOf("fade") > -1) {
        var linkName = srcElement.name;
      fadein(linkName);
      }
      }
}

function domouseout() {
  if (document.all){
  srcElement = window.event.srcElement;
  if (srcElement.className.indexOf("fade") > -1) {
        var linkName = srcElement.name;
      fadeout(linkName);
      }
      }
}

function makearray(n) {
    this.length = n;
    for(var i = 1; i <= n; i++)
        this[i] = 0;
    return this;
}

hexa = new makearray(16);
for(var i = 0; i < 10; i++)
    hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

function hex(i) {
    if (i < 0)
        return "00";
    else if (i > 255)
        return "ff";
    else
       return "" + hexa[Math.floor(i/16)] + hexa[i%16];}

function setbgColor(r, g, b, element) {
      var hr = hex(r); var hg = hex(g); var hb = hex(b);
      element.style.color = "#"+hr+hg+hb;
}

function fade(sr, sg, sb, er, eg, eb, step, direction, element){
    for(var i = 0; i <= step; i++) {
setTimeout("setbgColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * 
(" +i+ "/" +step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * 
(" +i+ "/" +step+ ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ 
"/" +step+ ")),"+element+");",i*step);
    }
}



/*-----------------=[fadeout]=----------------------
||Fades the text from one color to another color   ||
||when the mouse moves off of the link.            ||
---------------------------------------------------*/

function fadeout(element) {

/*--------------------------------------------------
||Example:                                         ||
||                                                 ||
||fade(255,150,0, 255,255,255, 180, 1, element);   ||
||                                                 ||
||Explanation:                                     ||
||                                                 ||
||RGB (red, green, blue) values of first color     ||
||(color to start at), then RGB values of second   ||
||color (color to fade to). For my site, I have    ||
||the first color (255,150,0), which is orange,    ||
||and the second color (255,255,255), which is     ||
||white.  Therefore it fades from orange to white  ||
||when the mouse moves off.                        ||
||                                                 ||
||The 30 parameter is the delay time: decrease     ||
||to make it go quicker and increase it to go      ||
||faster.                                          ||
||                                                 ||
||The last two parameters shouldn't be messed with.||
---------------------------------------------------*/
          
    fade(255,253,253, 153,153,153, 15, 1, element);
}

/*------------------=[fadein]=----------------------
||Fades the text from one color to another color   ||
||when the mouse moves over the link.              ||
||-------------------------------------------------*/

function fadein(element) {

/*--------------------------------------------------
||Example:                                         ||
||                                                 ||
||fade(255,255,255, 255,150,0, 180, 1, element);   ||
||                                                 ||
||Explanation:                                     ||
||                                                 ||
||RGB (red, green, blue) values of first color     ||
||(color to start at), then RGB values of second   ||
||color (color to fade to). For my site, I have    ||
||the first color (255,255,255), which is white,   ||
||and the second color (255,150,0), which is or-   ||
||ange.  Therefore it fades from white to orange   ||
||when the mouse moves over the link.              ||
||                                                 ||
||The 23 parameter is the delay time: decrease to  ||
||make it go quicker and increase it to go faster. ||
||In this case, the fading will be slightly quick- ||
||er when the mouse moves over the link than when  ||
||the mouse moves off (which is set to 30, in my   ||
||case).                                           ||
||                                                 ||
||The last two parameters shouldn't be messed with.||
---------------------------------------------------*/

    fade(153,153,153, 255,253,253, 15, 1, element);
}

/*---------------=[final note]=---------------------
||Now, once you have customized your fading colors,||  
||you need to include your customized .js file on  ||  
||every page that you want to use it in. You can   ||
||include javascript files using this syntax (in   ||
||the head of a document):                         ||      
||<script src="fade.js" language="Javascript">     ||
||</script>                                        ||
||                                                 ||
||Now that you have the file included, you need to ||   
||setup your links a small bit.  Each link that you||  
||want to fade needs to have it's own _unique_ Name||  
||and must use the fade class.                     ||  
||                                                 ||                                                   
||Example:                                         ||
||                                                 || 
||<a href="blah.html" name="fading_link_1" class=  ||
||"fade">click here</a>                            ||
||                                                 ||
||Also, the link must be plain text.  This means   ||
||that you can't have <b>'s, <i>'s, <font>'s, etc. ||
||inside of the link.                              ||
||                                                 ||
||Example of what not to do:                       ||
||                                                 ||
||<a href="blah.html" name="fading_link_1" class=  ||
||"fade"><b>click</b> here</a>                     ||
||                                                 ||
||Have fun!                                        ||
||-Anarchos-                                       ||
---------------------------------------------------*/

[blufive]

There's heaps of IE-specific code in there - it's not going to work in anything else.

[Bill Posters]

Originally posted by blufive
There's heaps of IE-specific code in there - it's not going to work in anything else.

I pretty much had already guessed (and hinted) as such. It wasn't offered as a final, catch-all solution.
It's limitations (as it stood) were mentioned.
(That being said, coloured scrollbars are still a popular inclusion in many sites despite their IE-centricity).

I offered it more as a starting point (hence the comment about using it as a 'starting point').

It could still prove useful as a structural guide for someone who stated that they want to learn how to do it themselves, rather than to be simply handed a script.

It may or may not simply be a matter of swapping out the IE-specific segments for W3C DOM counterparts.

Surely, finding out is part of the 'fun, fun, fun' of learning

[Selatos]

I should have posted the script here, shouldn't I? I'm NOT going to convert it to change anything but background, that's up to whoever uses it and a little DHTML magic.

I might be able to change it. Should in fact, but I want to grant you a learning experience. Now, pretend that you are Asok the Intern for Dilbert, and I am Wally.

<script language="JavaScript" type="text/javascript">
<!-- Fade-in script by Bernhard Friedrich

/*************************************************************
 * based on the script found in HomeSite 2.5
 * fade script ver0.1 by Kouichirou@Eto.com 1996/02/20
 * Copyright (c) 1996 Kouichirou Eto. All Rights Reserved.
 * You can freely copy, use, modify this script,
 * if the credit is given in the source.
 */
 
document.bgcolor="White"

var hexchars="0123456789ABCDEF";
function fromHex (str) {
var high=str.charAt(0); //Note: Netscape 2.0 bug workaround


var low=str.charAt(1);
return(16*hexchars.indexOf(high))+hexchars.indexOf(low);
}

function Color(str){
	this.r=fromHex(str.substring(0,2));
	this.g=fromHex(str.substring(2,4));
	this.b=fromHex(str.substring(4,6));
	return this;
	}
col_value="Black";
color_start=col_value.substring(1,8);
col_value="White";
color_end=col_value.substring(1,8);

function makearray(n) {
    this.length = n;
    for(var i = 1; i <= n; i++)
        this[i] = 0;
    return this;
}

hexa = new makearray(16);
for(var i = 0; i < 10; i++)
    hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

function hex(i) {
    if (i < 0)
        return "00";
    else if (i > 255)
        return "ff";
    else
        return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}

function setbgColor(r, g, b) {
    var hr = hex(r); var hg = hex(g); var hb = hex(b);
    document.bgColor = "#"+hr+hg+hb;
}

function fade(sr, sg, sb, er, eg, eb, step) {
    for(var i = 0; i <= step; i++) {
        setbgColor(
        Math.floor(sr * ((step-i)/step) + er * (i/step)),
        Math.floor(sg * ((step-i)/step) + eg * (i/step)),
        Math.floor(sb * ((step-i)/step) + eb * (i/step)));
    }
}

function fadein() {
	fade(Color(color_start).r,Color(color_start).g,Color(color_start).b,Color(color_end).r,Color(color_end).g,Color(color_end).b,20);
}

/* do fadein */
fadein();

/***** end fade script *****/
/************************************************************/


// -->
</script>