RainbowText v2.0

**ChrisRickard** · 02-19-2008, 05:12 AM

1) CODE TITLE: RainbowText v2.0

2) AUTHOR NAME/NOTES: Chris Rickard.

3) DESCRIPTION: Highlights the individual colors of the given text at random

4) URL TO CODE: http://www12.brinkster.com/chrisrick...pment/Rainbow/

Note that this is an upgrade from the very old DD script
http://www.dynamicdrive.com/dynamicindex10/rainbow.htm

Note that also I'm the original author and the address listed on the old page (chris.rickard@paccoast.com) is no longer valid. (Not for years!

)

**jscheuer1** · 02-19-2008, 06:43 AM

There is no cr tag.

**ChrisRickard** · 02-19-2008, 08:32 AM

I register the cr namespace in Rainbow.js lines 186-203

**jscheuer1** · 02-19-2008, 08:50 AM

Mmm, well the page doesn't validate, and that is just one of the errors. I don't think you can register a namespace for a quirksmode HTML page.

**ChrisRickard** · 02-19-2008, 09:21 AM

I'm curious, does it not work for you?

I've tested it with Internet Explorer 5.5-7, Firefox 2, Opera 9, Safari 3, and Konqueror 4 in combination with full quirks mode, HTML 4 Transitional, HTML 4 Strict, XHTML Transitional, and XHTML Strict doctypes.

While the example page given doesn't validate because the script does the namespace import there is nothing stopping the end developer from merely putting in a xmlns:cr="http://www12.brinkster.com/chrisrickard" in the html element to make it validate. I wrote it to work with or without the namespace declared in markup because the typical user of this script probably has no clue as to what namespaces and validation are, they just want the script to work with a minumum amount of effort.

**jscheuer1** · 02-19-2008, 09:47 AM

You would be surprised how many folks are obsessing with validation these days, I'm tempted to say about a third of the questions we field here are on how to get this or that script or the person's own HTML or CSS code to validate, but I'm really not sure, it is quite a few.

Isn't there a simpler way of doing this that doesn't involve namespaces? Couldn't you just have a class? Relying on code that requires xml in a world where XHTML isn't supported by the majority of installed browsers just seems unwise to me - in practice it may all work out though, but only due to the error correcting nature of the browsers involved, and/or their failure to follow standards - always a sketchy premise to build one's code upon. I guess that's why you felt compelled to test it under so many conditions and browsers.

Anyways, the script works as far as I can tell, except for the, I suppose inevitable problem with Opera when using the forward and backward buttons to navigate to the page.

**ChrisRickard** · 02-19-2008, 10:12 AM

Yeah there's two other ways I can think of going about it. First it can be done from script and uses the existing rainbow.js code

Code:

//  The script can work with any element, it doesn't really have to be a cr:Rainbow
var rainbowExample = new Rainbow(document.getElementById("SomeElement"));

The second is your suggestion of using classes instead. Unfortunately this would require traversing the entire document which was something I wanted to avoid, mostly because it can take so long on bigger documents. getElementsByTagName() is really efficient in all browsers.

**Twey** · 02-19-2008, 11:45 AM

You could also use sequential IDs, ugly though it may be.

You're relying on buggy behaviour here, since you're serving the document with the wrong MIME type -- it's actually not XHTML at all, just invalid HTML (if you did serve it as XHTML it wouldn't display at all, because it's badly formed).

**ChrisRickard** · 02-19-2008, 07:21 PM

OK, new demo page that validates:
http://www12.brinkster.com/chrisrick...Rainbow/dd.htm

**Twey** · 02-19-2008, 09:26 PM

You've overcomplicated this in two ways: by using innerHTML, which is non-standard, bad style, and makes this sort of operation much trickier than it should be, and by making it very object-oriented, which doesn't offer much in the way of advantages here. I came into programming from the Java area, and it took me a while to realise that objects aren't the answer to everything. Closures are often (but not always) a much neater solution. Here's a less complicated (but probably fully-featured) version, just using DOM methods and closures:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Testcase</title>
    <script type="text/javascript">
      if (typeof Node === "undefined")
        var Node = {
          TEXT_NODE: 3
        };

      // Apply an animated "rainbow" effect to an element, with random colours.
      var rainbow = (function(opts) {
        var t = null, // To store the interval ID.
            c = [],   // To store the letters to be updated.
            interval = opts.interval || 100,
            coverage = opts.coverage || 5;

        // Zero-pad a number.
        function pad(num, places, radix) {
          var s = num.toString(radix || 10);
          return (new Array(places - s.length + 1)).join('0') + s;
        }

        // Give each letter its own <span> and add it to an array of elements to update.
        function getLetters(el) {
          var r = [];

          if (el.nodeType === Node.TEXT_NODE) {
            for (var s = el.nodeValue, i = 0; i < s.length; ++i)
              el.parentNode.appendChild(r[r.length] = document.createElement("span")).appendChild(document.createTextNode(s.charAt(i)));

            el.parentNode.removeChild(el);
          } else {
            // e has to be an array, otherwise it gets modified by getLetters() while we're using it.
            for (var e = Array.prototype.slice.call(el ? el.childNodes : []), i = 0; i < e.length; ++i) 
              r.push.apply(r, getLetters(e[i], true));
            if(arguments[1])
              el.parentNode.appendChild(el);
          }

          return r;
        }

        // Generate a random colour.
        function randomColour() {
          return "#" + pad(Math.floor(Math.random() * 0x1000000), 6, 16);
        }

        // Get a random sample of an array.
        function randomSample(arr, n) {
          for (var r = [], i = n - 1, a = arr.slice(); a.length && i >= 0; --i)
            r.push(a.splice(Math.floor(Math.random() * a.length), 1)[0]);
          return r;
        }

        // Update all the letters.
        function tick() {
          for (var s = randomSample(c, Math.floor(coverage * c.length)), i = s.length - 1; i >= 0; --i)
            s[i].style.color = randomColour();
        }

        // The function to be called on elements.
        function rainbow(el) {
          if (arguments.length > 1) {
            for (var i = arguments.length - 1; i >= 0; --i)
              rainbow(arguments[i]);
            return t;
          }

          c.push.apply(c, getLetters(el));
            if (!t)
              t = setInterval(tick, interval);

          return t;
        }

        return rainbow;
      })({
        interval: 100,
        coverage: 0.2
      });

      onload = function() {
        rainbow(document.getElementById("test"));
      };
    </script>
  </head>
  <body>
    <p id="test">A <em>test</em> item.</p>
  </body>
</html>

Thread: RainbowText v2.0

Thread Tools

Search Thread

RainbowText v2.0

Bookmarks

Bookmarks

Posting Permissions