home / documentation / setup / installing the scripts on your server

Installing the Scripts on your Server

Before you can use HierMenus on your Web pages, you must install the HierMenus scripts on your server. While you are free to install the scripts anywhere you like (including within the same directory the HTML pages themselves are on), we recommend creating a single, new directory within your Web document root, with multiple sub-directories to hold each of the unique types of files provided in the HierMenus distribution file.

Before we get started with the creation of directories on your server, however, let's review the contents of the HierMenus distribution file itself. The HierMenus distribution file contains the following directories:

• In the top level directory hm is one file (README.txt) and four subdirectories.
• The scripts subdirectory itself contains two subdirectories (verbose and optimized) containing the actual HierMenus execution scripts. We'll discuss the differences between these two code sets a little later on this page.
• The images subdirectory contains all the preformed "more" images, the triangular images that are displayed indicating that a child menu exists for a menu item or that a scrollable menu has more items above or below those that are currently visible.
• The configs directory contains sample configuration files that you may wish to review in step 2. They should not be uploaded as is to your Web server.
• The samples directory contains a few sample HTML pages with actual working menus that you may wish to review in step 3. Again, these sample pages should not be uploaded as is to your Web server.

Of course, once you've unpacked the contents of your HierMenus distribution file you should tuck the original zip file away for safe keeping, in case you need to recover the files at a later time.

Create Directories

You should create three new directories on your Web server: one for the HierMenus scripts, one for the HierMenus images, and one for the HierMenus configuration files. To keep your organization simple, we recommend creating one new, top level directory called hm and then create subdirectories beneath this top level directory called scripts, configs, and images. These are only suggestions; you are, of course, welcome to create the scripts anywhere you choose, and you may also elect to simply create one directory and load all the images, scripts, and configuration files into it. You'll tell HierMenus what you named your directories a little later on this page, when you configure the HM_Loader.js file.

Upload Files

With your new Web server directories in place, it's time to upload the HierMenus files into their appropriate locations.

Upload the contents of the images directory in your zip distribution file to the HierMenus images directory you created on your Web server. These are all binary files, so be sure to upload them as such. In fact, these are the only files in the HierMenus distribution that should be uploaded as binary files; all of the scripts and configuration files should be uploaded as text files.

Leave the contents of your HierMenus configs directory on your Web server empty for now. The examples provided with the HierMenus distribution are fine as starting points, but you'll be creating a unique configuration file suitable for your own use in step 2 of these instructions.

Upload the contents of either the verbose or the optimized directory in your zip distribution to the HierMenus scripts directory on your Web server. Here you have a choice. In brief, the space optimized code set is smaller (and therefore requires that your site visitors download less information when they hit your pages), and the verbose code set is larger but much easier to read and work with if you will be doing any tinkering with the script. For a more detailed explanation pertaining to the space optimized code set and when you may or may not want to use it, have a look at this mini-tutorial:

The Space Optimized Code Set

Alternately, you could install both sets of code into separate directories on your Web server, and then decide at a later time which code set to actually point to when you apply the HierMenus code to your own pages. If you do this, just be sure to use separate directories for the two code sets and be sure you keep track of which directory has which set.

Configuring HM_Loader.js

One final step remains in our script installation: configuring and uploading your HM_Loader.js. In actuality, if you followed all the steps above you've already uploaded a copy of HM_Loader.js to your server, it was included in the scripts directory of your distribution package. To keep these steps simpler and grouped together we skipped the HM_Loader.js configuration above, so we'll take care of that simple--but very, very important--detail now.

When configuring your HM_Loader.js file, be sure to configure the version that exists in the verbose or optimized directory, depending on which set you uploaded to your server earlier. Do not mix up the HM_Loader.js files between the verbose and optimized code sets. They are not interchangeable!

Within the HM_Loader.js file, there are six variables that must be adjusted. All of them reside within a section of the script labeled "Configuration Block," which looks like this in the code:

