Quick Copy and Paste Scripts.

These javascript snippets can be cut and pasted into your page with little or no alteration. To copy the scripts highlight them with your mouse and then press the [Ctrl] & [C] keys simultaneously to copy them to the clipboard. The script can then be pasted into your application. You are encouraged to play with the variables in these scripts to learn more about how they work.

Microsoft Smart Tags
Windows XP and IE6+ technology allows Microsoft to insert links in your Web Pages without your knowledge or permission. Luckily this function can be disabled by pasting the following tag into the head of your document.

<META NAME="MSSmartTagsPreventParsing" content="true">

Automatic Print Script
This is a super-easy little script that you can use to form an automatic print-page link on your site. Just insert this script where you want the link to display and your visitors can choose to print the page they are viewing.

<a href='javascript:;' onClick='window.print();return false'>Print this page.</a>

Example: Print this page.

No Right Click
Place this script between the head tags. You can change the wording in Red. Just be aware that these "no right click" type scripts only deter the inexperienced user. There are many ways around them.

<script LANGUAGE="JavaScript">
<!--
function click() {
if (event.button==2) {
alert('Right Click Option Not Available!');
}
}
document.onmousedown=click
// -->
</script>

Bookmark Page
Paste this snippet in the body of your document where you want the link to appear. Change the script in Red.

<!--[if IE]>
<a href="javascript:window.external.AddFavorite('http://www.yoursite.com/', 'My Site Title');">Bookmark This Site!</a>
<![endif]-->

This script only works for IE5+ browsers. Other browsers will not see anything.

Make Your Page Users Start Page
This script will let users make your page the start up page for their browser. Paste this snippet in the body of your document where you want the link to appear.

<!--[if IE]>
<a HREF style="cursor:hand;" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.mysite.com');">Make this page your home page!</a>
<![endif]-->

Example: Make this page your home page!

This script only works for IE5+ browsers. Other browsers will not see anything. Just change the http://www.mysite.com to the URL of your page.

No Frills Popup
Just copy and paste this into the head of your document changing the script in Red.

<SCRIPT language="JavaScript">
<!--
window.open('mypage.html');
// -->
</SCRIPT>
 

Close Window With A Button
Add this short snippet to the body of your popup windows so that they can be closed easily.

<form>
<input type="button" value="Close Window" onClick="window.close()">
</form>

(See "Jazzing Up Your Forms" at the bottom of this page for ideas to make your button look more stylish.)

Close Window With A Link
Add this short snippet to the body of your popup windows so that they can be closed easily.

<a href="javascript: self.close()">Close Window</a>

Updating Copyright Notice
This copyright notice places the current year on the page so that copyright notices are always current. Once it's on your page there is no need to update the script.

<script language = 'JavaScript'>
<!--
function y2k(number) { return (number < 1000) ? number + 1900 : number; }
var today = new Date();
var year = y2k(today.getYear());
document.write('© '+year+' all rights reserved');
//-->
</script>

Example: © 2006 all rights reserved

Date Last Modified.
Use this script to show when your page was last modified.

<script language="javascript">
<!--
document.write('Last modified '+document.lastModified);
//-->
</script>

Example: Last modified 04/28/2006 16:55:33

Back to Top of Page link
Use this script if you have a long page.

<a href="javascript:window.scrollTo(0,0);">Back to top of page</a>

Example: Back to top of page

Add the current date to your page.
This script will add the date in the form dd month yyyy (eg. 7 January 2000). Just copy and paste it into the document where you want it to appear.

<script language="JavaScript">
<!--
function makeArray() {
for (i = 0; i<makeArray.arguments.length; i++)
this[i + 1] = makeArray.arguments[i];
}
var months = new makeArray('January','February','March','April','May','June', 'July','August','September','October','November','December');
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(day + " " + months[month] + " " + year);
//-->
</script>
 

Example: 28 April 2006

Document Last Modified (a more readable version)
Insert this code in your document where you want the page last modified date to appear.

<script language = 'JavaScript'>
<!--
function makeArray0() {
for (i = 0; i<makeArray0.arguments.length; i++)
this[i] = makeArray0.arguments[i];
}
var days = new makeArray0("Sunday","Monday","Tuesday","Wednesday","Thursday" ,"Friday","Saturday");
var months = new makeArray0('January','February','March','April','May','June', 'July','August','September','October','November','December');
function nths(day) {
if (day == 1 || day == 21 || day == 31) return 'st';
if (day == 2 || day == 22) return 'nd';
if (day == 3 || day == 23) return 'rd';
return 'th';
}
function getCorrectedYear(year) {
year = year - 0;
if (year < 70) return (2000 + year);
if (year < 1900) return (1900 + year);
return year;
}
function y2k(number) { return (number < 1000) ? number + 1900 : number; }
function padout(number) { return (number < 10) ? '0' + number : number; }
var last = document.lastModified;
var date = new Date(last);
var dateY2K = new Date(getCorrectedYear(date.getYear()),date.getMonth(),date.getDate());
document.write('Last Modified: '+ days[dateY2K.getDay()] + ' ' +
dateY2K.getDate() + nths(dateY2K.getDate()) + " " +
months[dateY2K.getMonth()] + ", " +
(y2k(dateY2K.getYear()))
);
//-->
</script>
 

