CGI Script & Java Script

Spice Up Your Site With CGI & Java Script

CGI (Common Gateway Interface)

A variety of web sites offering free CGI scripts to help you spice up your web site.

• CGI City - A huge site of wonderful scripts for just about anything you'll need.

• WillMaster.com - If you're looking for quality scripts with great features, look no further. The Master Series scripts are top of line. Web-Source.net uses many of the scripts you'll find at this excellent site.

• BigNoseBird - A collection of about 15 scripts including form processing, guestbook, banner rotation, site search and more. Several great tutorials available.

• CGI For Me - Remotely hosted. Provides CGI Scripts for people who cannot make or use there own. Everything is stored on their servers and using their web based administration area anybody can set anything up with little or no knowledge of HTML.

• CGI World - Several quality scripts from a Mailing List Manager to Password Protection and Site Search.

• Cliff's Perl Scripts - A nice collection of about 18 useful scripts including Banner Rotater, Form Mailer, Counter, Guestbook, LinkTrader and more. http://www.shavenferret.com/

• FindAScript.com - A nice site offering a wide variety of cgi scripts, javascripts, applets and programmer resources.

• Four-Runner.com - The ultimate resource Search Engine for developers. IT developers best kept secret - known to all. http://www.four-runner.com/

• LockedArea.com - We offer a range of password protection and member's area management systems all written in Perl. All are programmed to a very high standard and are extremely easy to install and use and are very customizable. http://www.locked-area.com/html/partners/home.cgi?referrer=websource

• Matt's Script Archive - Offering around 15 free scripts to enhance your web site. Guestbook, FFA link page, simple search, counters, wwwboard, Formmail and more.

• Perl Coders - Your #1 Compendium of CGI Scripts for serious webmasters.

• ScriptSearch - Probably the largest script site on the internet with over 5,000 scripts.

• Solution Scripts - A variety of professional scripts including, Home Free to enable you to give away free webpages, The Commish to enable you to run an affiliate program, Top Sites and more. http://solutionscripts.com/vault/index.shtml

• The CGI Collection - A small collection of scripts including, mailform, clock, guestbook, counter and more.

• The CGI Resource Index - One of the largest script sites on the internet with a wide variety of scripts to choose from.

Java

Spice up your website with free Java Scripts and Java Applets from a variety of sites.

• Javascripts.com - Over 2,000 free javascripts. Registration is required for first time visitors.

• ScriptSearch - One of the largest script sites on the Internet. Well organized with many categories.

• The Javascript Source - A collection of hundreds of free JavaScripts that are available to you for use on your web pages.

• CodeLifter.com Free JavaScript Archive - A unique collection of interesting, often hard-to-find cut-and-paste JavaScripts and tips... including cross-browser slideshows, no-right-click scripts, menu and navigation scripts and more...

• Dynamic Drive - Comprehensive code library featuring free JavaScript and DHTML.

• Java-Scripts.net - Free cut-n-paste javascripts. Categorized so you can find what you need.

• Nic's JavaScript - We do things a little differently than the competition. Unlike other JavaScript pages that try to junk their examples full of useless code, we prefer to make our codes as small as possible. This makes the code easier to manipulate and learn from.

• Website Abstraction - A large site with many great resources such as; Free JavaScripts, JavaScript Tutorials, Advanced JavaScript Tutorials, Web building tutorials, Free Java applets and more.

• ZDNet Developer ScriptLibrary - If want to use a little JavaScript to spice up your Web design on the client side, but don't have time to code, fret no more! ScriptLibrary has literally hundreds of cut and paste JavaScripts waiting for you.

• 1stJavaSoft by Sirius Java Productions Limited - Here at 1stJavaSoft we have many Free and Commercial java applets. Much of the functionality you will find here comes from suggestions by our existing customer base. Check out our current range and if you don't find what you are looking for simply send us an email.

• CodeBrain - This professionally presented Java Applet site is that of, none other than, David Sosnowski. David's site offers a nice collection of professionally created, free Java Applets. David is one of our Web Source Professionals and is highly respected in our Internet community.

• CodeGuru - A well organized, extensive directory containing everything pertaining to Java. Applets, FAQ's, Newsgroups, Tutorials, Open Source and more.

• ColdJava - A nice site offering a varitey of Java Servlets.

• FreewareJava - A well designed site offering hundreds of free Java Applets listed in many categories.

