NOTE: Netscape Communicator 4.0 (or higher) is required.

The JavaScript Toolbar is a draggable toolbar component, similar to button bars which can be found in other applications. It could be used for a web application to access most used features, or on a corporate intranet to provide easy access to commonly accessed web pages.

On start-up the JavaScript Toolbar is displayed inside the browser window. The user can click on the right border of the toolbar and drag it anywhere on the screen, even outside the browser window. The toolbar will then be displayed in its own window which will always be on top of other windows. The user can click on the toolbar buttons to load important web pages at any time. This example demonstrates the use of borderless windows and signed scripts, two new features in Netscape Communicator 4.0.

Click on this link to test the first example:

JavaScript Toolbar - example 1

Since this example uses signed scripts you will get a security window on start-up asking for additional privileges. You have to push the 'Grant' button in order to test this example.

This script makes use of the following files:

• example1.htm
• cont.htm
• toolbar.js
• toolbar.jar - the archive file containing toolbar.js and the signatures

The main code is in the toolbar.js file which contains the implementation of the Toolbar object. The Toolbar object defines the following methods:

• Toolbar(id, tb, posX, posY, width, height) - Constructor
• show(state) - Show toolbar either inside (state==true) or outside (state==false) the window
• hide(state) - Hide toolbar inside the window
• showDropzone() - Show dropzone inside window
• hideDropzone() - Hide dropzone
• moveTo(x, y, state) - Move toolbar to certain position - either inside or outside the window
• moveIn() - Move toolbar out of the window
• moveOut() - Move toolbar inside the window
• changeState() - Move toobar inside or outside of window depending on the current state
• isInside() - Check if toolbar is inside the window
• startDrag(e) - Event handler for mousedown event
• drag(e) - Event handler for 'drag' event
• endDrag(e) - Event handler for mouseup event

The example1.htm file creates a new instance of the Toolbar object. It also defines the layers which are needed for displaying the toolbar inside the browser window.

The show() method of the Toolbar object is responsible for creating the borderless window in which the toolbar is displayed if the user moved it out of the browser window. In this method you will find the following line:

netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");

This is needed in order to request additional privileges from the user. It is a security restriction that not every script can create borderless windows. The same is true for windows which make use of the alwaysRaised property or windows which are smaller than 100 x 100 pixels. As we need these features in our script we need to use signed scripts. You can read more about signed script in Netscape's JavaScript Guide. Take this link to get directly to the Using Signed Scripts in Navigator 4.0 section.

If you look at the html-files you will see the ID-attribute in several tags. This is needed for signing inline JavaScript code.

The cont.htm file defines what the toolbar should look like. It contains several <img> tags and the JavaScript code which will be executed if the user clicks on one of the buttons.

IF YOU WANT TO MAKE CHANGES TO THIS SCRIPT...

If you make changes to these files (for example if you want to change the buttons on the toolbar) the digital signature will be invalid. This means you will have to sign it yourself after you have done your changes. For this process you will need a digital certificate. If you do not have a certificate, but still want to play around with the script you can enable codebase principals in your Netscape browser. Take this link to read about how to do this: Codebase Principals

If you have enabled codebase principals you will be able to change this script locally on your machine. But if you want to distribute it you should sign it with the help of a digital certificate.

ANOTHER EXAMPLE:

The following example shows you how you can use form elements inside the toolbar:

JavaScript Toolbar - example 2

This example makes use of the following files:

• example2.htm
• cont2.htm
• toolbar.js (same as in example1.htm)
• toolbar.jar - the archive file containing toolbar.js and the signatures

• The first time you load the toolbar, it will not get the first 'drag' event, i.e. you will have to try twice if you want to drag the toolbar outside the window the very first time after you started the browser.
• Due to a problem on the Mac with the event capturing while the toolbar is outside of the browser window, the toolbar will not move during the user holds down the mouse button if this example is run on a Mac. It was necessary to add a variable platform for this special treatment of the Mac platform.
• If the toolbar is used in combination with frames the dropzone might not have the right coordinates.

• Download the zip file here.

---

Related Readings:

• Frequently Asked Questions: Find the answers to your questions on Internet technologies.
• Documentation: A library of technical information.
• Developer Central: Collections of developer resources organized by Internet technology areas.

Any sample code included above is provided for your use on an "AS IS" basis, under the Netscape License Agreement - Terms of Use