• FrontPage Index
• Related Topics:

Sometimes lines of code can be very long! Where I have had to break a line of code to fit it on the page I have used the symbol to indicate that the line below is a continuation and that the code should be written as a single line

<Blah blah blah 
blah>

should be written:

<Blah blah blah blah>

Custom Navigation Buttons with JavaScript

By substituting the URL section of a hyperlink with a simple JavaScript expression, you can instruct the user's browser to step back, forward or reload the current page... just like the browser's own back, forward and reload buttons. What's the point of that then?

Well, you might have used JavaScript to make a page open full-screen, without toolbars (don't you hate it when people do that!), purely for artistic effect of course. This technique lets you add the basic navigation buttons to the page itself.

You can read my article on opening a page in a new window and further down this page you can find out how to close a window with JavaScript. 

You might like to put back and forward navigation buttons on your pages anyway (like I do!). Here is a three cell table with hyperlinks applied to the text...

The code goes like this...

<a href="JavaScript:history.go(-1)">back</a>

<a href="JavaScript:history.go(1)">next</a>

<a href="JavaScript:location.reload()">refresh</a>

 
Alternatively, you might like to use images. The procedure is just the same.

Here's an example of the code the code...

<a href="JavaScript:history.go(-1)"><img src="arrowblueleft.gif" 
alt="Back"></a>

Closing a Window with JavaScript

Many users would be perplexed by a window that had no toolbars or menubar - how do they get rid of it? Click the close button of course! But they are already confused and have forgotten about it, and what if you've opened the window fullscreen and there isn't a close button? Help them!

Make your pages user-friendly and give the user an easy way to close the window. Click the link below to open a window, then close it using the link I've put on the page...

This link will open in a new window without toolbars.

Here's the code used to close the window...

<a href=javascript:window.close()>close this window</a>

It's a standard JavaScript function. Nice and simple! If you want to find out how I made the pop-up window read my article on creating new windows with JavaScript.