Mini JavaScripts

A collection of small one-line scripts: create back/forward buttons, open pop-up windows, and more.
Last updated: May 31, 2007

This page includes a bunch of short, one-line scripts you can add to your site easily.

 

Adding a Back button

A nice little script which functions in the same way as your browser's back button. I guess it seems pretty pointless, but it's useful on pages with no or very few links on them. Many users seem to get confused easily, and with no instruction that they are at a dead end, they can easily get lost. Adding a back link tells them they need to go back to the previous page to view the next piece of content. Here's the code:

<a href="javascript:history.go(-1)">BACK LINK</a>

The number is brackets is the position is history to go relating to where the visitor is now. So -1 takes them back one page, -2 would take them back two pages and 1 would take them forward one step in history. It's worth noting here that the link will only function if it is possible to execute - if there are no pages backward/forward in history then nothing will happen.

Since this code is just inside an <a> tag, you can add anything instead of BACK LINK, such as an image if desired.

View demo

 

Making a Pop-Up Window

Making a pop-up window is actually quite simple, however nearly every site gets it wrong. The function in question is window.open, which takes three parameters:

1. URL: The URL of the page to open inside the popup.
2. Name: A name you want to give to the window. This is unimportant at this basic level - this parameter is used to refer to the window from another.
3. Features: A comma-separated list of features that the window will have. Setting them to yes turns them on, setting them to no turns them off. You do not need to specify every attribute here unless you want it turned on, as the default is off. The table below describes them all.

name	values	default	description	notes
width	length in pixels	N/A	the width of the window	If not specified, the window will be the width and height of an un-maximized (or "restored") window in IE/FF or maximized tab/window in Opera
height			the height of the window
toolbar	yes, no	no	the main toolbar, which has the back/forward buttons, stop, home, history etc.	As a security measure Opera always displays a minimized toolbar in pop-ups that can be expanded upon clicking (so that you can always find the URL of the current page). Thus this option has no effect. Both Opera and Firefox combine the toolbar and location bar into one. This option that toggles it for Firefox.
location	yes, no	no	the address bar, displaying the location of the current page	Although Firefox does not normally have a separate location bar, this option still works; it displays a read-only location field. If both the toolbar and location are specified, the standard toolbar is displayed (i.e. there is one location field, not two).
directories	yes, no	no	the "Links" bar (a.k.a. "Bookmarks Toolbar" or "Personal bar" which displays your Favorites on the toolbar	In Firefox this will only display if the user has turned the toolbar on on normal windows. Not supported in Opera since by default pop-ups open in new tabs, so this toolbar is always visible (if turned on).
status	yes, no	no	the bar at the bottom, which usually shows the address of a link you hover your mouse over, amongst other things	Not supported in Firefox or Opera: in Firefox the status bar is always on; in Opera the status bar is never displayed.
menubar	yes, no	no	the menu bar, surprisingly enough - the one with File/Edit/View etc.	Not supported in Opera since by default pop-ups open in new tabs, so this toolbar is always visible (if turned on).
scrollbars	yes, no	no	yep, you've guessed it...the scrollbar which lets you scroll down if the page if it's too long	If set to no, the user can still scroll the page in other ways: In IE, the user can select text and drag downward to scroll. In Firefox, the user can use the scroll keys (arrow keys or page up/down keys) In Opera, the user can use the mouse wheel to scroll or either of the two methods above.
resizeable	yes, no	no	determines whether you are allowed to resize the window or not	Not supported in Opera; window is always resizable
left	length in pixels	N/A	sets the position of the window (top-left corner) relative to the left of the screen	Not supported by old Netscape browsers; you can include screenX in addition to left and screenY in addition to top. Since Opera uses tabs by default, the position specified is relative to the top-left of the browsers "tab area" (which includes the address bar).
top			sets the position of the window (top-left corner) relative to the top of the screen

Here is how it is usually done. This incorrect example will open page.html in a new resizable window of size 300 by 450 pixels, with the toolbar, location bar and scrollbars visible. We use the onclick attribute for the window.open function in contrast to the back button above because using the href attribute creates a link to an object, which causes the browser to forward to a page simply saying [object] (or something similar). This will obviously be confusing for users once they have closed the popup window.

<a href="#" onclick="window.open('page.html', 'window', 'toolbar=yes, location=yes, scrollbars=yes, resizable=yes, width=300, height=450')">the link</a>

View Demo

Although this will work in most browsers, it is incorrect because the link destination is illegal. Furthermore, many browsers will interpret the # as an anchor link to the top of the page. A better solution is to replace the # with a null Javascript link:

<a href="javascript:void(0)" onclick="window.open('page.html', 'window', 'toolbar=yes, location=yes, scrollbars=yes, resizable=yes, width=300, height=450')">the link</a>

View Demo

Unfortunately, this solution is still not perfect. These days there are a number of users who browse with Javascript turned off, and a small percentage who use browsers that do not support Javascript. In these cases, nothing will happen when they click the link. In order to provide everyone with access to the content of the pop-up, we must provide the URL for them to open. However, this appears to take us back to square one - if we put a link in the href attribute, then browsers will forward to the URL in the main window as well as opening the pop-up.

We can get around this by stopping the browser doing anything after the pop-up is open. We set a return value of false in the onclick attribute, and copy the URL to the href attribute of the A tag:

<a href="page.html" onclick="window.open('page.html', 'window', 'scrollbars=yes, resizable=yes, width=300, height=450'); return false;">the link</a>

View Demo

 

Closing a window

This is another feature that may seem a little useless; but for all the same reasons you may want a back link, you may want a close window link. Here's the code:

<a href="javascript:window.close()">CLOSE LINK</a>

View demo

As with the previous examples this is part of an <a> tag and so you can put any linkable object (such as an image) in place of the text. If the window you're trying to close is not one that was opened with Javascript (i.e. using the previous code) then the user will normally get a confirmation alert.