 | |
Late night scripting! |
JavaScript Workbench
by Jim Allen
Here's a collection of practical and fun javascripts for your webpages.
Select the SEE THE CODE button to view the
JavaScript source code for each example.
But also see my copyright notice below.
I hope you can learn from these scripts or find them useful or enjoyable.
I often refer to this collection of scripts while on my job,
to remind myself exactly how to do certain simple tasks!
Like most people, I'm still learning this stuff, so
write
to me with your ideas and improvements,
or if you are inspired by something here. Enjoy!
Basics:
1.
Browser Sniffer Loading this page reveals some browser and screen properties
to which javascript has access.
2.
Location Sniffer Loading the page reveals the location object properties
to which javascript has access.
3.
Event Sniffer Loading this page and mousing over the link reveals
the event properties to which javascript has access.
4.
Date Sniffer Loading this page reveals your browser's
Date object properties to which javascript has access.
5.
Bookmark Maker Here is how to make a link into an automatic bookmark maker.
This works only in IE4+, so I pop up a hint for all Netscape users.
6.
Mouseover Helper Here is an easy code from C|Net for making mouseovers,
rollovers, image swaps, whatever you want to call them!
7.
No Right Click This short script prevents right mouse clicking and was
written by Martin Webb.
8.
The Right Click Fooler This is my newest trick in the fight against
image-theft. While nothing can completely protect your copyrighted images
from a persistent and clever image thief, this preventive measure thwarts
the right-click technique, and thus discourages a large percentage of would-be
image thieves.
9.
Date Checker This script checks to see whether the dates you select
actually exist.
10.
No Illegal Characters This script checks form data.
It alerts you to try again if you submit any illegal characters.
11.
The Epoch Chronometer and The Trillionth Millisecond Countdown
These scripts track the impending arrival of the javascript Trillionth Millisecond.
Watch here as your web browser's representation of time
crosses one trillion milliseconds since the dawn of the epoch!
12.
Last Modified Date Displayer
This very short and simple script will display any
document's Last Modified date.
13.
Frame Buster
Add this short script to your webpage, and if someone has framed your page,
you will break free!
14.
The Cursor Locator
This simple utility displays the x,y coordinates of your cursor. This script
is a common component in many javascript projects.
15.
Drop Down and Go
The Select List can be used for navigation. Here's how!
16. More to come...
Intermediate:
1. Cookie Maker:
Here are usable crossbrowser scripts to set, read, and delete cookies.
The first three functions are from the CNet Superscripter column, which in turn are based on those by Bill Dortch of hIdaho Design
at http://www.hidaho.com/ and Nick Heinle of WebCoder.com and released into the public domain.
2.
Expanding Menutree Here is a crossbrowser expanding menutree, done with CSS and javascript.
3.
The Mouseover Collection Here is a whole collection of mouseovers
that I made at various times for various purposes.
4.
Mouseprints! Mouseovers taken to the next level. See my first
Mouseover Table, plus SAM's Mousetable and the Mousetable Maze.
5.
Tooltips Displayer This javascript and CSS work together to display tooltips when
links are moused over.
6.
Automatic Link Trail Maker This script automatically converts any page's url into
a working link trail.
7.
Watermark Script 1 This script puts a watermark in the lower right-hand corner of the page,
which stays in place as you scroll.
8.
Watermark Script 2 This script puts a watermark in the center background of the page,
which stays in place as you scroll.
9.
MultiSearch This script takes form input, composes a complex search string and submits it
to a commercial search engine (Alta Vista).
10.
The Random Greeting Generator This script prints one of 30 different
welcome messages to your website visitors. By use of the cookie, greetings
can be personalized.
11.
The Form Summarizer provides real-time feedback
during the filling out of a form. When you fill out a form,
a side column shows your selections as you type, and automatically totals
your bill for you, before you commit with the form's submit button.
12.
The Flickering Candle and its Accounting This script displays two
things: First, javascript can be used to control animations. The Flickering Candle
is ten images randomly shown at random times. Second, javascript can track and
tally events, and perform statistical analyses of random events.
13.
The Stopwatch is a standard, four-function stopwatch simulated
in javascript. This is my second draft, and more improvements are coming.
14.
Four Cursor Tricks My script in the basic section above, The Cursor Locator, has inspired
me to create four more cursor tricks:
Crosshairs 1,
Crosshairs 2,
GunScope and
Periscope. Be sure to play with all
of these new toys!
15.
Well Slap My Hand This is another "Prevent Right Click" script, designed to
minimally protect one's images from right-click image stealers. The apparently simple
task of cross-browser DHTML animation turns out to be a huge pain! And all that code
for such a cheesy effect... Oh well, I'm learning.
16.
Automatic Feedback Generator If you are tired of composing feedback
for your online auctions, this tool may come in handy. Random praise and random
complaints are generated for your use and entertainment. Enjoy!
17.
Convert text to ASCII This utility converts text into its ASCII values.
I use a chart of ASCII values, rather than using escape(),
because there may be cases where ASCII values differ from the user's installed unicode.
You can make it skip tags, too!
18.
Online Reaction Time Test Here is a fun machine to play with, an online
reaction time test. Test your time-to-click-after-stimulus. NEW!
19. More to come...
Advanced:
Note: The javascript code for these examples is not yet available,
although you can always View Source. I am waiting
until I get everything converted for Netscape 6 and the DOM! Coming soon!
1. Amanda Alive!
Self-actuating image swaps! At random intervals from 2 to 15 seconds,
Amanda's hair moves, her eyes glance, her nose wiggles, she smiles, blushes,
and twinkles. About 30 seconds to load at 56K, so be patient!
2. Mouseover Amanda Same image as
above, but now Amanda's smiling, blinking, blushing and twinkling are activated
by your mouse. Also, click her nose and lead her around; click again to let go.
3. Move My Head
Push me away with your mouse, pull me around, bash me up and down.
I'll drift back as soon as your mouse sits still. You can't get rid of me!
4.
MenuScroller One A cross-browser scrolling menu. This was my
first try at this task.
5.
MenuScroller Two A cross-browser scrolling menu, like above, but now
with mouseovers, too!
6.
The WNM Groupie Alive! The is my original self-actuating image swap,
long supressed, and now back by popular demand. My Mona Lisa!
7.
Javascript Simulated Modal Dialog Windows This is an article I have written,
with examples, about popup windows that stay on top until closed.
This is my contribution to a commonly discussed problem for javascript coders.
8.
The Trillionth Millisecond This article explains the impending arrival
of the javascript Trillionth Millisecond. On September 8, 2001, your web browser's
representation of time will cross one trillion milliseconds
since the dawn of the epoch! Should you celebrate, or hunker down?
9.
The HTML Source Code Disguiser This javascript utility converts your HTML code
into something
humans find harder to read, but browsers handle fine. Visitors who try to
use their browser's View Source command to examine or seize your web site source code
will see only a disguised version of your code.
10.
Allen's Cursor Orbiter This is my contribution to the
"Cursor Trailer" genre of javascripts. My version of this popular
script features some details that others omit, including trails,
accurate wall bounce, and pseudo-gravitational orbital patterns. Four
versions of this script are presented.
11.
Swarm 1 & 2 These javascripts simulate the behavior of a
swarm of gnats! It's just a toy, made for fun. Enjoy!
12.
Formchex This generic form validation script is an exercise
carried out so that I have the results available as a reference. This script
includes the use of advanced javascript
string operators like charAt(), indexOf(), split(), replace(), match() and
javascript regular expressions. Such fun!
13.
QuartoNav I was working on an intermediate level javascript called
Crosshairs when it dawned on me that
I wasn't just making another cool cursor trick, I had created
the basis of a whole new form of website navigation!
14.
Sidebar Mini-movie: Baby Drop Here's a short dhtml mini-movie for your enjoyment.
I'm still cleaning up the javascript code, but you can view source if you want to see it.
15.
Bush Slide Puzzle Here's a javascript/dhtml version of the
children's toy sliding squares puzzle. Have fun!
16.
Paramecium Animation This is the single and Multiple Paramecium Animations,
where animated gifs ride layers moved randomly around by javascript (dhtml). As usual,
Netscape 6 is having trouble with animated gifs. More tweeks coming.
17.
BackSlide This is a group of scripts, all built around the same idea -
to move large layers around the screen, carrying images with transparent sections,
so the layers can be seen moving behind one another.
NEW!
18. More to come...
You are welcome to learn from my code. Note that my work
is copyrighted. If you want to use my code in a for-profit setting, please write to me.
If you borrow or use my original source code, please keep and reproduce the Comments Section
which lists my name, my contact information and my copyright notice. Thanks!
Jim Allen Contact me here. |
|
