add to cart divaGPS Standalone version: How-To PC/Mac  DWMX-DWCS4  $29.00

Here we will show you the easy steps needed to add divaGPS to your site. These instructions are NOT needed at all for the Dreamweaver version, as most of this is done for you automatically in that version. Instead, this page is for users of the Standalone version only.

The zip file you receive

First thing is to find "divaGPS-SA_nnn.zip" which we sent you, and unzip its diva/ folder right into the root folder of your website. Also included in the zip file is:

  • a pdf document with complete step-by-step instructions for adding divaGPS to your site
  • the divaGPS-SA_head.txt file described below
  • a readme file.

divaGPS can be added to most any sort of non-Flash menu, or to any sort of wrapper around your menu(s). You need only be sure that you have added an ID to each menu or wrapper. (If you are adding divaGPS to a page with image-based menus having javascript rollovers, then the suffixes used for the rollover images must begin with a delimiter, like an underscore or a hyphen, e.g. _f2 or -f3.)

How to add IDs to HTML elements? Simply add a unique value like this example for an unordered list: <ul id="uniqueID">

IDs must follow a few rules: they may begin only with an alphabetic character, followed by alphanumerics, colons and hyphens, and as mentioned above, must be unique to that particular document.

See Advantages of Using Include Files for divaGPS Head scripts and for Menus.

Highlight the current menu item: the markup

Let me start by saying what you do not have to do: You do not need to add any window.on load, body tag onload, etc, events for divaGPS - we built that functionality right in.

And now, the steps you do take:

In the zip file you receive when you buy divaGPS, you will find a link to complete step-by-step instructions (which includes a pdf link) explaining in non-geek language exactly how to:

  • Copy/paste the contents of the file "divaGPS-SA_head.txt" (also found in the zip file you get.) into the Head of your page or into an Include file.
  • Make edits on one line of that pasted text.
  • Create the CSS rules that style the menu highlighting
  • Optionally prevent a particular menu item from highlighting if you wish.

About parent highlighting

A really powerful feature of divaGPS is that not only will it automatically highlight the current menu item, but it can also highlight any Parent menu items. This will give users a bright beacon to let them know just where they are on your site. Watch the Parent Highlighting Video now. (You may also download the css we used for the Spry menus in the Video.)

We offer several distinct types of "Parent menu items," with a simple option, and a more complex one.

With the "In multilevel menu" option (new as of v1.1.4,) multilevel menus that are based on ordered or unordered lists (which includes Spry menus) will highlight parent items determined simply by their location in the menu hierarchy. Parent items are calculated by divaGPS on the basis of where they are in the menu, and ignore the file/folder structure in the other definitions described below. This new option makes adding Parent highlighting dead-simple for multilevel menus. If your menu(s) are css-styled lists, simply enter the numeral 10 for this parameter and you are good to go.

More advanced, and correspondingly more difficult to explain, is the "By file path" option. To employ this sort of Parent highlighting, your site must have a Folder/File structure that match up with one of several definitions. Choose this option only if your menus are NOT based on ordered or unordered lists, or if you have several separate menus, with current menu items in one menu and their parents in another menu.

See these advanced Definitions

The instructions you receive when you purchase divaGPS describe these definitions in a bit more detail.

Upload the Files

When you're ready, remember to upload to your server:

  • Your web pages.
  • The folder /diva/ with its contents. These are static files, so only need to be uploaded once.

And that's it!

We think you'll be truly impressed with how many hours of work divaGPS will save you, easing both development stage and the ongoing maintenance of your sites.