To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

How the Extensions Work

This section will describe how each extension works in relation to the Jazz DesignPack™. Before you make any modifications to this site it is important to have an understanding of the role each of the extensions plays.

Snap Layers by PVII

By now you probably have noticed that the menu system in Jazz is in the center of the page, and that the popup layers all align perfectly with the menu regardless of how the browser window is sized. Heretofore, pop-up menu systems were always tied to the left and/or top of the page so that the pop-up layers would be positioned correctly. Normally, layers would be positioned on the page and will not move as the browser window is resized, so there is no way to position a layer that properly aligns to other elements of the page because you do not know where those elements will be on the rendered page... until now.

Snap allows you to position one or more layers relative to any HTML element on the page, once you supply an id (name) for that element. We call this element an "anchor". Once we have defined an anchor we can use Snap to position a layer relative to the position of the anchor. The most commonly used anchor is an image, and in Jazz, each of the menu buttons is an anchor image. Each of these images has an onMouseOver event that triggers an instance of Snap Layers. The Snap script then calculates the position of the image on the page and moves the pop-up layer relative to that position. We can also tell Snap to place the layer a set amount of pixels away from the anchor image, this is called the "offset" amount. The "offset" can be set to position the layer in both horizontal and vertical directions from the anchor.

Images aren't the only anchors that Snap can use, in fact, in modern browsers (IE5+ and N6) you can use almost any HTML element as an anchor, as long as you define an id name for that element's tag. Netscape4, however, will only allow us to use images or other layers as anchors, so in Jazz, we use only images as anchors.

When using Snap to position the pop-up layers with onMouseOver and onMouseOut events we really don't have to worry about repositioning the layers in case the browser window is resized because the layers are only visible when the user mouses over a menu button and the layer is "Snapped" on each mouseover. Jazz also contains several "Rollup" pop-ups, like the Spotlight buttons. These are set to onClick, and will remain visible until the user clicks the X button to close it. If the user resizes the browser window while these pop-ups are visible we will need a way to quickly reposition the pop-up to align it with the spotlight (anchor) image, so we place an instance of Snap on the onResize event to move the layers to the correct positions (actually, we use another "trick", the runEm extension to do this).

We'll show you how to use Snap in step-by-step fashion in the Menu Modifications section of the User Guide and, of course, the Help button in the extension itself will provide complete details for each of the interface items.

AutoLayers by PVII

Well, we eventually got tired of repeatedly applying vast amounts of show/hide layer events to each and every menu button... so we designed AutoLayers.

In Jazz, each pop up layer, for both the menu and the rollups, start out as "hidden", not visible when the page loads. When the user mouses over the first menu button we trigger an AutoLayer event to show the specified layer; make it "visible". AutoLayers will remember this layer and will automatically hide it the next time AutoLayers is run. When we mouse over the second menu button we tell AutoLayers to show the second popup layer, and AutoLayers will automatically hide the first layer. Next, we mouse over the third menu button, AutoLayers will show the third pop-up layer and hide the first two. So, all we ever really do is tell AutoLayers what to show, and it will take care of the hiding automatically... saves a lot of code and time.

There are cases when we want to hide all of the layers, like when we mouse off the menu entirely. AutoLayers makes this even easier, since all we have to do is apply an "empty" instance of AutoLayers... telling AutoLayers to show nothing also means that it will hide every other layer!

In Jazz, we use AutoLayers to control all of the menu pop-up layers as well as the rollup layers. However, we don't want the rollup layers to hide every time we mouse over a menu button, the rollup layers should remain visible until the user clicks the X button. Fortunately, AutoLayers has a feature that will allow us to use any of ten separate "layer sets". We have assigned the menu layers to belong to "set one", so that any time the menu buttons are activated all of the layers in "set one" will be affected. The Spotlight rollup uses an AutoLayer with "set two", and the In The News rollup uses "set three". In this way, we can use AutoLayers to handle the show/hide of only those layers that belong to that group.

We'll show you how to use AutoLayers in step-by-step fashion in the Menu Modifications section of the User Guide and, of course, the Help button in the extension itself will provide complete details for each of the interface items.

MultiClass Changer by PVII

