Tricks n' Tips



 

 General » 

 • Using Colour
 • Special Characters
 • Counters and Statistics 
 
 
 

Introduction

This section presents a few small JavaScript scripts to enhance your webpages. JavaScript is a scripting language developed specifically by Netscape and Sun for enhancing the capabilities of Web pages. Despite the unfortunate naming which causes a lot of confusion, there's a huge difference between Java and JavaScript. For more information on the differences see Holger's Homepageexternal link and First Step Communicationsexternal link.

Stop!A word of warning: Please don't write to Jalfrezi with questions about Javaexternal link or JavaScript - you'll just get a (perfectly honest) 'I don't know' answer. Also, JavaScript does not run on all browsers (Netscape Navigator 2 and MS Internet Explorer 3 upwards), and users have the option to turn off JavaScript if their browser supports it.

Each tip contains a description and an explanation of how to use the code. Most examples have two parts - the HTML which runs the JavaScript code and the JavaScript script itself.

Go to ContentsAutomatic revision dates

At the bottom of many pages (this one for example) you may have seen a revision date. You can use a neat bit of JavaScript to revise this date automatically. To produce your automatic date, cut and paste the following code (courtesy of Cranial Softwareexternal link) into your HTML document:

Example of code

<SCRIPT LANGUAGE="JavaScript">
<!--//hide script from old browsers
document.write( "<I>Last updated "+ document.lastModified +"</I>");
//end hiding contents -->
</SCRIPT>

How it renders

If you don't see something like "Last updated 11/25/97 21:40:46" rendered in the example then your browser does not support JavaScript.

Go to ContentsCreating a back button

By using small pieces of JavaScript (courtesy of HTMLibexternal link and Alexandr Kornewexternal link) you can create a Back button on your webpage. You can create your back button as a form-type button or as a text or graphic link.

Example of code

<FORM>
<INPUT TYPE="BUTTON" NAME="GOBACK" VALUE="Go Back" OnClick="history.go(-1)">
</FORM>
 
<A HREF="javascript:history.go(-1)">Go back.</A>
<A HREF="javascript:history.go(1)">Go forward.</A>

How it renders

Go back.
Go forward.

Go to ContentsAutomatically opening a window

When your readers enter a page you can automatically open a new, often smaller window displaying another webpage. This trick is often used to bring up an advert console or control panel. You can specifiy the size and position of the window and turn off some or all the normal features of a graphical browser: scrollbars, toolbar, location bar, directory buttons, status bar and menu bar. The width and height are specified in pixels and the position is specified in pixels from the top-left of the screen. See webreference.comexternal link for more info on window properties. Place the code in between the <HEAD></HEAD> tags of your document.

Example of code

<SCRIPT LANGUAGE="JavaScript">
<!--//hide script from old browsers
window.open("newpage.htm", "new_win", "resizable=yes, scrollbars=no, toolbar=no, location=no, directories=no, status=no, menubar=no, width=520, height=200, top=5, left=5")
//end hiding contents -->
</SCRIPT>

Go to ContentsOpening a new window from a link

In a similar manner to the previous tip, a 'pop-up box' can be launched using JavaScript. You can define the window size in pixels and specify whether to show scrollbars, toolbar, etc. See webreference.comexternal link for more info on window properties. Insert the code at the relevant place on your page.

Example of code

<SCRIPT LANGUAGE="JavaScript">
<!--//hide script from old browsers
function launch() {
open('totd/tipofday.htm', 'tipofday', 'resizable=yes, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, width=500, height=300') }
document.write('<A HREF="javascript:launch()">Todays Tip</A>')
//end hiding contents -->
</SCRIPT>

You should also follow the above code with HTML for browsers that do not support JavaScript:

<NOSCRIPT><A TARGET="tipofday" HREF="totd/tipofday.htm">Today's tip</A>:</NOSCRIPT>

How it renders

Go to ContentsCreating a scrolling text box

By using small pieces of JavaScript you can create a scrolling text in a text box. First we need to insert the scrolling text JavaScript code in the HEAD of the page.

Example of code

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- // hide script from old browsers
var id,pause=0,position=0,revol=9;
function banner() 
{
  var i,k;
  var msg="  Take a look into some big grey eyes and ask yourself if you wanna make em cry.";
  var speed=10;
  document.thisform.thisbanner.value=msg.substring(position,position+50);
  if(position++==msg.length) 
  {
      if (revol-- < 2) return;
      position=0;
  }
  id=setTimeout("banner()",1000/speed);
}
// end hiding contents -->
</SCRIPT>
</HEAD>

Then we need to set the text box scrolling once the page has loaded. This is done by calling the JavaScript function by using the onLoad event handler in the BODY element. Note you can also include any other of the normal BODY attributes, such as BGCOLOR, alongside the onLoad event handler.

Example of code

<BODY onLoad="banner()">

And finally we need to actually insert the text box into the page.

Example of code

<FORM NAME="thisform">
<INPUT TYPE="text" NAME="thisbanner" size="40">
</FORM>

How it renders


Sizzling HTML Jalfrezi
ContactPurchase
Page Contents
Previous pageJalfrezi ContentsNext page

Click Here!