TechNote (Archived)

How to open Pop-up Menus in another frame panel

Many users have developed creative ways to enhance the Pop-up Menu feature in Fireworks 4. The most recent innovation is the ability to have Pop-up Menus appear in another frame in a frameset. Because Pop-up Menus are generated in DHTML layers, the menus will not normally appear across frame borders in a frameset. Making the Pop-up Menus appear in a different frame basically involves moving JavaScript from the original frame source document to another frame source document, renaming objects to match the target page, and setting the Pop-up menu position.

This step-by-step tutorial is designed for advanced users who are already familiar with the following basic procedures:

	Creating Pop-up Menus in Fireworks For instructions on how to create Pop-up Menus, you can, in Fireworks, choose Help > Lessons and select Lesson 5: Creating a Pop-up Menu (see Example 1).
	Creating and using framesets in Dreamweaver See Frame Fundamentals and Creating and saving a frameset (TechNote 15130) for basic instructional material on frames and framesets.
	Copying and pasting HTML source code in Dreamweaver The cut, copy, paste and rewrite instructions below all occur to JavaScript code in the Dreamweaver document's source code. To make these kinds of changes to the source code, you will have to switch the keyboard focus to Code view. If you choose View > Code and Design, you will have both the Code and Design window panes visible at the same time (very convenient!).

Also, the following terms are used in this TechNote:

	Pop-up Menu trigger This TechNote uses the term "trigger" to refer to whatever object is activating the Pop-up Menu. Examples of triggers include hot spots (image maps), linked images, or linked rollover images. A trigger could also be a button in a Nav Bar.
	Frame source code The frames in a frameset are independent HTML documents. The frameset itself is also an independent HTML document (its purposes is to organize the arrangement of the frame documents). This TechNote will use the term "frame source code" to refer to the source code for the HTML page populating the a particular frame in the frameset. To see the source code of a frame document in a frameset, click on the frame in the Document window and then switch the focus to Code view. (To make the frame borders visible in the frameset, choose View > Visual Aids > Frame Borders.)
	Code view Whether you are examining the source code in Code view or in the Code inspector, this TechNote will refer to Code view.

Configuring Pop-up Menus to appear across frames in a frameset
The steps below outline the process of transferring the placement of a Pop-up Menu from the "left-side" of a two-column frameset to the right side, as demonstrated in Example 2.These principles will apply to the frameset layout of your choice.

In Fireworks

1	Creating the Pop-up Menu In Fireworks create an image containing one or more hotspots, slices or buttons (or any combination thereof) and attach Pop-up Menus to one or more of these objects. Note:Type content in the Target text box on the first section of the Pop-up Menu Creator for the links in the Pop-up Menu which are to appear in the main section of the two-column frameset created in this tutorial.
2	After creating the Pop-up Menu, choose File > Preview in Browser to test the menu.
3	Choose File > Save As to save your PNG file into a folder in your already existing Dreamweaver site. If you have not defined a site, SeeHow to define a site in Dreamweaver (TechNote 14028). Note:Unless you have intentionally inserted your PNG file into the Dreamweaver document, you will not want to upload the PNG file to your server although it is located in your site.
4	Exporting the Fireworks files Choose File > Export to open the Export dialog box.
5	In the Save in system navigation box at the top of the dialog box, navigate to and select the folder that the Fireworks HTML file will be export to. Be sure to export this Fireworks HTML file to the same folder as the folder which will hold the frameset HTML documents.
6	In the Export dialog box, make these additional settings: a Select HTML and images from the Save as type pop-up menu. b Select Export HTML file from the HTML pop-up menu. c Select Export Slices from the Slices pop-up menu. d Select the Include Areas without Slices option if you have areas of your canvas that are not covered by slice objects and you want to export them as images. e At the bottom of the Export dialog box, make choices regarding where the images generated by the export process will be housed.

7	Click Save.

In Dreamweaver

Setting up the frameset

1	Create and save a one-row, two-column frameset. Here's one method for creating a new frameset with that layout: a Choose File > New. b Choose Modify > Frameset > Split Frame Left. c Choose File > Save All Frames. d In the Save As dialog box, enter a file name for each document in the frameset. Then save the document within your defined site. Dreamweaver will first have you save the frameset, then the right frame, then the left right frame. You can tell which document you are saving by the outline shading in the Document window. Note:If you wish for the right frame to be populated by another source document by default, click the right frame in the Frames panel. Then, on the Property inspector, click the Browse for File folder icon. Navigate to and select the HTML document you want to display by default in the right frame.
2	Choose Window > Properties to open the Property inspector.
3	Choose Window > Frames to open the Frames panel.
4	Click the left frame in the Frames panel.
5	In the Property inspector, type `menu` in the Frame Name text box (see Example 3).

6	Click the right frame in the Frames panel.
7	In the Property inspector, type `content` in the Frame Name text box.
8	Click the edge of the frames on the Frames panel to access the frameset's properties in the Property inspector.
9	Click the left column on the visual representation of the frameset on the Property inspector (see Example 4).

10	Type the fixed pixel size (probably the width of the Pop-up Menu trigger or slightly wider) in the left Column Value text box . The right column should remain relative in the Column Units pop-up menu.
11	Click the right column on the visual representation of the frameset on the Property inspector.
12	In the Column Units pop-up menu, select Relative.
13	Your frameset layout should appear similar to the one on the Frames panel in Example 5.

Inserting the Fireworks HTML into the menu frame source document

