I noticed that and fixed it myself, but then I got:Yep, I made another daft mistake: should look like this:
el.onmouseover = function() {
var me = this;
rh = setInterval(function() { nextColour(me); }, 100);
};After this modification it works, but I added some more features too.
Why not just debug the whole thing?Generally my code works first-time, and I've developed a habit of not actually testing it :p Nevertheless, I added some features and tested them fully this time:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rainbow Text Demo Page</title>
<script type="text/javascript">
Array.prototype.filter = function(f) {
f = f || function(a) { return a; };
for(var i = 0, n = this.length, r = []; i < n; ++i)
if(f(this[i]))
r.push(this[i]);
return r;
};
var RainbowElements = {
classRegex: /rainbow\(([^\)]+)\)/,
init: function(elms) {
for(var i = arguments.length - 1; i >= 0; --i)
for(var a = arguments[i], j = a.length - 1, m; j >= 0; --j)
if(m = a[i].className.match(RainbowElements.classRegex))
RainbowElements.setup(a[j], m[1].split(/\s*,\s*/));
},
getNamedArg: function(lst, prop, def) {
for(var i = lst.length - 1; i >= 0; --i)
if(lst[i].indexOf(prop + ":") === 0)
return lst.splice(i, 1)[0].substr((prop + ":").length);
return def;
},
setup: function(el, colours) {
var
prop = RainbowElements.getNamedArg(colours, "property", "color"),
delay = RainbowElements.getNamedArg(colours, "delay", 100),
cptr = 0,
rh,
nextColour = function(el) {
el.style[prop] = colours[++cptr] || colours[cptr = 0];
},
resetColour = function(el) {
el.style[prop] = colours[cptr = 0];
};
el.onmouseover = function() {
var me = this;
rh = setInterval(function() { nextColour(me); }, delay);
};
el.onmouseout = function() {
resetColour(this);
clearInterval(rh);
};
resetColour(el);
el = null;
}
};
onload = function() { RainbowElements.init(document.links) };
</script>
</head>
<body>
<p>
<a
href="foo"
class="rainbow(delay:50, red, #ffa500, yellow, #0f0, blue, #4b0082, #ee82ee)">
Bar
</a>
</body>
</html>A class now contains a sequence of colours, but may also contain anywhere an argument:value pair. Two exist: delay and property. E.G., to have the background colour change colour instead of the foreground colour, we could write:
class="rainbow(red, lime, property:backgroundColor, blue)"Or, for a smooth fading effect:
class="rainbow(#00f, #20d, #40c, #60a, #808, #a06, #c04, #e02, #f00, #e02, #c40, #a60, #880, #6a0, #4c0, #2e0, #0f0, #0e2, #0c4, #0a6, #088, #06a, #04c, #02e, delay:50)"