Stupid JavaScript Tricks

Javascript is, normally, for client-side scripting. That means that the script is executed by the client’s computer (their browser specifically), instead of by your server as is the case with a perl CGI or mod_perl application. Javascript is very rich scripting language with which you can write complicated programs and mini-applications. Its strength lies in simpler uses and browser manipulation though. It’s a natural match for Perl since their abilities overlap but their general usages are complementary (server side, client side).

Javascript can detect most everything you do in your browser and it can manipulate the content in response. Run your mouse over this paragraph if you haven’t done it accidentally already.

That effect you saw (assuming you have your javascript on and aren’t using Mosaic) is easily done via Javascript by manipulating the CSS visibility attribute of each character by its id tag when it detects a Mouse event. In this case, we’re getting the onMouseOver (the capitals are optional with HTML but you should use all lowercase for strict XHTML/HTML4 compliance).

Eraser code

Could be placed within <head> tags

<script type="text/javascript">
function eraseMe (elemID) {
   document.getElementById(elemID).style.visibility='hidden';
}
</script>

Next is the closely related erase + collapse. It is a slightly more interesting effect and shows how you could build up, for example, a rolling text displayer, reversing the settings in a new function called with setInterval.

You'll have to reload the page to return that text if it's been erased.

Here's the function to erase + collapse. This one needs to be called like so, <span onmouseover="collapseMe(this)">, with the object itself, "this," instead of by "id" (elementID).

Eraser + collapse code

Could be placed within <head> tags

<script type="text/javascript">
function collapseMe (myself) {
   myself.style.visibility='hidden';
   myself.style.display='none';
}
</script>

And here is another paragraph with a related trick. Run your mouse over this text to see the next bit of Javascript demonstrated.

<span id="me2" onmouseover="switchColor('me2');">Color me!</span>
Back in black

We use the rgb(n,n,n) format with this, where n is 0-255, since it's much easier than converting hexadecimal color codes from decimal. We only go up to 250 with our random numbers though since straight 255s would be white and therefore invisible on this page. Here is switchColor().

Code Random Color Switcher

Could be placed within <head> tags

<script type="text/javascript">
function switchColor (elemID) {
  var rgbColor = '';
  for ( i = 1; i < 4; i++ ) {
     rgbColor +=  Math.floor(Math.random() * (250+1));
     if ( i != 3 ) rgbColor += ',';
  }
  document.getElementById(elemID).style.color="rgb("+rgbColor+")";
}
</script>

The coolest example, the fade

We'll apply the effect to the entire paragraph. And make the text bold and add in a few extra words to make it look better.

Mouse me to bring it back (or fade it).

Code Fade Me

Using items as objects, we can track several at once
  and each one's execution state

// -->> apv, please retain this credit -----------------------------
function fadeMe ( elemID, InOut, Intrvl, Step ) {
  var word = document.getElementById(elemID);
  if ( ! InOut.match(/^in|out$/) ) {
    InOut = word.isOut ? 'in' : 'out';
  }
  if ( (InOut === 'in') && word.isIn ) return false;
  if ( (InOut === 'in') && !word.hasRun ) return false;
  if ( (InOut === 'out') && word.isOut ) return false;
  if ( word.isRunning ) return false;
  word.inout = InOut;
  word.isRunning = 1;
  Intrvl = Intrvl > 0 ? Intrvl : 50;
  word.Step = Step > 0 ? Step : 10;
  word.rgb = ( word.inout === 'in' ) ? 255 : 0;
  word.style.visibility = 'visible';
  word.lastInterval = setInterval("Fade('" + elemID + "')", Intrvl);
}
function Fade (elemID) {
  word = document.getElementById(elemID);
  if ( word.inout === 'out' ) {
    if ( word.rgb > 255 ) {
       word.style.visibility = 'hidden';
       clearInterval(word.lastInterval);
       word.isRunning = 0;
       word.isOut = 1;
       word.hasRun = 1;
       word.isIn = 0;
       return true;
       }
    word.rgb += word.Step;
  } else {
    if ( word.rgb < 0 ) {
      word.style.color = "rgb(0,0,0)";
      clearInterval(word.lastInterval);
      word.isRunning = 0;
      word.isOut = 0;
      word.isIn = 1;
      return true;
      }
      word.rgb -= word.Step;
  }
  var newColor = "rgb("+word.rgb+','+word.rgb+','+word.rgb+")";
  word.style.color = newColor;
}
//------------------------------------------------------------------

Perl Books · CPAN · mod_perl · Perl Monks · Perl Mongers · Perl Journal · Use Perl · Perl Jobs · ActiveState · perldoc.perl.org · O’Reilly Perl · W3Schools tutorials · Ovid's CGI Course · Catalyst · Perl at Wikipedia