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.
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:
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.
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:
|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:
|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>
onclick="window.open('page.html', 'window', 'toolbar=yes,
location=yes, scrollbars=yes, resizable=yes, width=300,
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
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: