*** October 14, 2003 New Version 4.0f ***
Now works with khtml based browsers (Mac OSX Safari, Konqueror)
*** May 10, 2003 New Version 4.0e ***
Now works for NetScape 7
Netscape 4.x "1 pixel" (NS 4.x bug) adjusted for
IE scrolling and clientTop problem fixed
Test pop-up menu offset vertically by paragraphs and offset
horizontally by a pixel shim.
Test pop-up menu inserted into centre table cell with variable
sizes (adjusts to screen resolution). This pop-up also contains sub-menus.
The above pop-up menus which move relative to the button location
are done through a modification of the standard Macromedia Fireworks 4 pop-up
menus. The pop-up menus which come standard with Fireworks 4 are positioned
absolute to the screen. To create menus which instead hold position relative
to the triggering image, you must make the following modifications.
These modifications only make the FW menus position themselves relative to the
triggering object. They do not fix the other problems with pop-up menus in Fireworks
version 4.0.2 and Dreamweaver 4. Please see the bottom of this page for a list
of the remaining problems (that I know of).
**** !!! Warning !!! There seems to be
a problem with Dreamweaver Rollover behaviour (MM_swapImage) and this version
of pop-ups. Problem occurs in NS 4.x only and may not always occur. Please look
at the complete note at the bottom of this page if this may apply to you.
- Copy the fw_menu.js file from the following location into
the folder where you are creating the Fireworks pop-up menu. Location: http://www.holtenwood.bc.ca/computing/popup/fw_menu.js
.
- Sorry, this is not available as an FTP site. However,
most modern browsers should open a file save or download screen when you
point directly to a .js file.
- If an original version of the Fireworks fw_menu.js file
exists, replace it.
- Fireworks 4 should leave the replaced version as it
is. However you may want to save a copy somewhere safe. You should also
note Fireworks will create a new copy of it's own fw_menu.js file in any
group where you save FW html and the fw_menu.js file does not yet exist.
- If you wish to make this a permanent FW change, you
could copy the modified fw_menu.js file into the Fireworks directory at
...\Fireworks 4\Configuration\HTML Code\fw_menu.js. Of course I do not
guarantee a future update to FW will not overwrite it.
- Create the triggering image and the pop-up menu using Fireworks
4. Export as html.
- FW will export the html with the pop-up location as
an absolute pixel location. My version of fw_menu.js instead uses these
pixel values as relative to the triggering image. If you create the triggering
image in the top left of the FW canvas, these numbers will be identical.
So this is the easiest way to do it.
- Creating the triggering image in the top left may not
always be possible as in the case where you want the pop-up menus to pop
above or to the left of the image. In this case you will need to edit
the exported FW HTML directly to change to pixel position relative to
the triggering image. Note: negative numbers may be needed to define a
pop-up location above or to the left relative to the triggering image.
- FW creates each menu with the same name "fw_menu_0". If you
create a second pop-up in the same FW screen, it will be named "fw_menu_1".
But, if you create it in a different FW screen it will once again be "fw_menu_0".
So if you are creating multiple pop-up menus, you need to go into each
of the exported FW HTML files and rename these "fw_menu_0"s
to something unique. Otherwise you get the same pop-up for every button.
(Note: this is a flaw with the FW 4 methods in general, not a particular
requirement of this special version).
- Use the Dreamweaver Insert Fireworks HTML to insert the pop-up
menu in the desired location.
- Modify the inserted onMouseOver event
directly as follows:
- Look for the ....onMouseOver="window.FW_showMenu.....
line(s).
- Add the following arguments to the FW_showmenu function
based on the name you see in "img name=":
,null,'imgname'
So it now looks like:
....onMouseOver="window.FW_showMenu(window.fw_menu_0,#,#,null,'imgname');"...
where ",#,#" are the pixel offsets relative to the image
(probably already OK),
"null" is a new argument,
and "imgname" is a new argument
replaced by the name of the image as defined when DW inserted the FW
HTML.
- Be sure to use single quotes in the above arguments.
The entire function needs to be in double quotes, so the arguments must
be in single to avoid conflicts.
Dreamweaver and Fireworks extensions to automate this process
are not yet available. With my current workload, I am not sure when I will get
to it...
Note: It is assumed throughout the above you are using Macromedia Fireworks
4 and Dreamweaver 4. However, by viewing and analysing the source for this page
you could do the same pop-up menus directly without FW and DW. You are welcome
to do so as long as the copyright and modification notices are left in the fw_menu.js
file.
This version of pop-up menus only causes them to move relative
to the trigger location. The following problems with pop-up menus in the original
version of Fireworks 4.0.2 still remain in this version. If any of these problems
are unacceptable, there are other ways of doing pop-up menus. Al Sparber and
the Project*VII team has a tutorial for doing pop-up menus directly in Dreamweaver
4 without using Fireworks at http://www.projectseven.com/dreamweaver/newdrop/.
They also have a design pack called "Jazz" with flyout/pop-up menus
available for sale at: http://www.projectseven.com/dpdemos/jazz/index.htm
Problems with FW pop-up menus which still exist:
- Difficult to use as DW library items.
See Dreamweaver Technote http://www.macromedia.com/go/15101
for a full description of how to do it. You may find even following the instructions
in this technote the library items do not work in complex multilevel directory
sites.
- Dreamweaver does not recognize the fw_menu.js script as a DW object. Therefore
it does not change the link to this script when you import the FW HTML into
DW. This forces you to manually change the script link, place a copy of fw_menu.js
in each individual subdirectory, or keep your site structure as "flat"
(every page containing a pop-up menu in the root directory).
- They do not work in Opera 5.
- The fw_menu.js file is overlarge (25KB). On slow connections
it can slow down the load of the first window with pop-up menus significantly.
For example this page you are looking at took almost four times as long to
download as it would have without pop-ups. And it is not like images which
can continue loading after the rest of the page is already up. The page will
not work at all until the entire fw_menu.js file is down on the browsing PC.
Problem with Dreamweaver rollover behaviours this version of
pop-up menus in NS 4.x browsers:
A problem has been found when using Dreamweaver Rollover behaviours in combination
with my version of pop-up menus on the same root image. Problem only occurs
in NS 4.x series browsers. I have not found a solution yet.
Several people have now reported they successfully combined rollover behaviours
with my version of fw_menu.js fine. But others are having problems. I have
not identified the difference between those that work and those that do not.
So you might as well give it a try. It may work for you. If it does, let
me know and if possible send me a URL. I can then compare some working combinations
of "MM_swapImage" and "FW_showMenu" with some that do
not work to see what the difference is.
Note: The exact same behaviour also comes from not changing the new "imgname"
parameter in the FW_showMenu call to the real image name as per the instructions
above. So please check this first if you are having problems in NS 4.x only.
Timothy Atwood
Holtenwood Computing
http://www.holtenwood.bc.ca/computing/
