Page 1 of 1

[JS] Scrolling Text Highlight

Posted: Thu Feb 11, 2010 10:01 pm
by daedalus__
heyyy.. yeah i got it working sort of good enough to show now. you include the dealy in your page and use the methods to set up elements you want to scroll over. theres a lot id like to do it with but probably won't if it doesn't get used as i probably won't re-use it. might make a jquery plug-in as someone suggested that.

it works from an object literal. i figured if i did it that way it would prevent less savvy users from using it 1000 times on one page. lol.

uhh.. documentation is incomplete as well but good enough for me to remember how things work so.. whatever. question or comment or w/e. lets pick it apart and get it moved :)
class <- o. 0 wrote:

Code: Select all

 
    Highlighter.CreateGradient('dadaff', '8398ef', 6);
    Highlighter.repeat = true;
 
    window.onload = function()
    {//  v---- meh
        try {  // can't add stuff that doesn't exist
            Highlighter.AddElement(document.getElementsByTagName('h3')[0]);
            Highlighter.AddElement(document.getElementById('note').childNodes[1]);
            Highlighter.PrepareElements();
            Highlighter.On(); }
        catch (e) { 
            document.write(e.message); // production no no. use ajax to log? lol w/e
        }
    }
 
use wrote:

Code: Select all

 
/**
 * @fileOverview Scrolling Text Highlighter
 * @name highlighter.js
 * @author David "daedalus" Winslow <a href="im@redaedal.us">im@redaedal.us</a>
 * @version 1.0.0
 * 
 */
var Highlighter = {
    colors  : new Array(),
    elements    : new Array(),
    chars       : new Array(),
    interval    : null,
    
    currentCharacter    : 0,
    previousCharacter   : 0,
    currentColor    : 0,
    
    /**
     * Creates a gradient from a start and end color
     * @param   {string}    start   The starting color of the gradient
     * @param   {string}    end The ending color of the gradient
     * @param   {int}       steps The number of steps between the start and end color
     * @returns {array} An array with the colors in hex notation
     */
    CreateGradient : function (start, end, steps)
    {
        for (i = 0; i <= steps; i++)
        {
            this.colors[i] = '#';
            
            for (s = 0; s < 3; s++)
            {
                srgb = parseInt(start.substr(s * 2, 2), 16);
                ergb = parseInt(end.substr(s * 2, 2), 16);
                step = ((ergb - srgb) / steps);
                this.colors[i] += (Math.round(srgb + (step * i))).toString(16);
            }
        }
        // clean-freak
        delete s;
        delete srgb;
        delete ergb;
        delete step;
    },
    
    /*
     * Adds an element to the list of elements we are going to highlight
     * @param   {object}    element The element being added to our list
     * @returns {boolean}   
     */
    AddElement : function (element)
    {
        if (element.nodeType != 1) {
            throw Exception;
        } else {
            this.elements[this.elements.length] = element; 
            return true;
        }
    },
    
    /*
     * This function modifys the elements in our list making them suitable for use by the Highlighter
     */
    PrepareElements : function ()
    {
        // check if there are elements!
        if (!(this.elements.length > 0)) // yeah, i know. just trying to expect the unexpected.
            throw { message : "Highlighter.elements array length is not greater than 0." };
        
        // for each element in list
        for (i = 0; i < this.elements.length; i++)
        {
            // if element number is greater than 0
            // record length of array to use as index
            (i > 0) ? l = this.chars.length : l = 0;
            
            // for each child node of the selected element
            for (c = 0; c < this.elements[i].childNodes.length; c++)
            {
                // if current child node is a text node
                if (this.elements[i].childNodes[c].nodeType == 3)
                {
                    // chop the texts up and put them in a char array
                    this.elements[i].chars = this.elements[i].childNodes[c].nodeValue.split('');
                    
                    // wrap them in span taggys for stylings
                    for (n = 0; n < this.elements[i].chars.length; n++)
                    {
                        if (this.elements[i].chars[n].match(/\s/) == null)
                        this.elements[i].chars[n] = '<span>' + this.elements[i].chars[n] + '</span>';
                    }
                }
            }
            // replace
            this.elements[i].innerHTML = this.elements[i].chars.join('');
            // make references to span elements
            for (c = 0; c < this.elements[i].childNodes.length; c++)
            {
                if (this.elements[i].childNodes[c].nodeType == 1)
                this.chars[(i > 0) ? l + c : c] = this.elements[i].childNodes[c];
            }
        }
        // toss out the loop variables
        delete n;
        delete c;
        delete i;
        delete l;
    },
    
    /*
     * Starts the Highlighter
     * @param   {boolean}   True to repeat the highlight at the specified interval
     */
    On : function (repeat)
    {
        self = this; // thanks kaszu!
        this.currentCharacter = 0;
        
        // i wanted a timeout before mine started. 
        // i'm going to include a switch for this in a later version
        setTimeout(function () {
            self.interval = setInterval(function () { 
                self.Increment();
                if (self.currentCharacter > (self.chars.length + (self.colors.length * 2)))
                    self.currentCharacter = 0;
            }, 100); 
        }, 2500);
    },
    
    /*
     * The Increment function is where the magic happens. It changes 
     * the colors of the letters in our elements to create the illusion 
     * of a scrolling effect.
     */
    Increment : function ()
    {
        // while c is less or equal to the amount of chars multiplied by 2
        for (   this.previousCharacter = 0, this.currentColor = ((this.colors.length -1) * -1); 
            this.previousCharacter <= this.chars.length * 2; 
            this.previousCharacter++, this.currentColor++)
        {
            // if the current color is in range, dont set anything. it does run out but it works as is so i think ill leave it
            if (this.currentColor < this.colors.length)
                // if the current index is defined. this is supposed to iterate through every character and assign new values
                if (typeof(this.chars[this.currentCharacter - this.previousCharacter]) != 'undefined')
                    this.chars[this.currentCharacter - this.previousCharacter].style.color = this.colors[this.currentColor];
        }
        
        // if we're finished then turn off the highlighter
        if (this.currentCharacter >= (this.chars.length + (this.colors.length * 2)))
        {
            this.Off();
            if (this.repeat)
                this.On();
        }
        
        this.currentCharacter++;
    },
    
    /*
     * Turns off the Highlighter
     */
    Off : function ()
    {
        clearInterval(this.interval);
    }
}
 

Re: [JS] Scrolling Text Highlight

Posted: Fri Feb 12, 2010 9:56 pm
by daedalus__
no mean to bump but if its THAT good (j/k) can we move it :D