SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Toronto, ON
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question help with text rotate / fade

    hello--

    I am using a script to rotate and fade testimonials on a web page. The script is simply referenced in the head, like <js src="...etc. and then an onLoad call in the body: fade(). Where I want the rotating and fading text, I simple drop in <div id="fader"></div>.

    I thought I had the script working, but after refreshing a bunch of times I noticed that I occassionally get a JS error:

    texts[...] is null or not an object

    The complete script is pasted below. I think the problem is in the function fade() or the definition of the var text, but I don't know enough to fix. Any ideas?

    TIA!
    JF


    Code:
    // fade-out text effect with rotation 
    
    var texts = new Array(
    "<font color='{col}' >\"Humans don't throw morality out the window<br>when things get tough.\"<br><small>-- Captain Jonathan Archer, Star Trek: Enterprise</small></font>",
    "<font color='{col}' >\"All decision making<br>is value reinforcement.\"<br><small>-- Anthony Robbins</small></font>"
    );
    
    var bgcolor = "#ACCBEA";
    var fcolor = "#1C1E5F";
    var steps = 20; // smoothness
    var show = 10000; // timing
    var sleep = 130;
    var loop = true;
    
    var colors = new Array(steps);
    getFadeColors(bgcolor,fcolor,colors);
    var color = 0;
    var text = (Math.round((Math.random()*texts.length)+1))
    var step = 1;
    
    function fade() {
    
    	var text_out = texts[text].replace("{col}", colors[color]);
    	
    	if (document.all) fader.innerHTML = text_out;
    	if (document.layers) { document.fader.document.write(text_out); 
    		document.fader.document.close(); }
    	if(!document.all && document.getElementById){
    		document.getElementById("fader").innerHTML = text_out;
    			}
    
    
    color += step;
    
    if (color >= colors.length-1) {
    step = -1;
    
    if (!loop && text >= texts.length-1) return;
    }
    
    if (color == 0) {
    step = 1;
    
    text += 1;
    if (text == texts.length) text = 0;
    }
    
    setTimeout("fade()", (color == colors.length-2 && step == -1) ? show : ((color == 1 && step == 1) ? sleep : 50)); 
    }
    
    function getFadeColors(ColorA, ColorB, Colors) {
    len = Colors.length;
    
    if (ColorA.charAt(0)=='#') ColorA = ColorA.substring(1);
    if (ColorB.charAt(0)=='#') ColorB = ColorB.substring(1);
    
    var r = HexToInt(ColorA.substring(0,2));
    var g = HexToInt(ColorA.substring(2,4));
    var b = HexToInt(ColorA.substring(4,6));
    var r2 = HexToInt(ColorB.substring(0,2));
    var g2 = HexToInt(ColorB.substring(2,4));
    var b2 = HexToInt(ColorB.substring(4,6));
    
    var rStep = Math.round((r2 - r) / len);
    var gStep = Math.round((g2 - g) / len);
    var bStep = Math.round((b2 - b) / len);
    
    for (i = 0; i < len-1; i++) {
    Colors[i] = "#" + IntToHex(r) + IntToHex(g) + IntToHex(b);
    r += rStep;
    g += gStep;
    b += bStep;
    }
    Colors[len-1] = ColorB;
    }
    
    function IntToHex(n) {
    var result = n.toString(16);
    if (result.length==1) result = "0"+result;
    return result;
    }
    
    function HexToInt(hex) {
    return parseInt(hex, 16);
    }

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change
    var text = (Math.round((Math.random()*texts.length+1)))
    to
    var text = Math.round(Math.random()*(texts.length-1))

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Toronto, ON
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Beautiful! Thank you very much Jim! In looking at the code, I think I can see why that makes sense. Every day, I pick up a little more thanks to the help offered in these forums...
    JF


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
  •