Mini JavaScripts
Published: 6 April 2005 • Updated: 31 May 2007 • Tags: javascript
This page includes a bunch of short, one-line scripts you can add to your site easily. Create back & forward buttons, open pop-up windows, and more.
Adding a Back/Forward 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.
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:
- URL: The URL of the page to open inside the popup.
- Name: A name you want to give to the window. This is not too important at this basic level - this parameter is used to refer to the window from another.
- 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 |
length in pixels | N/A | the height of the window | Same as above |
toolbar |
yes, no | no | the main toolbar | The one with 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 | 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 on the toolbar 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 status bar | 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 | 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 | the scrollbar | The bar on the right 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 | whether you are allowed to resize the window | Not supported in Opera; window is always resizable |
left |
length in pixels | N/A | 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 |
length in pixels | N/A | the position of the window (top-left corner) | Relative to the top of the screen. Same as above |
Here is how it is usually done - incorrectly! This code will open page.html in a new resizable window of size 500 by 350 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', 'popup', 'toolbar=yes, location=yes, scrollbars=yes, resizable=yes, width=500, height=350')">the link</a>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. Try it out:
One option, which is a little better, is to replace the # with a void Javascript link:
<a href="javascript:void(0)" onclick="window.open('page.html', 'popup', 'toolbar=yes, location=yes, scrollbars=yes, resizable=yes, width=500, height=350')">the link</a>Unfortunately, this solution is still not perfect. There are a number of users who browse with Javascript turned off, and a small percentage who use browsers that do not support Javascript. Not to mention, sometimes you may make a mistake in your code and break the JS.
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 add a return value of false in the onclick attribute, and use this.href to refer to the link URL (to avoid repeating the same URL twice):
<a href="page.html" onclick="window.open(this.href, 'popup', 'scrollbars=yes, resizable=yes, width=500, height=350'); return false;">the link</a>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 your opoup window to have a close link. Here’s the code:
<a href="javascript:window.close()">CLOSE LINK</a>The above demo includes an example of the close link. 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.