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); } }