Jazz is completely driven by style sheets, including the menu rollovers! Each menu button image has a transparent center, allowing the color of the cell background to show though. When the page initially loads each cell is set to a grey background color, using a style name "menucelloff". This style simply applies a grey background color. When the user mouses over the button the cell's background color is changed to black by assigning it the "menucellover" style. When the user mouses away from the menu, we change the style back to gray (set the style back to "menucelloff"). These style changes are easily accomplished with the MultiClass Changer extension.

1. MultiClass by PVII

MultiClass allows us to set up a whole series of style changes all within one event. A mouseover on one of the menu buttons will actually trigger MultiClass to set the background style for all 6 of the menu cells. The cell containing the clicked button will have it's style changed to "menucellover" while the remaining cells will have their style changed to "menucelloff".

We can apply a style change to just about any "named" element on the page. In Jazz, the menu cells have been named by assigning an id. The first menu cell is named "mb1" and is assigned by setting it's id: <td id="mb1">. Once named, the element will appear in the Object List in the MultiClass interface. For each named Object we can simply select the appropriate style from the list of valid styles on the page. In Jazz, the valid styles are all of the custom styles contained in the attached style sheets.

Style changes can be set for other objects on another part of the page. The little square dot on top of the Saxophone image also changes color as the user mouses over the menu buttons. The cell background for this cell is also changed to "menucellover" on each MultiClass event, sort of like a "disjointed rollover". We can also reset all of the background styles by using a MultiClass event to set all of the cells to the "menucelloff" style. We have placed just such an event on the main Jazz image so that when the user mouses over this image all of the menu cells will return to the "menucelloff" style: grey.

2. downClass by PVII

While MultiClass can handle a wide variety of syle change events it will become a bit overwhelming if we want to set a "downstate" color for the detail pages of the site. In Jazz, you may have noticed that when the Artists page opens, the Artist button is set to black, and whenever you mouse over the other buttons all will return to gray except the Artist button, which will insist on staying with the black color. This is the "downstate" button for the Artist page and in the default Jazz pages, is colored black.

The downClass extension is specially designed to work in "concert" with MultiClass to allow us to define the "downstate" class for any number of elements on each page. We simply tell downClass to assign the "menucellover" style to the "mb1" object, which in this case is the cell containing the Artist button.

Here's the good part... now that we have told downClass to set the downstate for the Artist button, MultiClass is smart enough to know that this cell should always be set to that style, regardless of other events that may tell it to change the style. So we can use all of the same MultiClass events we use on any other page without having to re-write or modify those events for the downstate object. What this means is that we can use the very same MultiClass events contained in the Template (or index page) on every other page as well with no modification, and yet still be able to set indiviudal objects to a downstate only for that page.

N4autoHide by PVII

No More MenuClosers! With N4autoHide we can finally say good-bye to all of the "work-arounds" to get Netscape 4 to automatically hide a layer when the user mouses off that layer. Up until now we had to resort to using "timeout tricks" or a rather large closing layer that had to be continually shown and hid with each layer popup.

N4autoHide allows us to select a series of layers that should be part of our pop-up menu system and will then convince Netscape 4 to automatically hide each of these layers when the user mouses off the layer. This saves a huge amount of coding and maintenance. In Jazz, we have added a N4autoHide event to the BODY tag, onLoad, listing each of the menu layers. When the page loads, the script sets up the layers and will handle the hiding onMouseOut automatically.

Modern browsers, IE5+ and N6, will allow us to put events on other tags, like the main <td> tag on the left side of the Jazz page and use an autoLayers event to handle the hiding. Netscape4 doesn't support this so until we no longer need to support it, we can easily use N4autoHide to handle it for us.

ReDoIt by PVII

When a user re-sizes the browser, the visible layers are automatically Snapped into the right positions by using a Snap event attached to the BODY tag, onResize. This works great in IE5+ and NN6, however, it will not work very well in Nestscape 4. This browser requires that we have the MM N4 Resize fix applied to the page, which forces NN4 to reload the page if the browser window is resized. Placing another event, like Snap, onResize, will re-define the resize event in NN4 and prevent it from actually running the Resize Fix... which is neccessary to force the browser to reload the page.

