Salvation Army Collectables

Webmaster Resources > JavaScript JavaScript Scripts to enhance and add functionality to your site

Below you will find some commonly used JavaScript. Please note that all these scripts are free for use but you must not delete any headers that claim copyright or ownership of that script. If you are after a particular script there are literally thousands of sites that offer free cut 'n' paste JavaScript. Just do a quick search on Google for "free javascript" and then take your pick! :-)

Pop Up Window This script allows you to install a pop-up window which is launched when a visitor clicks a link. See below for an example. Of course you will need to put some of your own information into the script to allow it to work for you. First you will need to know the name of the page you want to display in the window and them replace 'mypage.htm' with the name of yours. Next you may want to change the size of the window. This is done by altering the width and height values in the script. You will also want to change the wording of the text link. This is done by changing Open Window to whatever you want it to say. Click for example <A HREF="javascript:void(0)" onClick="window.open('mypage.htm', 'one', 'width=300,height=300,screenX=200,left=200,screenY=200,top=200,toolbar=no,status=yes,location=no,menubar=no,directories=no,scrollbars=yes,resizable=no')">Open Window</A>		Alert Box This small alert box pops up when a visitor enters your page. You can use this to draw their attention to site updates, changes, special event and offers, anything you can think of really. All you need to do is alter the script to incorporate your message. See below for an example. Click for example <SCRIPT LANGUAGE="JavaScript"> <!-- window.alert("Your Text Here Your Text Here") //--> </SCRIPT>
Close Window Text Link A very simple script that allows you to provide a "close window" text link. Particularly useful on pop up windows. See below for an example. Click for example <a href="javascript:window.close()"><B>Close Window</B></a>		Cross Browser No Right Click Script This script enables you to protect images and text on your site. While it is by no means a total solution to protecting your site content it does act as somewhat of a deterrent. Having said that this script is particularly effective if used in conjunction with a frames site. See below for an example. Click for example <script language="JavaScript"> <!-- // No rightclick script v.2.5 // (c) 1998 barts1000 // barts1000@aol.com // Don't delete this header! var message="Sorry. Copyright! Contact the administrator."; // Message for the alert box // Don't edit below! function click(e) { if (document.all) { if (event.button == 2) { alert(message); return false; } } if (document.layers) { if (e.which == 3) { alert(message); return false; } } } if (document.layers) { document.captureEvents(Event.MOUSEDOWN); } document.onmousedown=click; // --> </script>
Auto Page Forward This script will need to be placed between the <HEAD> and </HEAD> tags of your page. To customize the script so you can seamlessly forward your visitors onto your site simply change the URL in the script to your own. <meta HTTP-EQUIV="REFRESH" content="0; url=http://www.my_site.com">		Non Underlined Links Here's a useful little piece of script that allows you to remove all underlining from you hyperlinks. Good if your putting links in a block of text. The script must be placed between the head tags for it to work. <style><!-a {text-decoration: none}-></style>
Non Underlined Links With Hover Again, this script needs to be inserted between the <HEAD> and </HEAD> tags of your page. This is slightly different from the one above as it not only removes the underlining from a hyperlink but when the mouse pointer is passed over it it will change colour and become underlined. You can change the HEX code to a colour that is appropriate for your site. (The HEX code is the bit after the # mark in the script) <style><!-a {text-decoration: none}a:hover {color:#CCFF99;text-decoration:underline}-></style>.		Back Buttons Another favourite I'm asked for is a "BACK" button that emulates the back button on the browser. This is a relatively simple script and can be altered to use an image, text, or a standard HTML button. See the scripts below for some examples. To emulate your browsers "Forward'' button you can use the same scripts as above by simply replacing the history.back with history.forward If you want a standard HTML button use this script: <INPUT TYPE="button"VALUE="Go back"onClick="javascript:history.back(1)"> and it will look like this!
If you want to use an image of your own you will need to use this script: <a href="javascript:history.back()"><img src="your_image.jpg"border="0"></a> and it will look like this!		If you want to use plain old text then you will need to use this script: <a href="javascript:history.back()"><b><font face="Arial" size="3">Go Back</font></b></a> and it will look like this! Go Back
Form Based Navigation To save space and to provide a compact way of giving your visitors access to your pages, you could use a form-based, drop-down jump navigation system. This is a good idea if you have many pages and only a small amount of space to list them in. To use this script simple change the text in each <OPTION VALUE="your_page.htm">Your Page so you would replace "your_page.htm" with the name of your page and Your Page with the title. You can repeat this as many times as you like. Not however that one is marked as selected. This tells the script which page to display by default, usually the home page. <Script Language="JavaScript"> <!-- Hide from old browsers function NavJump(list){location.href = list.options[list.selectedIndex].value } // end hiding ---> </script> <form> <Select> <OPTION SELECTED VALUE="index.html">Home Page <OPTION VALUE="photos.html">Photos <OPTION VALUE="links.html">Links </SELECT> <INPUT TYPE="button" VALUE="Jump" onClick="NavJump(this.form.elements[0])"> </FORM>
Quick Tips: Display messages in browser status bar on link hover: <a href="index.htm" OnMouseOver="self.status='Go to my homepage!'; return true" onmouseout="self.status=''; return true">Visit this page.</a> Sample: Visit this page. Adding a Title attribute to your links creates a mini-popup description: <A HREF="http://www.sacollectables.com" TITLE="Collectables, Biographies, Resources & More">Salvation Army Collectables</a> Sample: Salvation Army Collectables