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

 

JavaScript Special

Open a list of sites in a new window for each

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 [Mail] 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:

Slashdot
The Ctrl-Alt-Del

 

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">.

In the <HEAD> section you have to embed the following script:

<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!

 

Valid HTML 4.0!
Jens Hatlak
February 3, 2001