SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Feb 2002
    Location
    Midwest
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help w/ fading text using javascript....

    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

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you just looking for a script that will do this, or do you want to learn for yourself?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Member
    Join Date
    Feb 2002
    Location
    Midwest
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    i'm wanting to....

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

    Thanks,
    stoopidstp

  4. #4
    SitePoint Zealot Selatos's Avatar
    Join Date
    Aug 2002
    Location
    USA
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

    Code:
    /*****************************************\
    ||       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-                                       ||
    ---------------------------------------------------*/
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  6. #6
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's heaps of IE-specific code in there - it's not going to work in anything else.

  7. #7
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  8. #8
    SitePoint Zealot Selatos's Avatar
    Join Date
    Aug 2002
    Location
    USA
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    <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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •