The Dreamweaver Manual - JavaScript Special

Have you ever asked yourself why you, in order to visit your favorite sites, always have to click on dozens of Bookmarks and Favorites? Then I've got something nice for you: Using JavaScript you can fast and easily create a form doing that annoying task for you. The whole thing should work with any browser capable of JavaScript interpretation but as it seems Opera is still unable to handle the code in its current version 5.02. However, MS Internet Explorer 5.5, Netscape Communicator 4.76, Mozilla 0.7 and current Mozilla Nightly Builds were tested successfully. Reports about further working constellations, but bug reports and similar things are appreciated, too - just test the form below and

tell me about your experiences!

But now over to the code. The advantage of the method used is that the form can easily be extended without having to change much - just one checkbox for each site to be opened in a new window. Apart from the obligatory "Open" button (submit) and the "Default" button (reset) for resetting the form to defaults, I added a "Clear" button (button) deselecting all checkboxes in one go.

Example form:

The actual script in the HTML header (HEAD)

The actual script consists of two functions: The first serves to opening the windows and the second to deselecting all checkboxes. The script is independent from the number of checkboxes in the form.

Concerning the JavaScript command open() used here I have to mention that its second parameter specifies the name of the window, i.e. using this name which consists of "win" and the internal number of the respective form checkbox (that means for example "win1" for the sixth checkbox) you can access this window; for that pupose the window name has to be determined as a value for target as in links of the form

<a href="page.html"
  target="window_name">

<script language="JavaScript" type="text/javascript">
<!--
  function formeval() {
  var max = document.openlist.length;
  for (var i=0;i<max;i++) {
    if (document.openlist.elements[i].type == "checkbox" && document.openlist.elements[i].checked)
      open(document.openlist.elements[i].value,"win"+i); // target is e.g. "win1"
  }
}

function clearform() {
  var max = document.openlist.length;
  for (var i=0;i<max;i++) {
    document.openlist.elements[i].checked=0;
  }
}
//-->
</script>

The form in the HTML body (BODY)

The individual form elements can be placed, for example, in a table. (CSS-) layers on the other hand seem really to trouble Netscape Communicator, thus you should rather do without using them for positioning of the form (other elements of the page are not affected by that).

Instead of the checkboxes in the following code you can now insert as many own checkboxes as you want. The only thing that matters is the value determining the URL (in order to be able to use any address, "http://" is not being added!); practically you should put a description of some value of recognition before or behind each checkbox. If the respective checkbox shall be selected by default the "checked" attribute has to be added to the respective checkbox tag (like in the first case of the example).

A final annotation: The connection between the form and the script is established using the form name. It would also be possible to work without the name by refering to the form in the script using its internal number (if it's the only one in the page it follows: openlist=forms[0]).

In the <BODY> section you can embed the following code at almost any position:

<form name="openlist" target="_self">
  <input type="checkbox" value="http://www.slashdot.de/" checked> Slashdot
  <input type="checkbox" value="http://www.the-ctrl-alt-del.com/"> The Ctrl-Alt-Del
  <input type="submit" value="Open!" onClick="formeval()">
  <input type="reset" value="Default">
  <input type="button" value="Clear" onClick="clearform()">
</form>

If there should be any further questions or uncertainties I am willing to find a solution. Write me a mail!

jens.hatlak.de
Atari
Dreamweaver Manual		Start
Acronyms		Introduction
		Tips
Diese Seite in deutsch		Windows
Diese Seite in deutsch		Half-static tables
		JavaScript special

JavaScript Special

Open a list of sites in a new window for each

Example form:

The actual script in the HTML header (HEAD)

The form in the HTML body (BODY)