Example: Last Modified: Friday 28th April, 2006

Break Out Of Frames
Use this script in between the <head></head> tags of your document to automatically bust out of other peoples frames.

<script language="JavaScript">
<!--
if (window != top) top.location.href = location.href;
//-->
</script>

Of course if your own site is a framed site then this could cause an endless loop and your pages will not be viewable.

Highlight the Background of Text

<span style="background-color:ff0000;">Put Your Text Here</span>

Change the color of the text as well.

<span style="background-color:ff0000; color: 0000ff">Put Your Text Here</span>

Add a Title Attribute to Text Links
This will popup a small description like that used in "alt" for your graphics.

<A HREF="http://www.somesite.com" TITLE="Great Website Tools!">Your Text Here</a>

Hold your cursor over this link for an example.Webmaster Tools

Window Maximiser
Place this script in the head of any document that you want to be maximised.

<script language="Javascript">
<!--
window.moveTo(0,0)
window.resizeTo(screen.width,screen.height)
//-->
</script>

Keep Window In Focus
Use this code to make sure a window remains in focus, on top. Great for web site news or smaller popup windows that are easily shuffled under out of focus.

<body onblur="self.focus();">

Allow Users To Save Your Page To Their Hard Drive
IE4+ browsers have a function that allows you to call the SaveAs dialog to save a web page. The following script includes an alternate alert message for non-IE browsers.

Paste the following script in the head of of your document.

<script language="JavaScript">
<!--
var isReady = false;
function doSaveAs(){
if (document.execCommand){
if (isReady){document.execCommand("SaveAs");}
}else{
alert('Feature available only in Internet Exlorer 4.0 and later.');
}
}
//-->
</script>

Include the following onload event call in the body tag. This stops the page being saved until it is fully loaded.

<body onload="isReady=true">

To call the script from the page and activate the SaveAs dialog, insert a link in the page like this:

<a href="javascript:doSaveAs()"> Click Here To Save This Page </a>

Show users where on your site they currently located.

Example: You are here: > C: > Documents%20and%20Settings > Douglas > Local%20Settings > Temp > e > 88786-030911-065434-00.a2k > quick.html

The results you get from a page on your hard drive will obviously be different to those from your web site.

Insert the following code in the body of each document where you want the information to appear. No code changes are necessary.

<script language="JavaScript">
<!--
thePath = '';
loc = '' +location.href;
paths = loc.substring(7).split('/');
for (i=0, n=paths.length;i<n;i++)
thePath += '> ' + paths[i] + ' ';
document.write('<font color="#ff0000"><b>You are here: ' +
thePath.substring(1)+'</b></font>');
//-->
</script>

Default Statusbar Message.

<BODY OnLoad="window.defaultStatus='Put Your Message Here!';">

Text Area Background

A Colorful Teletype Message.

Copy and paste this script into the body of your document where you want the effect to appear. Then just change the code in RED eg. var message, the typingbasecolor, the typingtextcolor and the backgroundcolor for a great effect. You can also change blinkspeed, fontface and fontsize to further personalise the script. The rest of the script should remain unchanged.