// Configuration block. The following 6 variables should be configured 
// to match your default preferences. You can then override the settings
// on a page by page basis by providing values for the variables in any
// JavaScript segment that is loaded BEFORE this one. These variables 
// are the ONLY variables you should alter in this file. 

if(typeof(window.HM_ScriptDir)=="undefined")
	HM_ScriptDir = "";
if(typeof(window.HM_ImageDir)=="undefined")
	HM_ImageDir = "";
if(typeof(window.HM_ConfigDir)=="undefined")
	HM_ConfigDir = "";
if(typeof(window.HM_ConfigFiles)=="undefined")
	HM_ConfigFiles = "HM_Config.js";
if(typeof(window.HM_ConfigType)=="undefined")
	HM_ConfigType = "default";
if(typeof(window.HM_FramesEnabled)!="boolean")
	HM_FramesEnabled = false;

As displayed above, the six variables that you must configure provide key, pre-configuration information to HierMenus about the location and execution of the HierMenus scripts, images, and configurations on your Web server. Detailed information pertaining to each of the six parameters is available on their reference page entries:

HM_ConfigDir
HM_ConfigFiles
HM_ConfigType
HM_FramesEnabled
HM_ImageDir
HM_ScriptDir

But in brief:

• HM_ScriptDir is the location of the HierMenus scripts; in our recommended directory structure from above, that's /hm/scripts/
• HM_ConfigDir is the location of the HierMenus configuration files; in our recommended directory structure from above, that's /hm/configs/
• HM_ImageDir is the location of the HierMenus "more" image files; in our recommended directory structure from above, that's /hm/images/
• HM_ConfigFiles is the actual name(s) of our unique configuration files. We haven't created these yet, but let's assume the name will be HM_Config.js, which is what we'll set this variable to (and the name we intend to recommend when we create a configuration file in step 2 of our setup instructions).
• HM_ConfigType can be used to utilize HM4/5 style arrays with HM6 (though we don't recommend it). See the Advanced Options in the setup instructions index for further details. For purposes of our discussion, we'll assume our configuration file will be a standard HM6 configuration file, and this parameter will therefore be default.
• HM_FramesEnabled indicates whether we'll be implementing a cross-frames site with the standard cross-frames methodology. More on that as we go, but for now we'll assume a typical stand alone site, in which case this parameter should be false.

Adding it all up, here's what our resulting configuration block should look like when we're done. Open up the HM_Loader.js file in any standard text editor (such as notepad in Windows) and alter the configuration block as such:

// Configuration block. The following 6 variables should be configured 
// to match your default preferences. You can then override the settings
// on a page by page basis by providing values for the variables in any
// JavaScript segment that is loaded BEFORE this one. These variables 
// are the ONLY variables you should alter in this file. 

if(typeof(window.HM_ScriptDir)=="undefined")
	HM_ScriptDir = "/hm/scripts/";
if(typeof(window.HM_ImageDir)=="undefined")
	HM_ImageDir = "/hm/images/";
if(typeof(window.HM_ConfigDir)=="undefined")
	HM_ConfigDir = "/hm/configs/";
if(typeof(window.HM_ConfigFiles)=="undefined")
	HM_ConfigFiles = "HM_Config.js";
if(typeof(window.HM_ConfigType)=="undefined")
	HM_ConfigType = "default";
if(typeof(window.HM_FramesEnabled)!="boolean")
	HM_FramesEnabled = false;

Save off the changes you just modified, and (re) upload the new HM_Loader.js to the HierMenus scripts directory on your Web server. If you decided to install both the verbose and optimized scripts on your server (so you can decide which to use later), then be sure to alter and upload the two HM_Loader.js files separately.

Your script is now installed and ready to use on your site. But before you can display any menus on any of your pages, you must design and upload a valid HierMenus version 6 configuration file. This is the topic of step 2 of our setup instructions.