JavaScript: Simple Little Things To Add To Your Pages
New Netscape 3.0 Image Updating.
Charles C. Goodin.
Not Updated -- Archive Only
Frames:

Internet Link Exchange
Member of the Internet Link Exchange
Are you a JavaScript expert?
Welcome JavaScript Junkies!
Just when I started to get the hang of HTML and frames, out comes JavaScript! I'm not a programmer (I can't even program my VCR), but I do have several web sites, two of which are pretty big and use frames for navigation. So obviously, I needed to learn a little JavaScript because of the BACK button problem. BTW, this page is part of and sponsored by my wife's company, Tanega Travel International, Inc. Here are some of my pages, the first of which uses the same frame set-up as this page:

So I started to look everywhere for JavaScript info, especially at the excellent, but now closed, JavaScript Index. Guess what? This page was JSI's Link of the Moment for April 10, 1996!

I also read Netscape's JavaScript Authoring Guide, Voodoo's Introduction to JavaScript, Gordon McComb's Experiments in JavaScript, Live Software's JavaScript Resource Center, Yahoo's JavaScript Listing, and checked out the livesoftware.javascript. developer and livesoftware.javascript.examples newsgroups. But much of what I found (while excellent) was over my caveman head. So I decided to collect the simplest things for use in my pages. This page is an outgrowth of that.

JavaScript Is Not Java. Several people have asked me to clarify that point.

Netscape 2.0: If you haven't already done so, you probably should download the latest version of Netscape. JavaScript only works with Netscape 2.0 and later betas.

Warning: I am not an expert at this and while you are free to use anything you find here, I cannot assure you that it will work correctly or safely on your system. I can say that everything worked for me. Period. Use things at your own risk.

Search for JavaScript
or other books!

Contents

How to Use this Site

Just view the codes you want and copy them. Or download the pages you want and cut and paste away. I've included a frames off link on the top of each page to make viewing codes and downloading easier. I do not pretend to assert a copyright as to any codes. The pages comprising this site are as follows:

 The main frame is called "library" and the navigation bar (frame named "navbar") and button bar (frame named "but") reference it. You can change the name of your main frame to whatever you'd like. You can also add background graphics, which I've left out here. I like to keep the button window separate. That way you can scroll around in the navigation window without losing the buttons.

Image Width and Height Warning

Be careful with images/graphics. Make sure to include width and height attributes or your JavaScripts might not work! And to make matters more deceptive, sometimes pages without the attributes will work alright off-line (so they look OK) but not work on-line! It's a good idea to specify the attributes anyway to make your pages load faster. I know it sounds too simple... but double check your pages. Here's a simple sample:

<img src="whatevers.gif" width="40" height="40">

Generating a Message

The buttons at the top of this page are an example of a message generated with JavaScript. It is really very easy to do. Just press on this botton:

You can also string buttons together like I did at the top of this page. Or you could use a radio button instead of the regular button. Sometimes regular buttons get too wide and they definitely give your very poor text control.

Alert:
How about a series of messages? Try this button. You'll get three messages in a row.

Enter a message in the box and check out how your alert message would look.

onMouseOver Examples: Now put your cursor over the blue ball or the phrase and watch the message that pops up. This can get kind of annoying.

Put your cursor here

A Message With A Client-Side Image Map
I just started to play with this while developing the Masami Teraoka Art Theatre, which contains many paintings with Japanese Text. We wanted to be able to generate an English translation that would pop up when you click on the Japanese. Here is an example (give it a little while to load).

A similar technique is used in my son's Guyver Page (Netscape version). You can click on the bio-booster armor and see a description of the feature. Here is his example. Cool Chris!

Various Messages That Come On When You Click A Link, Enter Or Leave A Page Or Close A Window
Alert On Click. This link will take you to Page 2 (loaded in the library frame). Watch the alert message that comes on when you click the link. Your only choice will be to click on the OK button.

Alert Before Entry. Try this link. An alert message will come on before you enter the page.

Alert On Entry. Press Page 3 in the navigation window (or you can do it here). An alert message will come on when you enter the page.

