2 x drop down links to new windows

Technorealm. The UK web site design company

Free javascript

[One of a collection of free javascripts from www.technorealm.co.uk]

The following shows 2 types of dropdown box. When you click a link in box 1, the linked page is opened in an uncontrolled window, using your browsers default settings. When you click a link in box 2, the linked page is opened in a fully controlled window. You specify the settings in the controlling javascript function.

Dropdown Box 1

To use this, copy it straight to wherever you want it in your page. You can add as many links as you want using the same <OPTION></OPTION> format. 

<form name="form1">
    <select name="favs1" onChange="window.open(this.options[this.selectedIndex].value)">
    <option selected>Favourites</option>
    <option>-------------------</option>
    <option value="http://www.yahoo.com">Yahoo!</option>
    <option value="http://www.altavista.com">Altavista</option>
    </select>
</form>

Dropdown Box 2

To use this type, copy the following javascript to your pages <HEAD> tags 

<SCRIPT language="Javascript">
function spawnWin(options) {
 var url = options[options.selectedIndex].value;
 var winArgs = "top=50,left=50,toolbar=no,location=no,directories=no,
 status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no," ;
  winArgs+= "width=400,height=300";
  var howdy = open(url,"newlinks",winArgs);
 }
</SCRIPT>

Here I've turned all browser controls off i.e. status bar, menubar, scrollbars etc. I've also forced the window position to 50 pixels in from the left and 50 pixels down. Lastly I've specified the windows width and height. Change all values to suit yourself.

Now build your form as follows, adding as many links as you like: 


<form name="form2">
        <SELECT NAME="newlinks" onChange="spawnWin(this.options)">
        <option selected>Favourites</option>
        <option>------------------</option>
        <option value="http://www.yahoo.com">Yahoo!</option>
        <option value="http://www.altavista.com">Altavista</option>
        </select>
   </form>

www.technorealm.co.uk UK Web site design and graphics. A free resources site!