Menu tabs: iTab Pro QuickNavBar Type I: Configuring DHTML tab settings

1. About tabs

Most of the iTab applets are designed to do more than just look like tabs. They really are tabs. If they just looked like tabs, switching the tabs would do nothing to the content of the page below (unless you additionally attached hyperlinks to the tabs). If they are tabs, they are programmatically connected to superimposed page displays, and the selected display automatically moves to the top of the pile when you select its tab.

Note: the only iTab applet which is NOT programmatically attached to a pile of superimposed page displays is iTab Pro QuickNavBar Type II. The information on this page does not apply to iTab Pro QuickNavBar Type II.

The remaining applets use a DHTML extension to the applet to both set up and operate the superimposed page displays. This extension can be found in a JS file delivered with the applet. The delivery package also contains a complete template for setting up the superimposed tab-driven pages - this template consists of a number of HTML files as well as the JS file and applet. We recommend you develop starting from this template.

2. How to set up the tabs

The applet is supplied with a .JS file which contains the code necessary for setting up tabs in a way in which the applet can then switch them. You can open this JS file in a text editor. It is open source code. It begins with an explanation of how it should be used. As there are slightly different JS files in circulation, we recommend you read the information in the JS file very carefully.

The applet is also supplied with a template for implementation (both in the trial and release versions). We suggest strongly that you use this template, as otherwise setting up your tabs may be difficult.

Include the JS file in your HTML page header

Insert the following between the HEAD tags. You may need to change the filename of the JS file to the name of the file in the package supplied to you.

<script language="Javascript" src=itbp.js></script>
Implement the JS file just after the applet

Insert the following immediately after the APPLET tag. (And don't put anything else into the main page except the applet and this bit).
<script>writeTabs();</script>
Set the numbers of tabs and the applet height

Load the JS file into a simple text editor (such as Windows Notepad) and follow the instructions in the file for setting the number of tabs and the height of the applet.
Name your pages appropriately

The pages initially loaded into each of the tabs must have the names page0.html, page1.html, page2.html, page3.html, etc. You should have as many of these pages as there are tabs. Create such pages and place any content in them you like. Or rename existing pages from your website. Place them in the same directory as the HTML page containing the applet and the JS file. From version 1.5, iTab Pro has a rewritten JS file which shows you where to edit the JS file to display pages with your own naming conventions.
Where the applet loads hyperlinks

If you have done everything correctly, (1) a click on a tab will automatically switch the pages below the applet, and (2) a click on any submenu item will load any hyperlinked page into the currently active tab display and nowhere else.
Customising the JS file

If you make changes to the JS file, all support entitlement on the applet is lost. While you may make changes if you consider yourself qualified, you are on your own if you do this.
Combining this with your own scripts

If you are an advanced web programmer, you website may already be full of scripts, layers and oddities. It is possible that these may interfere with our script for driving the tabs. Note that the applet assumes that the tabs have been set up by an unchanged JS file. Under the licence agreement, it is you who must reprogramme your scripts so they don't interfere with ours. Not the other way round. This is because the applet is bought "off-the-shelf" rather than being programmed specifically for your website (and this is also why the applet is such a good price for the work that has gone into it).

© Image Intelligence Software Ltd. 1997-2003
Legal information and privacy policy