cwdjrxyz wrote:
I guess some of us have a sense of humor and some do not. Each to his
own. There are quite a few javascript bashers around that wish to avoid
script on sites when at all possible. I often have heard mention of
effects produced by script that especially bother them, including dhtml
ones.
What bothers me more are scripts that pollute the global namespace with
myriad variables.
I just thought it might be fun to see how bad some of these can be, but as I mentioned, flash effects often can be even more
bothersome.
Just because a script effects an annoying behaviour doesn't mean it has
to be coded poorly. Perhaps these "bashers" might see some well-coded
javascript and change their mind.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Drunk Harlequin Text</title>
<style type="text/css">
body{background-color:#000;color:#eee}
p{color:#ddd;background-color:#000001}
</style>
<script type="text/javascript">
if (document.getElementsByTagName && !document.getElementsByClass) {
document.getElementsByClass = function(needle){
var my_array = document.getElementsByTagName("*");
var retvalue = new Array();
for (var i = 0, j = 0; i < my_array.length; i++) {
var c = " " + my_array[i].className + " ";
if (c.indexOf(" " + needle + " ") != -1) {
retvalue[j++] = my_array[i];
}
}
return retvalue;
}
}
var drunkHarlequinText = {
jerk_interval : 500
, max_move_distance : 36
, colors : ['0ff','7cfc00','6495ed','ffd700','ff7f50',
'f0f','cf0','ff6964','ff4500','dc143c']
, effects : [['fontWeight','bold'],
['fontStyle','italic'],
['textDecoration','overline'],
['textDecoration','underline'],
['textTransform','uppercase']]
, sizes : ['0.64','1','1.4']
, size_units : 'em'
, els : []
, splat : function(el){
var num_colors = this.colors.length;
var num_effects = this.effects.length;
var num_sizes = this.sizes.length;
var max_tries = 2, tries, fs = 5, ltr, f, g, node;
if (el.childNodes.length == 1 && el.childNodes[0].nodeType == 3) {
var text = el.childNodes[0].nodeValue;
el.removeChild(el.firstChild);
}
for (var i = 0; text.length > i; i++) {
ltr = text.substring(i, i + 1);
if (ltr == ' ') {
el.appendChild(document.createTextNode(' '));
} else {
tries = 0;
do {
f = Math.floor(Math.random() * num_colors);
tries += 1;
} while (Math.abs(f - fs) <= 1 && tries < max_tries);
fs = f;
g = Math.floor(Math.random() * num_effects);
node = el.appendChild(document.createElement('span'));
node.style.color = '#' + this.colors[f];
node.style.fontSize =
this.sizes[Math.floor(Math.random() * num_sizes)] +
this.size_units;
node.style[this.effects[g][0]] = this.effects[g][1];
node.appendChild(document.createTextNode(ltr));
}
}
}
, jerk : function(){
for (var i=0; i<this.els.length; i++){
this.els[i].style.top = Math.floor(Math.random() *
(this.max_move_distance + 1)) + 'px';
this.els[i].style.left = Math.floor(Math.random() *
(this.max_move_distance + 1)) + 'px';
}
setTimeout("drunkHarlequinText.jerk()", this.jerk_interval);
}
, init : function(){
this.els = document.getElementsByClass('obnoxify');
for (var i=0; i<this.els.length; i++){
this.els[i].style.position = 'relative';
this.els[i].style.top = '0px';
this.els[i].style.left = '0px';
this.splat(this.els[i]);
}
this.jerk();
}
};
window.onload = function(){
if (document.getElementsByClass &&
document.createElement &&
document.createTextNode &&
document.childNodes &&
document.childNodes[0] &&
document.childNodes[0].removeChild &&
document.childNodes[0].appendChild) {
drunkHarlequinText.init()
}
}
</script>
</head>
<body>
<p class="obnoxify">This is a drunk harlequin text effect which you may
upload to your own private or commercial site and use as you wish. I am
not responsible for any beatings, curses, or threats you may receive if
you use this effect on a commercial web site. Any element given the
class "obnoxify" that contains only 1 text node will be given random
color, font effect, and font size. A function selects displacements in
both the vertical and horizontal direction at random up to an upper
limit. Then basic positioning dhtml code is used to move the element in
any increment in time desired.</p>
<p class="obnoxify">This is the most annoying javascript text effect
that I have at the moment. If the time increment between jerks is made
small enough, the text becomes nearly impossible to read. It might be
ideal for making a web page for a mother-in-law.
document.getElementById is required.</p>
</body>
</html>