Confirmation On Click. The button below will take you to Page 2 (loaded in the library frame). Watch the confirmation that comes on when you click the link. It asks you to make sure that you want to go to Page 2. You can either click an OK or Cancel button. If you click OK, you will go to Page 2. If you click Cancel, you will remain here. This code corrects my previous code which was partially broken and was sent to me by Mike Stevens ([email protected]) (http://www.themall.net/~etcetera). Thanks Mike!

Confirmation Before Entry. Try this link. A confirmation message will come on before you enter the page. You will have a choice of entering the page or returning here.

Confirmation On Closing Window. Click the button to open a sample window. Watch what happens when you click the button in the window to close it.

Messages In Window On Entry Or Exit. Now try Page 5 and Page 6. A welcoming window will open when you enter Page 5 and a goodbye window will open when you exit Page 6. The underlying code for these two pages came from Steve Peterson who designed the great Webdot Design Site. Thanks Steve!

Message In The Status Bar
This link will take you to Page 2 (loaded in the library frame). Watch your status bar on the bottom of your screen. The message appears whenever your cursor is over the link (even if you don't click it) and will remain there until you pass over another link. Compare the results with this link to Page 3.

Now watch what happens when you put your cursor over this image:

History Buttons
JavaScript document history buttons allow you to go back and forth within a frame. The Netscape 2.0 BACK buttons takes you back out of the frame (this was fixed on 3.0). You can place these buttons anywhere on a page just like any form. Sometimes, for positioning purposes, it helps to put the form in an invisible table. Try these buttons:
Here is a reload button (it works but starts you off back at the top of the page):

You can also add one or more location buttons. Pressing the middle buttons will take you to pages 2 or 3. You could make the middle button your Home button

Now look at the (black) button window on the bottom, left of your screen. It does the same thing as above but references the parent.frame, in this case, parent.library. Try clicking the Page 2 button, above, then click the back (<<) botton in the (black) button window.

There is an example of graphic buttons (not form generated) for this function using a client-side image map at the Masami Teraoka Art Theatre. I've found that form generated buttons get stretched out (visually ugly) in Internet Explorerer.

Location Buttons
As shown in the last section, you can use JavaScript for location buttons such as:

Note that these pages loaded in my main (library) frame. You could use radio buttons for this:

Go to: Page 2 Page 3

You can also link to locations within the same page as follows:

You could also clear out the frames and go to a new location. Press your regular BACK button to return here.

I use this same arrangement for my frames on and frames off buttons.

Frames:

Problem: One of the problems I haven't been able to solve is how to get the Frame On Button to work in subpages since the frame setup document (here java.jtml) references the main document (here library.html) rather than one of the subpages. You will note that the Frame On Button on Page 2 reloads this page. I know that a back history button will work sometimes... but not after you've navigated around or clicked links.

A Selection List Directory

I was going crazy trying to figure out how to use a selection list for navigation (because you can cram a whole lot of URLs in a little expanding box). I posted a question in the livesoftware.javascript.developer newsgroup and the answer came from Gordon McComb. He wrote that "You need to use the selectedIndex property, not value, for selection lists" and provided the following example (which I modified for navigation here). A short function script called "openDir" is above. Make sure to check out Gordon's Experiments in JavaScript.

I use a different, self-contained (script and form together) set-up in Masami Teraoka's Art Theatre. Look at the Table of Contents.

E-Mail Button
Here is a simple e-mail button preset with a fake e-mail address ([email protected]).
Opening A Window
Click on the button to open a window. The name of the file in the window is sample.html. One of the nice things about this set-up is the Close button in the window. Again, all the codes to open the window are contained right here in the form.

Changing Background Color

Here is a very simple way to change background colors. Note that there is no script either above or here, just the simple form! There are also buttons in the navigation bar at leftwhich will change the background colors here. I've shown several color buttons but I would probably stick to just a couple (such as silver and white). Some are downright glaring.

These examples are very basic. For cutting edge examples, check out hIdaho Design's ColorCenter, Gordon McComb's Color Palette Changer, Govind Seshadri's The Amazingly Simple Color Selector, Zhangfan XING's Colorama, and Denise's An obnoxious JavaScript page to show you what you can do with the bgColor property.

Hey look, you can even use radio buttons:

* * * * * *

You can even use the onMouseOver technique. Slide (don't click) your cursor from one side to the other.

* * * * * *

Here's a little experiment. Enter a color name (there's a list below) in the box and the background color of this page will change!

Changing Colors In A Different Frame. The following buttons will change the color of the navigation bar at the left. That frame is named "navbar."

* * * * * *

The following buttons will change the color of the small button bar at the bottom, left. That frame is named "but." So as you see, background colors can be changed from one frame to another.

* * * * * *

Transparent Graphics. Changing the background color is pretty cool but it does mess up transparent graphics. See what is does to this blue ball which has a transparent background.

Color Names. You'll notice that I used the actual names of the colors in the code rather than RGB codes. I find names to be much easier. Here's the code for a sample silver button (the above example simply has several buttons and is centered):

<form><INPUT TYPE="button" VALUE="silver" ONCLICK="document.bgColor='silver'"></form>

Here is a window containing the color names you can use (they were originally obtained from Netscape's JavaScript Authoring Guide). Note that I gave you a menu bar so that you can print the file. Kiele Lokahi Linroth took my original color page and greatly improved it so I'm using it now instead. Now you can also see the hexadecimal value. Thanks Kiele!

The color names will also work for fonts, as well as text, active links and visited links, but you cannot change these later items as easily as the background color. I'm still looking for a simple script to turn off or change a background graphic. Gordon McComb has a cool Wallpaper/Background/Text Tryer-outer Page but I can't quite get the codes to work on my own pages.

Background Animation (Changing Colors)
The background animation (changing colors) for the button frame at the bottom, left, was written by Geoff Baysinger (http://fly.hiwaay.net/~gbaysing/) ([email protected]). Press your reload button to watch it again. I think it adds some life to the page, and works best in a small frame/window.

Random Images
In-Line Image. Look at the image to the right. It changes every time you enter this document or reload. You can see it easier on a the random image example page. The image is random, as opposed to specifically updated. When you come back here from the example page, the image at right will probably be different. The script is very simple. I have four images named "number0.gif", "number 1.gif", "number2.gif" and "number4.gif" which are in this same directory (/java). Left click on the image to see which one is currently displayed. The random image script was sent to me by Stephen Turbek. Check out his www.razorfish.com. Thanks Stephen! This is cool and simple!

Background Graphic. I used the same idea to create a random background image! Click the button to go to a page called back.html and then click the reload button there!

Background Sound
I sort of like background sounds but they must be coded differently for Netscape and Internet Explorer. The sound on this page is simply embeded in the navigation frame.

Animations
Sorry, I do not have a simple JavaScript for animations. I personally prefer animated GIFs and I often check out The 1st Internet Gallery of GIF Animation. There are many animation references at the JavaScript Index.

Scrolling Text
Sorry, I do not have a simple JavaScript for scrolling text/banners (I really don't like the look anyway and when I played with several I ran into memory out errors... even though I'm using 32 megs of RAM. There are many scrolling text/banner (in little windows and the status bar) references at the JavaScript Index. Gordon McComb has a cool JavaScript Banner, with many features, such as font color, text size and speed.

Access Counters
Sorry, I do not have a simple JavaScript for access counters. As you can see at the bottom of this page, I like to use the Web-Counter. There are some access counter references at the JavaScript Index.

Sending Me Stuff To Debug -- Questions
Sorry, I'm an attorney and loaded with regular work, and then I teach Karate three times a week, help at a Judo class and practice Iaido. Then there's my four kids... and my other pages! Please don't send me anything to debug. Everything I know about JavaScript is right here (really, I'm not kidding). Besides, your problem may just be that you did not specify height and width attributes for all your images. But I do welcome any suggestions you might have. Thanks for being understanding.

Aloha!
Thank you for stopping by. Please feel free to send your suggestions, comments and any corrections. Before you leave, please make sure to mark or tag this site for future visits.

Charles C. Goodin (goodin @lava.net)
98-211 Pali Momi Street, Suite 640C
Aiea, Hawaii 96701 USA

Tel: (808) 488-5773 / FAX: (808) 488-5778

Search for JavaScript
or other books!


Hey! You're visitor number: access counter

Copyright � Charles C. Goodin. All rights reserved (but not as to codes).