http://good-news.in/js/textfader.js

1/* ********************************************************************
2* Buffered Text-fade Effect - v3.0.1
3* - Copyright 2008 - Licenced for free distribution under the BSDL
4*   - http://www.opensource.org/licenses/bsd-license.php
5*
6*   This program is licenced under the BSDL and may be distributed far
7* and wide, anywhere on the planet and beyond (maybe!)  If you happen
8* to get a kick out of this script, please drop me a note at:
9* [email protected] and tell me where you gave it a good home and
10* plenty of bytes to eat, hmmm? :)  I'd be eternally grateful.
11*
12* Description:
13*   A javascript object which allows you to direct text fades within an
14* HTML page.  Fades received before the previous fade has completed are
15* queued rather than displayed immediately.  This keeps all fade
16* animations smooth.
17*
18* Changelog:
19*  3.0.1 - Changed timeout values to 10ms to keep Opera from queuing
20*
21*  3.0  - Buffer for each fadeObject is stored separately for stability
22*         and speed.
23*       - Major structure changes.  Different arguments
24*
25* Support:
26*   Opera   - Yes
27*   IE 6    - Yes
28*   IE 5.5  - Yes
29*   IE 5.01 - Fails
30*   Firefox - Yes
31*   Safari  - Yes
32*
33***********************************************************************
34* I) Setting Up
35*
36*   Copy the javascript from this page into an external .js file or
37* into the <script> tag of your own HTML page.  You only need the code
38* between the "Begin" and "End" lines.  This shouldn't be that
39* difficult, but you wouldn't believe the kind of mail I get about
40* this!  Just do it, okay?  Jeepers.
41*
42*   a) The Fade Object
43*   After that's done we need to create a fade object.  We do this by
44* creating a fadeObj using a number of arguments.  We'll call our new
45* fadeObj object "fader".
46*
47* var fader = new fadeObj('fade0', 'dddddd', '000000', 20, 20);
48*
49*   The first argument ('fade0') is the id of the HTML tag which will
50* be displaying the fading effect.  Usually you'll want to apply some
51* height and width styles to this element, since it starts out with no
52* text by default and will probably be collapsed.  You don't want it
53* jumping around when the script writes new text to it.
54*
55*   The next two values are hexidecimal colour values, WITHOUT the
56* preceding #.  The first value is the starting colour, or the colour
57* the text is before it fades in.  The second value is the ending
58* colour, or the colour the text will be when it finishes fading in.
59*
60*   The last two values are two integers which indicate the number of
61* "steps" the script must take to complete a fade-in and a fade-out
62* respectively.  With a value of 20 like in the example above, there
63* will be 20 colour changes before the text is fully faded-in or faded-
64* out.  The lower these numbers, the faster the fade will be.
65*
66*   b) The Fade Messages
67*   After setting up our fade object, all we need to do now is write
68* out all of the messages which will be displayed in this element.
69* Remember that this script only affects text of a single colour.
70* Images and multi-coloured text won't work.
71*
72*   Messages are included in the msg[] array.  Simply assign each
73* message a number, like so:
74*
75* fader.msg[1] = "Fade text, message one.";
76*
77*   Each fade object can have as many messages as you want, and be in
78* any numerical order.  You can even skip numbers, but note that if you
79* use the fade() method pointed at a message number which doesn't
80* exist, you will get an error.
81*
82* The msg[] array should start at element [1].  If you would like a
83* default message to appear if there are no more fade-in events in the
84* queue, assign the default message to element [0].
85*
86***********************************************************************
87* II) The Events
88*
89*   Fades can be triggered by any DOM event, but most likely you'll be
90* using mouseover and mouseout events.
91*
92*   To trigger a fade, you use the fade() method to add a fade action
93* to the queue.  The reason we use a queue, is so that you can add this
94* fade, even if another fade is already happening.  The fade() method
95* takes two important arguments:
96*
97* Example: onmouseover="fader.fade(1, true);"
98*
99*   In this example we are still referencing fadeObj object "fader".
100*
101*   The first argument is the message this command refers to.  This one
102* has been associated with msg[1] of "fader".
103*
104*   The second argument indicates the direction of the fade.
105*     -> true = fade in, false = fade out.
106*

107***********************************************************************
108* III) Tips
109*
110*   - All the text in each msg[] variable MUST be on one line in the
111* code.  That means this:
112*
113*   fader.msg[1] = "Fader zero,
114* message one";
115*
116* ... is not allowed!  The text should wrap automatically when it's
117* displayed on your HTML page, but you can force line breaks with a
118* <br> tag.  (If you have some Javascript experience you'll know how to
119* get around this).
120*
121*   - If you're placing the fading text on a background image, make
122* the starting colour an average sample of the background instead of
123* just black or white.  This will enhance the "disappearing" effect.
124*
125*   - The script can only fade text, but can accept non-graphical HTML
126* tags in which CSS text color is inherited, such as <p>, <table> (no
127* borders), <strong> and <em>.  Use these tags to add structure and a
128* simple text layout to your fades.
129*
130*   - To have links fade along with with the surrounding text, apply
131* the CSS style: color:inherit !important; to all links within the fade
132* text messages.
133*
134***********************************************************************
135* That's it!  Isn't that amazing!?! :)
136*
137* If you have any problems with this script, don't hesitate to email me
138* at [email protected] and I'll be happy to answer your matter-of-
139* life-and-death questions!  Cheers!
140******************************************************************** */
141
142
143/* ***** Begin ***************************************************** */
144function fadeObject(id, c1, c2, s1, s2) {
145  var self = this;
146  this.id      = id;
147  this.elem    = false;
148  this.colour  = {
149    stt: [parseInt(c1.substr(0, 2), 16), parseInt(c1.substr(2, 2), 16), parseInt(c1.substr(4, 2), 16)],
150    end: [parseInt(c2.substr(0, 2), 16), parseInt(c2.substr(2, 2), 16), parseInt(c2.substr(4, 2), 16)],
151    now: [parseInt(c1.substr(0, 2), 16), parseInt(c1.substr(2, 2), 16), parseInt(c1.substr(4, 2), 16)]
152  };
153  this.steps   = [s1, s2];
154  this.dir     = false;
155  this.active  = false;
156  this.queue   = [];
157  this.msg     = [];
158  this.href    = [];		// addons
159  this.message = 0;
160  function d2h(num) {
161    num = Math.round(num);
162    return ((num < 16) ? "0" : "") + num.toString(16);
163  }
164  this.fade = function(message, direction) {
165    this.elem = this.elem || document.getElementById(this.id);
166    this.queue.push([message, direction]);
167    for (var x = 0; x < this.queue.length; x++) {
168      for (var y = x + 1; y < this.queue.length; y++) {
169        if (this.queue[x][0] == this.queue[y][0] && this.queue[x][1] != this.queue[y][1]) {
170          this.queue.splice(x, 1);
171          this.queue.splice(y - 1, 1);
172        }
173      }
174    }
175    if (!this.active) setTimeout(function() { self.fadeLoop(); }, 10);
176  };
177  this.fadeLoop = function() {
178    if (!this.active && this.queue.length) {
179      if (this.dir && this.message != this.queue[0][0]) this.queue.unshift([this.message, false]);
180      var msg = this.queue.shift();
181      if (this.msg[msg[0]]) {
182        this.active = true;
183        this.elem.innerHTML = this.msg[this.message = msg[0]];
184        $('fade2').href = this.href[this.message = msg[0]];;
185        this.dir = msg[1];
186      }
187    }
188    if (this.dir) {
189      var c1 = this.colour.stt, c2 = this.colour.end, s = this.steps[0];
190    } else var c1 = this.colour.end, c2 = this.colour.stt, s = this.steps[1];
191    for (var x = 0, cnow = "", inc = 0; x < 3; x++) {
192      this.colour.now[x] += inc = (c2[x] - c1[x]) / s;
193      cnow += this.colour.now[x] = (inc < 0) ? Math.max(this.colour.now[x], c2[x]) : Math.min(this.colour.now[x], c2[x]);
194    } this.elem.style.color = "#" + d2h(this.colour.now[0]) + d2h(this.colour.now[1]) + d2h(this.colour.now[2]);
195    if (cnow == c2.join("")) {
196      this.active = false;
197      if (!this.queue.length) {
198        if (!this.dir) {
199          if (this.msg[0]) {
200            this.queue.push([0, true]);
201            setTimeout(function() { self.fadeLoop(); }, 10);
202          } else this.elem.innerHTML = "&nbsp;";
203        }
204      } else setTimeout(function() { self.fadeLoop(); }, 10);
205    } else setTimeout(function() { self.fadeLoop(); }, 10);
206  };
207  if (window.addEventListener) {
208    window.addEventListener('load', function() { self.fade(0, true); }, false); 
209  } else if (window.attachEvent)
210    window.attachEvent('onload', function() { self.fade(0, true); });
211}
212/* ***** End ******************************************************* */