NB: These pages were mostly written in 2001 or so. The résumé dates are accurate but the code is aged and unlike whiskey, 8 year-old code doesn't usually taste better. For a look at my current skills and to see my CPAN modules, sample code, and code discussions, please see these pages instead: Perl resources and sample code and PangyreSoft.
Stupid JavaScript Tricks
Social links
View Ashley Pond V's profile on LinkedIn
Miscellaneous

Other pages

Description

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 havent 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

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

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

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

Search these pages via Google
Text, original code, fonts, and graphics ©1990-2009 Ashley Pond V.