Popup Menus Motivator (ver 1.0.5) Basics Example Issues
(for DW4/UD4/FW4 but not yet with MX)

This behavior is now on the Macromedia Exchange site at http://www.macromedia.com/exchange/ultradev/
(You will need to get ver1.3+ of Macromedia Extension Manager if you do not already have it)

(8/16/01 News Flash: See "Known issues" below.)

The new Fireworks 4 Popup Menus are really nice. But they have one irritating feature. Like all Macromedia layers, they are Absolutely Positioned on the page. So if the user has a 640x480 monitor but you designed on a 1024x760, depending on just where on the page you placed the menus, they may be lost off the right side of the screen! As well, if the user has a nice new high resolution monitor but you designed the menus to be on the right-hand side of the page, and they go and narrow their browser window, the menus are left behind - right off the window!

The Motivator adds life to Popup Menus. Now, no matter the monitor resolution or the width of viewing browser window (within limits determined by your page design), the menus will stay positioned in a relatively fixed position with respect to your choice of Tether point. Check out the example above to see this in action.

Your page may have as many menus as you wish. As with all Fireworks-generated Popup Menus, they must be applied to the page all at once by the single application of the "Insert Fireworks HTML" object.

The current version now works for menus attached to image hotspots as well as to slices and also allows image rollovers to work (older versions did not.)

For version 1.0.5 and below, be sure that your menus' upper left corners do not fall into negative territory, i.e. keep those corners on the Design View screen rather than having them fall off the left or top of that screen. If you NEED them in negative territory, email me for a new js file.

Before you start, set your monitor resolution to the highest you wish to design for. Only later should you lower the resolution to see what positioning compromises you might need to make.

To actually use the command: The Command is found on the Commands menu, naturally enough. When you click on the dialog's button #3, you will see menu-outlines appear on your webpage. Their positions will show where on the page the popup menus are currently set to open. With the Design View window Maximized (very important) simply move the outlines to the desired locations, open the Command again and click button #4 to save your changes (leave the Finished checkbox un-checked for now) . Simple enough you say. Well it is! Except now you must test your page in a browser, varying its width to see if the real popup menus (ignore the menu-outlines!) slide properly across the screen. Probably not. You then call the Command again and, first move the menu-outlines in Design View to get them where you want them in the maximized Browser window, and then, using the terribly helpful rules below, change the Adjustment so the next time you test in the browser the popup menus slide as you wish. When you've got it right, and it may take several tries to get it the way you want it, you should check the Finished checkbox before a final click of button #4.

Tips:
1) Your page may have as many menus as you wish. As with all Fireworks-generated Popup Menus, they must be applied to the page all at once by the single application of the "Insert Fireworks HTML" object.

2) If only one menu outline appears when you hoped for all of them, first be sure you had not selected one Menu's anchor image. If not, then click "De-motivate" button on the Command's dialog screen and try again. This will clear a value in a Notes file.

3) Best results are achieved for purely elastic tables rather than centered ones. Also it is best to design at your highest resolution, optimizing with Motivator as best you can, and only then go to a lower resolution if you wish. You will not find really consistent alignment at different resolutions, particularly for centered tables. Elizabeth Beceden has taught me a simple technique to keep menus in centered tables stay perfectly positioned: use a Frameset with the left and right frames' width set to '*' and center frame set at a fixed width. In this case, after positioning the menus properly, De-Motivate the page and the menus will stay perfectly aligned with their triggers!

4) Only use this command for menus you wish positioned a) to the right where they might be lost on your lowest target audience monitor width and b) only select Tether points that themselves slide across the screen (i.e. reside in elastic tables). OR you may also use this command to move the menus to your desired location (which DW/FW does not always do) and then De-motivate the page, leaving the menus in their new locations.

5) The most reliable positioning is achieved when you select alignment option C and then butt the right edge of the menu against the right edge of the browser window. The menu will stay right up against the browser edge as one resizes the window.

6) Depending on the complexity of the page layout, we discovered that DW, in its Design View, does not render the page quite like a Browser does. Even with the browser fully Maximized, this can result in some significant disparities in the proximity of the popup menus to their intended Tether points. The solution: Simply move the menu-outlines in Design View to compensate! And because each browser renders a page in its own idiosyncratic way, this is never an exact science (unless you are butting the right side of the menus up against the right-hand edge of the browser window - that is quite reliable.) Also, be aware that different browsers render certain html tags differently. For example Netscape and Internet Explorer render <p>&nbsp;</p> as different heights on the screen. So avoid placing them above your navbars on the page.

History:
- Ver 1.0.5 Previous version supported only menus attached to image slices, and any rollovers were lost. This version now maintains those rollovers. Also added with this version is support for menus attached to imagemap hotspots. Also eliminated a bug that caused DW to crash when this command was run on page not having popup menus.

I finally figured out the cause of that sporadic error msg that some of you have reported. (At line 3xx of file "C:\Program Files\Macromedia\Dreamweaver 4\Configuration\commandsPopUpMenusMotivator.js": theLayers[i].outerHTML.match has no properties".)
You can avoid the error msg either by (a) moving the menu-placeholders (those peach things Motivator adds to Design View) so that their upper left corners are not off the left or top of the Design View window. In other words, their top and left positions must all be positive, not negative; or (b) if the menus' upperleft corners NEED to be in negative territory, then email me directly for a new js file. I won't be updating the Exchange version until I've worked out some other issues as well.

Just found cause of the error msg: "At line 248 of the file "C:\Program Files\Macromedia\Dreamweaver4\Configuration\Commands\PopUpMenusMotivator.js" WholeA has no properties." This occurs when two conditions are present: first, you are using imagemaps instead of slices for the triggers (the anchor images) AND second, you have a link (href) applied to the image upon which that imagemap lies. If you need this href link, you'll need to remove it from the image, use Motivator as needed, and only THEN attach the href to that image.

If you have other problems or suggestions I would like to hear from you, so please email me. We'll build an FAQ section from your questions!

I am ready to help you by writing javascripts, or that specialized Dreamweaver extension you've always wanted, on a contract basis. Just email me at michael@valleywebdesigns.com.

[ home | services | examples | contact me ]
Site © 1998 ValleyWebDesigns
We have a strict Privacy Policy