1	With the frameset open, click the menu frame in the Document window.
2	ChooseInsert> Interactive Images > Fireworks HTML (See Example 6). This will open the Insert Fireworks HTML dialog box.
3	In the Insert Fireworks HTML dialog box, click Browse. In the Select the HTML File dialog box, navigate to locate the folder in your defined site into which you earlier exported the HTML file from Fireworks.
4	Select the Fireworks HTML file in the dialog box window and click Open (or Choose, for Macintosh).
5	Click OK.
6	The Fireworks images and HTML information will now be incorporated into the menu frame source document.

Cutting and pasting the frame source code in Code view

1	Click the menu frame in the Document window. Code view will display the HTML source code for the menu frame source document.
2	Switch the keyboard focus to Code view by clicking in the Code view pane.
3	In the menu frame's source code, locate the Pop-up Menu JavaScript code in the<head>tags. This JavaScript code begins with: `<script >`. You will be selecting a portion of this JavaScript code and then cutting it.
4	Select code, beginning with:`function fwLoadMenus() {` and stopping with:`// fwLoadMenus()`. The code you select will look similar to:

	functionfwLoadMenus() { if (window.fw_menu_0) return; window.fw_menu_0 = new Menu("root",105,27,"Times New Roman, Times, serif",20,"#680030","#d0cc98","#d0cc98","#680030"); fw_menu_0.addMenuItem("First","window.open('one.htm', 'One', 'width=450,height=350');"); fw_menu_0.addMenuItem("Second","window.open('second.htm', 'Second', 'width=570,height=280');"); fw_menu_0.addMenuItem("Third","window.open('third.htm', 'Third', 'width=450,height=316');"); fw_menu_0.fontWeight="bold"; fw_menu_0.hideOnMouseOut=true; fw_menu_0.writeMenus(); } // fwLoadMenus()

5	Choose Edit > Cut or press Control+X (Command+X for Macintosh).
6	Click the content frame in the Document window and then switch to Code view.
7	Look to see if you have a the following <script> tags in the<head> region: <script > </script> If <script> tags are already present: If the above <script> tags are already present, click in Code view just under the opening <script> tag, and then paste (Edit > Paste or press Control+V [Command+V for Macintosh]) the JavaScript code. If <script> tags are not present: a Just before the closing </head> tag, type the following: <script > b Click just under the <script> tag you just typed, and then paste (Edit > Paste or press Control+V [Command+V for Macintosh]) the JavaScript code. c At the end of the code you just pasted (but before the </head> tag), type the following: </script> The content frame source code <head> region should look similar to the one in Example 7.
8	Click the menu frame in the Document window and switch the focus to Code view.
9	In the <head> region, find and select the following code:

	<script href="fw_menu.js"></script>

10	Copy the selected code (choose Edit > Copy or press Control+C [Command+C for Macintosh]).
11	Click the content frame in the Document window and switch the focus to Code view.
12	Locate the<head> region of the code.
13	Click in between the closing </script> and the closing </head> tags.
14	Choose Edit > Paste to paste the code. Note:It is important tocopy this script instead of cutting it from it's source document. There are functions in the external fw_menu.js file that will still be used by the HTML in the menu frame. This line is similar to another line that appears in the file (see Step 6). However, one calls thefw_menu.jsfile, the other calls the fwLoadMenus function. The position of these calls to their JavaScripts in the HTML is crucial to your Pop-up Menus working.
15	Click the menu frame in the Document window and switch the focus to Code view.
16	Locate the beginning of the <body> tag.
17	Just underneath the beginning of the <body> tag, select and cut the following code:

	<script >fwLoadMenus();</script>
18	Click the content frame in the Document window and switch the focus to Code view.
19	Paste the code just underneath the opening <body> tag (see Example 8). Note:Testing has shown that the position of this call to the fwLoadMenus function controls the position of Pop-up Menus in Internet Explorer 5.0 on the Macintosh. To ensure proper positioning of your Pop-up Menus in that browser, make sure this line of code is immediately after the opening <body> tag.
20	Click the menu frame in the Document window.
21	Select the trigger for the Pop-up Menu.
22	Look in Code view for the selected code. You will see code similar to:

	<A href="#" onMouseOut="FW_startTimeout();" onMouseOver="window.FW_showMenu(window.fw_menu_0,25,65);">

23	Notice this event:OnMouseOver.There are two instances of the word "window" directly followingonMouseOver.
24	In Code view, replace each instance of "window" with the following: parent.content
25	The new code will look like (changes appear in red):

	<A href="#" onMouseOut="FW_startTimeout();" onMouseOver="parent.content.FW_showMenu (parent.content.fw_menu_0,123,58);

	Note:By setting the "window" to be the content frame, you are telling the Pop-up Menus where they are to appear in the Frameset. The term "parent" refers to the superset, and the dot is a JavaScript indicator that "content" is a subset.
26	In the <body> tag, look for this code again:

	onMouseOver="parent.content.FW_showMenu (parent.content.fw_menu_0,xxx,yyy);"

27	Notice the last two numbers (represented in red and blue above) at the end of the code. These two numbers determine the X and Y coordinates of the Pop-up Menu in relation to the upper left-hand corner of content frame. You can change these coordinates to adjust the position of the Menus in the frame. If you want the Pop-up Menus to have a relative position on the page, other solutions are available (discussed in Changing the location of a Pop-up Menu exported from Fireworks [TechNote 15001]).
28	If you want the Pop-up Menus to appear when other pages populate the content frame, you will need to copy and paste the same code which you added to the <head> and <body> tags of the content frame source document (See Example 9) to these additional pages.

Additional information
These instructions were adapted from a Fireworks Forum post by Brian Baker, Macromedia Evangelist.

To learn more about JavaScript, see:

	Programming JavaScript section on WebMonkey.
	"The _parent Magic Target" by Dan Brown at WebReference.Com

Note:Although links to external Web sites are provided as a resource, the Web sites are not part of Macromedia. Pages will open in a new browser window.