<script language="JavaScript1.2">
var message="A Colorful Teletype Message."
var typingbasecolor="000000"
var typingtextcolor="ffff00"
var backgroundcolor="669900"
var blinkspeed=100
var fontface="arial,geneva,helvetica"
var fontsize="5"
var n=0
if (document.all){
document.write('<font face="'+fontface+'" size="'+fontsize+'" color="'+typingbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="typinglight" style="background-color:'+backgroundcolor+'">'+message.charAt(m)+'</span>')
document.write('</font>')
var tempref=document.all.typinglight
}
else
document.write(message)
function typing(){
if (n==0){
for (m=0;m<message.length;m++)
tempref[m].style.color=typingbasecolor
}
tempref[n].style.color=typingtextcolor
if (n<tempref.length-1)
n++
else{
n=0
clearInterval(blinking)
setTimeout("starttyping()",1500)
return
}
}
function starttyping(){
if (document.all)
blinking=setInterval("typing()",blinkspeed)
}
starttyping()
</script>

Background Fireworks.

Just copy and paste this script anywhere in the body of your document for a dynamic background effect. There is no need to change any code. It will work best with a dark background in your document.

Cross Browser Background Sound

Copy and paste this script into the body of your document. Just change the name of the mid file.

<SCRIPT LANGUAGE="JavaScript">
<!--
var MSIE=navigator.userAgent.indexOf("MSIE");
var NETS=navigator.userAgent.indexOf("Netscape");
var OPER=navigator.userAgent.indexOf("Opera");
if((MSIE>-1) || (OPER>-1)) {
document.write("<BGSOUND SRC=mysong.mid LOOP=INFINITE>");
} else {
document.write("<EMBED SRC=mysong.mid AUTOSTART=TRUE ");
document.write("HIDDEN=true VOLUME=100 LOOP=TRUE>");
}
//-->
</SCRIPT>
 

Simple Image Change For Time Of Day

This script will show an image of your choice depending on the viewers time. If it is between 6am and 6pm they get one image and if its between 6pm and 6am they get another. In the following example you will see a sun if it is between 6am and 6pm or a moon otherwise. Just change the URL for your images and paste the code where you want the image to appear. The script works on a 24 hour clock. You can change the hours (in red) to suit your needs. It will work best if the images are the same size.

<script language="javascript">
<!--
var cur= new Date()
var change=cur.getHours()
if ((change<18) && (change>=6))
document.write("<img src='sun.gif'>")
else
document.write("<img src='moon.gif'>")
//-->
</script>

WWW Jump Box

Give your visitors a jump box so that they can access anywhere on the WWW from your page.

<form name="jumpbox">
<input style="border-color: black; border-size: 2;" type="text" name="href" size="25" value="http://">
<input type="button" value="Go To" onClick="parent.location.href=document.jumpbox.href.value;">
</form>

Translate Your Site

Tap into the Google translation service and translate your site from English to German, French, Spanish, Portuguese or Italian.

<form name=goour action="http://translate.google.com/translate" target="_blank">
<input type="hidden" name="u" value="http://yoursite.com" target="_blank">
<select name=langpair>
<option value="en|es">to Spanish
<option value="en|fr">to French
<option value="en|de">to German
<option value="en|it">to Italian
<option value="en|pt">to Portuguese
</select>
<INPUT TYPE=hidden name=hl value=en>
<INPUT TYPE=hidden name=ie value=ISO-8859-1>
<INPUT TYPE=hidden name=oe value=ISO-8859-1>
<input type=hidden name=prev value="/language_tools">
<br>
<input type="submit" value="Translate Now">
</form>

The example below translates the opening page at the Yahoo site
 

Jazzing Up Forms

1. To clear a form when user reloads (or returns to) a page simply paste this script after the closing tag of your form.

   <script language="JavaScript">
   <!--
   document.myForm.reset();
   //-->
   </script>

   Where myForm = the name of your form.

   ---

2. To close a form in a popup window once once form is submitted.

   <form method="post" action="http://www.somewhere.com/cgi-bin/xxxxxx.pl" onSubmit="setTimeout('window.close()',2000)">

   The setTimeout variable is set to 2 seconds to give the form a chance to be submitted before the window is closed.

   ---

3. To put the cursor in the first element of a form when the page loads paste this script after the closing form tag.

   <SCRIPT LANGUAGE="JavaScript">
   <!--
   document.forms[0].elements[0].focus();
   //-->
   </SCRIPT>
    

   ---

4. Use CSS to make your form buttons all the one width. In fact you can set the font face, font size, colors etc using this method (see 2nd example).

   Example 1:

   <input type="button" name="button" style="width: 120" value="ABC">
    

    

   Example 2:

   <input type="button" name="button" style="font-size: 12pt; font-family: arial; font-weight: bold; color: #ffffff; background-color : #0000ff; border-color: #bbbbff; width: 140" value="ABC">
    

    
    

Frame Navigation Most of you will have seen or used the following script: <a href="javascript:history.back()">Back</a> which is a text link that works exactly like the back button in the browser. It's great for returning visitors to the referring site. If you are using a framed site the exercise becomes a little more difficult, but not much. The following scrpts will help out with your framed sites. I've constructed the scripts using a form button as the navigation aid but you can alter them to suit your preferences.

1. To take the current frame window back 1 page:

   <form>
   <input type="button" onClick="window.history.back()" value="Back">
   </form>

    

   ---

2. Have the button in fame 1 move frame 2 back in history:

   <form>
   <input type="button" onClick="parent.otherFrameName.history.back()" value="Back">
   </form>

   Change OtherFrameName to the name of your frame.

   ---

3. Have the button move both frames back in history:

   <form>
   <input type="button" onClick="parent.otherFrameName.history.back();window.history.back()" value="Back">
   </form>

   Again, change otherFrameName to the name of your frame that does not have the back button.

   ---