• HotScripts.com - If you're looking for a specific script, you're bound to find it here. This well organized site offers a nice index of Java, Javascript, Perl, XML and much more.

• Jars - A great site offering any and everything relating to Java. Applets, News, Reviews, Tutorials and more.

• Java Applet Collection by Sirius. - In this Collection we have put together 11 of our Applets which can greatly enhance any website. The collection includes Tree navigation, Menu systems, Graphs and Special effects. http://www.net800.co.uk/

• Java Applets - If you want to improve your web site then you have come to the right place. We have high quality java applets which will add a dynamic feel to your site and make your pages look far more professional than just HTML alone. (http://www.net800.co.uk/netstart/sirius/index.html) http://www.net800.co.uk/

• Java Boutique - A great site packed with everything you ever wanted to know about Java. News, Applets, Help, How to's, reviews and more.

Easy Image Tricks - 1

Okay, okay. Have you ever wanted to have an image change to another image when you move your mouse pointer over it, and change back once you move your mouse pointer off it? This can be accomplished rather easily with JavaScript.

First, you need to create two images. It's usually best to make the second image just a slight variation of the first image. In the example below, I have the word "button" in a graphic. One of the images have a red background, the other one has a blue background. You'll need to upload these images to your web site. (I keep mine in a directory called graphx.)

Now, it's time to decide which image you want to load when the page is loaded (and be seen when someone has JavaScript turned off). In my example, I choose the image with the red background as my main image. I used the regular old HTML code to load the image:

<img name="button" src="graphx/redbutton.gif" width="200" height="50" alt="a button" border="0">

Notice that I've given the image a name. This is very important, because it lets me identify the image on the page.

This is what it looks like so far:

I have created a second image with a blue background, called bluebutton.gif . (You'll see it in our finished script below.)

OnMouseOver & OnMouseOut

Two popular events are OnMouseOver and OnMouseOut. When you move your mouse pointer over an image, it signals the web browser to check for OnMouseOver code. After you move your mouse pointer away from an image, it signals the web browser to check for OnMouseOut code.

In order to get our image to change on these two events, we'll code them in an anchor tag around the image, just like a link, except the link won't go anywhere in our example. A regular anchor tag would look like something like this:

<a href="a_page.htm"></a>

But... since we don't want the link to go anywhere, well use

<a href="#"></a>

Pre-loading

We don't want the browser to take the time to download the second image (in this case, the blue image) *after* we move our mouse over it... instead, we want the browser to load it *immediately*. In order to do this, we'll cache (make a copy of the image) on the browser's computer. We can do that like this:

<script language="JavaScript">
<!-- // start hidden code our_image = new Image(); our_image.src = "graphx/bluebutton.gif"; // done with hidden code -->
</script>

This code tells the web browser to create some space in cache for a new image, and download bluebutton.gif into that space. If you don't understand it completely, that's okay.

Scripting the Events

Now we need to add our OnMouseOver and OnMouseOut code to the anchor tag. It'll look like this:

<a href="#" onMouseOver="button.src=our_image.src;" onMouseOut="button.src='graphx/redbutton.gif';">

In English, this says that when the mouse pointer moves over the link, load whatever is in our_image.src as the new image on the web page in the object (image) we've called button . When the mouse moves away, load the original image again.

( Note: We could have easily pre-loaded the red button, but it was already loaded with the page, so it would have been wasteful to do so. That's why I decided to just use 'graphx/redbutton.gif' in the OnMouseOut code.)

Putting it Together

Now, we need to put it all together. In our HTML file, we need to include the pre-load script, the anchor tag, and the image tag. Here's how it fits together:

<html>
<script language="JavaScript">
<!-- // start hidden code our_image = new Image(); our_image.src = "graphx/bluebutton.gif"; // done with hidden code -->
</script>
<a href="#" onMouseOver="button.src=our_image.src;" onMouseOut="button.src='graphx/redbutton.gif';">
<img name="button" src="graphx/redbutton.gif" width="200" height="50" alt="a button" border="0"></a>
</html>

Example in Action:

( Be Careful: Don't give two images (or any other objects) the same name. Your scripts won't work correctly.)

Pop-Up Windows

Basic PopUp

by William Bontrager, Programmer & Publisher
Copyright 2001 William Bontrager

We receive many personal emails with questions relating to popup windows. Thus, this article.

I've written other articles, tips, and an ebook related to popups. You can find them at http://willmaster.com/a/8/pl.pl?87parts , http://willmaster.com/a/8/pl.pl?87ptips , and http://willmaster.com/a/8/pl.pl?87ebook , respectively. They, however, are more or less specialized. The ebook, for example, provides the JavaScript code for three different popup windows: (1) a "no clicks required" information delivery system, (2) a professional way to present images within popups without maintaining separate HTML pages, and (3) image map triggered popups.

This article, rather than focusing on specialized uses, attempts to provide a basic understanding of how popups work.

Here is the basic JavaScript popup window code:

window.open(URL,Name,Properties)

"URL" is the URL of the HTML file with the content to be displayed in the popup window.

"Name" is a name you give to the popup window if you want to reference the popup in <form...> or <a...target="Name"> tags. If you will not reference the window, then Name can be a null string. (A null string is a pair of apostrophes or a pair of quotation marks with nothing between them; i.e., '' or "") Because referencing is beyond the scope of this article, the Name will be specified as a null string in all working examples of this article.

"Properties" is optional, yet is the focus of at least half of this article. Properties lets you control the appearance of the popup window, such as its size and whether or not it may have scrollbars. (If no optional Properties are specified, you get a new browser window instead of a popup window.)

Before describing the optional Properties, let's talk about how to launch a popup window. After all, there is no sense in describing the available options if you don't know how to launch the popup in the first place.

Launching Popup Windows

To launch popup windows, put your JavaScript popup window creation function into the HEAD area of your HTML page. Then launch the popup with either the onLoad=... command in the <body... tag or with an <a... anchor tag.

Here is a basic custom function for your HEAD tag:

<script type="text/javascript" language="JavaScript">
<!
function Popup() {
window.open(...);
}
//>
</script>

(The ... in the above custom function is a placeholder for the URL, Name, and optional Features. Working code replacing the ... is later in this article.)

To launch the popup with the onLoad= command, put this into your <body... tag:

onLoad="Popup()"

To launch the popup with an <a... tag, do something like this:

<a href="javascript:Popup()">
Click Here
</a>

Note that the custom function name does not have to be "Popup" but can be any sequence of alphanumeric characters, including underscore.

There is another method using the <a... anchor tag, a method that allows you to dispense with the custom function in the HEAD area. The reason you can dispense with the custom function is because the JavaScript window.open(...) function is in the <a... tag itself. Here is an example:

<a href="#" onClick="window.open(...); return false;">
Click Here
</a>

(Again, the ... in the above code is a placeholder for the URL, Name, and optional Features.)

The reason for the "return false;" code is so the browser won't try to load the URL "#" in the href attribute. The URL "#' means go to the label on the page named following the "#" character. Without a name following the "#" character, the browser would normally go to the top of the page.

Okay, you know several different ways to launch a popup window. Now, let's replace the ... in the window.open(...) function with working code.

The following assumes you have an HTML page that will be displayed in the popup window called display.html:

window.open('display.html','');

Because no optional Properties are specified, the above code will open a new browser window with your display.html in it. When any optional Properties are specified, a popup window with display.html is launched instead.

The Optional Properties

The optional Properties can be used to specify your popup window's size, whether or not it will have a menu bar, and so forth.

The Properties are all on one line and separated with a comma. There may be no spaces in the line. The list of Properties is enclosed between apostrophes or quotation marks.

For example,

window.open('display.html','','height=100,width=200');

will display your page in a popup 100 pixels high and 200 pixels wide.

Here is a list of Properties you may assign to your popup windows :

height
If used, specify the popup window's height in pixels. No less than 100 will be allowed. If not used, the browser will determine a default height, which may be the height of the screen.

width
If used, specify the popup window's width in pixels. No less than 100 will be allowed. If not used, the browser will determine a default width, which may be the width of the screen.

menubar
menubar represents the browser window's menu bar. The menu bar contains the browser's menus such as File, Edit, and View. If menubar is used, specify either menubar=no or menubar=yes. If not used, menubar=no is assumed.

toolbar
toolbar represents the browser window's toolbar. The toolbar contains the browser's navigation buttons such as Back, Forward, Reload, and Home. If toolbar is used, specify either toolbar=no or toolbar=yes. If not used, toolbar=no is assumed.

locationbar
window.locationbar represents the browser window's location bar, the bookmark and URL areas. If locationbar is used, specify either locationbar=no or locationbar=yes. If not used, locationbar=no is assumed.

NOTE:

window.locationbar: Returns the locationbar object, whose visibility can be toggled in the window.

window.location: Gets/sets the location, or current URL, of the window object.

personalbar
personalbar represents the browser window's personal bar, if it has one, probably a region for easy access to special bookmarks. If personalbar is used, specify either personalbar=no or personalbar=yes. If not used, personalbar=no is assumed.

directories
directories represents the same thing as personalbar, above. If directories is used, specify either directories=no or directories=yes. If not used, directories=no is assumed.

(If both personalbar and directories are used, and if their directions conflict, the browser will determine how to handle it. Different browsers may handle that situation quite differently. Never use both personalbar and directories.)

statusbar
statusbar represents the browser window's status bar, the area containing the security indicator and status bar messages. If statusbar is used, specify either statusbar=no or statusbar=yes. If not used, statusbar=no is assumed.

scrollbars
scrollbars represents the browser window's vertical and horizontal scroll bars. Most browsers will display the scrollbars only when needed to view content beyond the window area. If scrollbars is used, specify either scrollbars=no or scrollbars=yes. If not used, scrollbars=no is assumed.

resizable
resizable specifies whether or not the user may resize the popup window. If toolbar is used, specify either resizable=no or resizable=yes. If not used, resizable=no is assumed.

Which of the above Properties you should specify is determined by the purpose of your popup window.

For example, if your credit card authorization service requires order forms to be on one domain, yet you want to sell product from another, you could have your form on the required domain and display it in a popup window. In this case, you might not want the URL to be viewable in the address bar, so you would specify location=no. But the other Properties could all be ______=yes, except the height and width. If you do not specify height or width, the browser will display its default size which, in this scenario, would probably be appropriate.

With JavaScript version 1.2, additional Properties may be specified. Note that only the latest browser versions support JavaScript 1.2. The additional properties are:

screenX
screenX specifies how many pixels the left edge of the popup window shall be in from the left edge of the current browser window.

screenY
screenY specifies how many pixels the top edge of the popup window shall be down from the top edge of the current browser window.

innerHeight
innerHeight specifies the number of pixels high that the inside viewable area of the popup window shall be. This would replace the height=___ Property of previous JavaScript versions.

innerWidth
innerWidth specifies the number of pixels wide that the inside viewable area of the popup window shall be. This would replace the width=___ Property of previous JavaScript versions.

outerHeight
outerHeight specifies the number of pixels high that the outside dimension of the popup window shall be.

outerWidth
outerWidth specifies the number of pixels wide that the outside dimension of the popup window shall be.

dependent
dependent specifies whether or not the popup window closes automatically when the main browser window is closed. If dependent is used, specify either dependent=no or dependent=yes. If not used, dependent=no is assumed.

Assigning Popup Window to a Variable

Assigning the popup window to a variable can give you some additional control:

MyWindow = window.open(...);

If you launch only one popup window from your page, then assigning it to a variable is rarely necessary. But it doesn't hurt to do so.

If you launch more than one popup window from your page, you'll probably want to assign each to a different variable:

Pop1 = window.open(...);
Pop2 = window.open(...);

If both popup windows were assigned to the same variable name (or no variable is assign) then the second and subsequent popups will use the same popup window as the first. Of course, in some situations that behavior may be desired.

Assigning the popup to a variable will also allow you to close the popup from the page that created it:

Pop1 = window.open(...);
setTimeout("Pop1.close",9000);

The above code creates a popup window and assigns it to the variable Pop1. Then the JavaScript function setTimeout() is set to close the popup window after 9 seconds (9000 milliseconds).

Those are popup window basics. It should be all you need to make simple popup windows.

Additional information and specialized applications can be found at the URLs mentioned above. The home of JavaScript, Netscape.com http://developer.netscape.com/, has information for those developing with JavaScript. JavaScript download sites such as http://javascript.internet.com/ have code snippets that much can be learned from.

Much can be done with popup windows.

Have fun!

Publisher: William Bontrager Programmer/Publisher,

" WillMaster Possibilities" ezine [http://willmaster.com/possibilities/]
subscribe-possibilities@willmaster.com
Business Home Page [http://willmaster.com/]