To prevent NN4 from bogging down, we apply a single ReDoIt event on the BODY, onResize event. The script will then intercept the event and automatically trigger the Resize Fix to force NN4 to reload the page. Of course, the script does nothing if you are viewing the page in a browser other than NN4 and will let the rest of the onResize events fire normally.

runEm by PVII

Wouldn't it be nice if we could modify behaviors that are part of a template on a template-driven page? Well, runEm will do just that!

runEm is an extension that allows you to select other, existing JavaScript functions on the page and actually execute them. Why? If we are using a template driven page we cannot modify the events to be fired onLoad because that region is locked by the Template. For example, in Jazz the downstate of each page is set by a downClass event to set the proper cell for the downstate color. Naturally, this will be different for each page so we cannot place this event on the BODY tag. If the event is not on the BODY onLoad event, there is no way to automatically fire the script.

To solve this dilemma, we place a runEm event on the BODY onLoad event of the Template. The runEm event is set to fire a downClass event. We also place an appropriate downClass event on a part of the editable region of the template so that this can be inspected and modified on each page. When the template-driven page first loads, the runEm event will then look for the FIRST instance of downClass on the page. When it finds that instance of downClass, it will read the downClass event arguments and fire the downClass script, which in turn sets the downstate classes for the page. So, we are really using runEm to look for and then run existing events on the page.

Let's save some more time... runEm works really well in Template situations, but can also comes in handy when we have a large number of repetitive events to apply. For example, in Jazz we use a MultiClass event on the Jazz image to change all of the background colors back to the "menucelloff" color. We also need to apply the exact same MultiClass event to the other sides of the menu: the <td> tag to the left of the menu, the image to the right of the menu, and the image and <td> at the bottom of the menu. Rather than applying individual MultiClass events to each of these elements we simply apply runEm, set to find and run the first instance of MultiClass on the page. Now, each of these events will fire the very same event that we applied to the Jazz image! If we ever need to change the MultiClass event, like when we add a new menu item, we only need to modify the single MultiClass event we placed on the Jazz image, the other objects will use runEm to run the now-modified MultiClass event.

N4 Return False Fix

Netscape 4x browsers will display a rather "ugly" hourglass cursor whenever a user clicks on a null link... and we use a lot of null links in Jazz. The unwanted "side-effect" can be cured by applying a "return false" to the end of the onClick event. Our N4 Return False Fix makes this a one click operation. It will scan the entire page and automatically add the "return false" to every <a> and <area> tag it finds. Jazz is delivered with this treatment already applied, so you only need to use it if you create any new null links. You can apply the fix as often as you like, the script will not touch any events that already have the return false applied.

On certain pages you may have text links firing with a onMouseOver and onMouseOut event. The N4 Return False Fix has an Option checkbox to tell the script to create an onClick event and then add the "return false" to these types of null links. This will prevent the hourglass if the user mouses down on the text link.

You can access the N4 Return False Fix from the Commands>Studio VII flyout on the main DW menu.

Access the N4 Return False Fix by choosing Commands - Studio VII - Apply N4 Return False Fix.

IE Link Scrubber

Scrub away those pesky lines around Clicked images in IE4-5 and Netscape6! This Command searches your document for links and applies the Scrubber script directly to each of them. You can apply the Scrubber as many times as you like. Each time you apply it, it will find any "untreated" links and apply the Scrubber script.

The Scrubber will work on Text Links, Image Links and Image Maps. In Jazz, we have already applied the Scrubber to all of the links. You will only need to use this if you create any new links.

Access the IE Link Scrubber by choosing Commands - Studio VII - IE Link Scrubber.

Jazz Objects

From time to time you may want to create new menu flyouts or new rollups. Building these layers and their table constructs from scratch is pretty tedious. To save you time, and to assure that each flyout or rollup will blend seamlessly into the design, we have created the Jazz Objects. With a few clicks you can instantly have a new flyout or rollup on your page. The interface allows you to set some properties as well as selecting which object to insert.

See the Menu Modifications section on Adding a new menu and also the Rolldown layers section on Adding a new rolldown layer for complete step-by-step details on the use of this Object.

Access the Jazz Objects by choosing Insert - P7 DesignPacks - Jazz Objects.