Making the MX Popup Menu Javascript Dynamic

I hacked up the popup javascript generated by DreamWeaver MX, so I could make the popups data-driven (see below, if interested). I only have one problem, though: mm_menu.js doesn't dynamically size the popup "cells," so if your data is longer than your static width, it's ugly. Apparently DreamWeaver MX (and, I guess, Fireworks MX) itself calculates and sums glyph widths, according to font and size (in other words, it takes into account the width difference of an Arial "i" and "M"). It seems like this could get hairy, if I were to try to calculate these myself. Does anybody know how to modify mm_menu.js to dynamically size these popup "cells," OR know of any comparable, free DHTML popup app that does dynamic sizing? (I used to use HierMenus, but they want $1500+ for it now -- what a GOUGE.) Thanks, Jamie <cfoutput> <script language="JavaScript"> <!-- function mmLoadMenus() {   if (window.mm_menu_1) return; </cfoutput> <cfset jsLoopIdx = 0> <cfoutput query="getHeadlines" group="section_name"> <cfset jsLoopIdx = jsLoopIdx + 1>   window.mm_menu_#jsLoopIdx# = new Menu("root",500,18,"Arial, Helvetica, sans-serif",12,"navy","purple","##DDDDDD","##FFCCCC","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_#jsLoopIdx#.addMenuItem("#section_name#","location='articles.cfm?section_id=#section_id#&issue_id=#request.issue_id#'"); <cfoutput> mm_menu_#jsLoopIdx#.addMenuItem("#headline#","location='articles.cfm?article_id=#article_id#'"); </cfoutput>   mm_menu_#jsLoopIdx#.hideOnMouseOut=true;   mm_menu_#jsLoopIdx#.bgColor='##555555';   mm_menu_#jsLoopIdx#.menuBorder=1;   mm_menu_#jsLoopIdx#.menuLiteBgColor='##FFFFFF';   mm_menu_#jsLoopIdx#.menuBorderBgColor='##777777'; </cfoutput> <cfoutput>mm_menu_#jsLoopIdx#.writeMenus();</cfoutput> } // mmLoadMenus() //--> </script> <script language="JavaScript" src="mm_menu.js"></script> <script language="JavaScript1.2">mmLoadMenus();</script> <cfset jsLoopIdx = 0> <cfoutput query="getHeadlines" group="section_name"> <cfset jsLoopIdx = jsLoopIdx + 1> <img src="images/sec_btn_top.gif" width=151 height=4 alt="" border="0"><br> <a href="javascript:;" onMouseOver="MM_showMenu(window.mm_menu_#jsLoopIdx#,140,3,null,'button#jsLoopIdx#')" onMouseOut="MM_startTimeout();"><img #button_image# name="button#jsLoopIdx#" alt="#section_name#" border=0></a><br> <img src="images/sec_btn_bot.gif" width=151 height=3 alt="" border=0><br> <cfoutput> </cfoutput> </cfoutput>

The COOLjsMenu and COOLjsTree look pretty good. Decent prices too. http://javascript.cooldev.com/scripts/coolmenu/ I hacked up the popup javascript generated by DreamWeaver MX, so I could make the popups data-driven (see below, if interested). I only have one problem, though: mm_menu.js doesn't dynamically size the popup "cells," so if your data is longer than your static width, it's ugly. Apparently DreamWeaver MX (and, I guess, Fireworks MX) itself calculates and sums glyph widths, according to font and size (in other words, it takes into account the width difference of an Arial "i" and "M"). It seems like this could get hairy, if I were to try to calculate these myself. Does anybody know how to modify mm_menu.js to dynamically size these popup "cells," OR know of any comparable, free DHTML popup app that does dynamic sizing? (I used to use HierMenus, but they want $1500+ for it now -- what a GOUGE.) Thanks, Jamie <cfoutput> <script language="JavaScript"> <!-- function mmLoadMenus() {   if (window.mm_menu_1) return; </cfoutput> <cfset jsLoopIdx = 0> <cfoutput query="getHeadlines" group="section_name"> <cfset jsLoopIdx = jsLoopIdx + 1>   window.mm_menu_#jsLoopIdx# = new Menu("root",500,18,"Arial, Helvetica, sans-serif",12,"navy","purple","##DDDDDD","##FFCCCC","left","middle",3,0,100 0,-5,7,true,true,true,0,true,true); mm_menu_#jsLoopIdx#.addMenuItem("#section_name#","location='articles.cfm?sec tion_id=#section_id#&issue_id=#request.issue_id#'"); <cfoutput> mm_menu_#jsLoopIdx#.addMenuItem("#headline#","location='articles.cfm?article _id=#article_id#'"); </cfoutput>   mm_menu_#jsLoopIdx#.hideOnMouseOut=true;   mm_menu_#jsLoopIdx#.bgColor='##555555';   mm_menu_#jsLoopIdx#.menuBorder=1;   mm_menu_#jsLoopIdx#.menuLiteBgColor='##FFFFFF';   mm_menu_#jsLoopIdx#.menuBorderBgColor='##777777'; </cfoutput> <cfoutput>mm_menu_#jsLoopIdx#.writeMenus();</cfoutput> } // mmLoadMenus() //--> </script> <script language="JavaScript" src="mm_menu.js"></script> <script language="JavaScript1.2">mmLoadMenus();</script> <cfset jsLoopIdx = 0> <cfoutput query="getHeadlines" group="section_name"> <cfset jsLoopIdx = jsLoopIdx + 1> <img src="images/sec_btn_top.gif" width=151 height=4 alt="" border="0"><br> <a href="javascript:;" onMouseOver="MM_showMenu(window.mm_menu_#jsLoopIdx#,140,3,null,'button#jsLoo pIdx#')" onMouseOut="MM_startTimeout();"><img #button_image# name="button#jsLoopIdx#" alt="#section_name#" border=0></a><br> <img src="images/sec_btn_bot.gif" width=151 height=3 alt="" border=0><br> <cfoutput> </cfoutput> </cfoutput>

I usually use a character count times an average width.  For instance, I use 6.5 as my multiplier for 10pt verdana.  Capital 'W' is 11 pixels, I believe, lowercase 'l' is 2 pixels, and the rest are somewhere in between.  Really simple, no cost, and quite effective: <script> multiplier = 6.5; buffer = 20; // extra space around the items window.mymenu = new Menu("title, null, null, "verdana,sans-serif"); <cfset maxlen = 0 /> <cfloop query="items">    <cfset maxlen = max(maxlen, len(name)) />    mymenu.addMenuItem("#name#", "location='#url#'"); </cfloop> mymenu.menuWidth = Math.round(#maxlen# * multiplier) + buffer; </script> I haven't used the menus from DWMX, i use an old version from fireworks, but that shouldn't matter. --- Barney Boisvert, Senior Development Engineer AudienceCentral (formerly PIER System, Inc.) bboisvert@audiencecentral.com voice : 360.756.8080 x12 fax   : 360.647.5351 www.audiencecentral.com ----- Excess quoted text cut - see Original Post for more -----

I had thought about that, but I think I got scared off, thinking that there may come a time when there's an inordinate number of wide characters in the string. I may decide to bite the bullet and go your route, though, considering I'm 99% there, anyway. Thanks, Jamie On Thu, 29 May 2003 12:51:33 -0700, in cf-talk you wrote: ----- Excess quoted text cut - see Original Post for more -----

You know.. after programming my own w/ one of my developers, using dhtml central's and various others - milonic etc etc... they were all to heavy , bulky or something. THe happest I was - was with my own using the 1k api from dithered's site... but they were crashing too many browsers.. I settled on opencube.com 's drop downs and wrote a group query and was able to really get the look and more or less the speed I had wanted. They are at one of my clients sites www.speedpeople.com ( You have probably seen my fair share of questions on that site on the list :) ) As for the select items - That I know of it is true that is the one element that resides above the page - so infite z-index If I remember correctly - milonic's fix was to really hide it... As well as all the other fixes I had noticed - they really hide the select's or moved them off page and back on... (moving them on and off not too difficult for a fix either) jay miller Jamie Jackson wrote: ----- Excess quoted text cut - see Original Post for more -----

Does anyone know how to make to a menu like those work over a <select> element in IE5/win so that the select isn't visible thru' the menu div ?? My HTML/JS guy says it can't be done WG I usually use a character count times an average width.  For instance, I use 6.5 as my multiplier for 10pt verdana.  Capital 'W' is 11 pixels, I believe, lowercase 'l' is 2 pixels, and the rest are somewhere in between.  Really simple, no cost, and quite effective: <script> multiplier = 6.5; buffer = 20; // extra space around the items window.mymenu = new Menu("title, null, null, "verdana,sans-serif"); <cfset maxlen = 0 /> <cfloop query="items">    <cfset maxlen = max(maxlen, len(name)) />    mymenu.addMenuItem("#name#", "location='#url#'"); </cfloop> mymenu.menuWidth = Math.round(#maxlen# * multiplier) + buffer; </script> I haven't used the menus from DWMX, i use an old version from fireworks, but that shouldn't matter. --- Barney Boisvert, Senior Development Engineer AudienceCentral (formerly PIER System, Inc.) bboisvert@audiencecentral.com voice : 360.756.8080 x12 fax   : 360.647.5351 www.audiencecentral.com ----- Excess quoted text cut - see Original Post for more -----

Your HTML/JS guy is WRONG. First I'd didch this MX JS script your using and grab CoolMenus from www.DHTMLCentral.com It works back to IE 4+ and Netscape 4+.  It also works OVER select boxes and other form elements (instead of being hidden behind like you sound like you're experiencing). The code is excellent and I've been using it for dynamic menuing for over ayear with NO problems. HTH Cheers Bryan Stevenson B.Comm. VP & Director of E-Commerce Development Electric Edge Systems Group Inc. t. 250.920.8830 e. bryan@electricedgesystems.com --------------------------------------------------------- Macromedia Associate Partner www.macromedia.com --------------------------------------------------------- Vancouver Island ColdFusion Users Group Founder & Director www.cfug-vancouverisland.com > Does anyone know how to make to a menu like those work over a > <select> element in IE5/win so that the select isn't visible thru' the menu > div ?? > > My HTML/JS guy says it can't be done > > WG > > I usually use a character count times an average width.  For instance, I use > 6.5 as my multiplier for 10pt verdana.  Capital 'W' is 11 pixels, I believe, ----- Excess quoted text cut - see Original Post for more ----- but ----- Excess quoted text cut - see Original Post for more -----

From the Coolmenus web site faq: Q: How can I avoid overlapping form elements, flash plugins or applets thru coolmenus? Answer by Sergi Meseguer There are certain elements that "float above" HTML elements. It is not a "z-index" issue. Well, this is not an easy issue, as the problem is not from the script but from browsers behaviours. Please make sure you read carefully the following article in DHTML Lab: http://www.webreference.com/dhtml/diner/seethru/ There you will find a through explaination of this proble. They say there is no fix. Actually, if you're using form elements, the fix is placing the form in a div and hide it everytime the coolmenu gets in its path. See example 11 in the Coolmenus3 section. As for the flash plugins, you may want to read this post for a likely solution. I'm not sure if this really works though, at least not crossbrowser. No solution found for java applets and coolmenus overlapping yet. :::: So in essence, you can have them show up over top of form elements, you're only hiding the form elements whenever the menu pops up.  Very distracting to me. Marlon Your HTML/JS guy is WRONG. First I'd didch this MX JS script your using and grab CoolMenus from www.DHTMLCentral.com It works back to IE 4+ and Netscape 4+.  It also works OVER select boxes and other form elements (instead of being hidden behind like you sound like you're experiencing). The code is excellent and I've been using it for dynamic menuing for over ayear with NO problems. HTH Cheers Bryan Stevenson B.Comm. VP & Director of E-Commerce Development Electric Edge Systems Group Inc. t. 250.920.8830 e. bryan@electricedgesystems.com --------------------------------------------------------- Macromedia Associate Partner www.macromedia.com --------------------------------------------------------- Vancouver Island ColdFusion Users Group Founder & Director www.cfug-vancouverisland.com > Does anyone know how to make to a menu like those work over a > <select> element in IE5/win so that the select isn't visible thru' the menu > div ?? > > My HTML/JS guy says it can't be done > > WG > > I usually use a character count times an average width.  For instance, I use > 6.5 as my multiplier for 10pt verdana.  Capital 'W' is 11 pixels, I believe, ----- Excess quoted text cut - see Original Post for more ----- but ----- Excess quoted text cut - see Original Post for more -----

Marlon... I say hooey to that article...it's not written by the author of the code. ;-) All I can say is...I use CoolMenus...they do NOT let the form elements show through AND I am NOT doing anything special with the form fields (i.e. hiding them in a seperate div). To prove it...go here and mouseover the "contact" menu...voila! http://64.180.84.134:27100/current/ Cheers Bryan Stevenson B.Comm. VP & Director of E-Commerce Development Electric Edge Systems Group Inc. t. 250.920.8830 e. bryan@electricedgesystems.com --------------------------------------------------------- Macromedia Associate Partner www.macromedia.com --------------------------------------------------------- Vancouver Island ColdFusion Users Group Founder & Director www.cfug-vancouverisland.com > From the Coolmenus web site faq: > > Q: How can I avoid overlapping form elements, flash plugins or applets thru > coolmenus? > > Answer by Sergi Meseguer > There are certain elements that "float above" HTML elements. It is not a > "z-index" issue. Well, this is not an easy issue, as the problem is not from > the script but from browsers behaviours. Please make sure you read carefully > the following article in DHTML Lab: > http://www.webreference.com/dhtml/diner/seethru/ > > There you will find a through explaination of this proble. They say there is > no fix. Actually, if you're using form elements, the fix is placing the form > in a div and hide it everytime the coolmenu gets in its path. See example 11 ----- Excess quoted text cut - see Original Post for more ----- and ----- Excess quoted text cut - see Original Post for more ----- Really ----- Excess quoted text cut - see Original Post for more -----

Now put a select box under that menu and observe it. NN should obscure fine, IE should not. Calvin > Marlon... > > I say hooey to that article...it's not written by the author of the code. > ;-) > > All I can say is...I use CoolMenus...they do NOT let the form elements show ----- Excess quoted text cut - see Original Post for more ----- there > is > > no fix. Actually, if you're using form elements, the fix is placing the > form > > in a div and hide it everytime the coolmenu gets in its path. See example ----- Excess quoted text cut - see Original Post for more ----- you're > > only hiding the form elements whenever the menu pops up.  Very distracting ----- Excess quoted text cut - see Original Post for more ----- over ----- Excess quoted text cut - see Original Post for more ----- I ----- Excess quoted text cut - see Original Post for more ----- fireworks, ----- Excess quoted text cut - see Original Post for more ----- it's ----- Excess quoted text cut - see Original Post for more ----- other > > > > words, it takes into account the width difference of an Arial "i" and ----- Excess quoted text cut - see Original Post for more -----

I don't think that text inputs ever had that problem, but <select>'s do Marlon On Thu, 29 May 2003 14:14:04 -0700, Bryan Stevenson <bryan@electricedgesystems.com> wrote: ----- Excess quoted text cut - see Original Post for more -----

BTW...it's DHTMLcentral.com and not webreference.com....perhaps there are 2 scripts called CoolMenus?? Bryan Stevenson B.Comm. VP & Director of E-Commerce Development Electric Edge Systems Group Inc. t. 250.920.8830 e. bryan@electricedgesystems.com --------------------------------------------------------- Macromedia Associate Partner www.macromedia.com --------------------------------------------------------- Vancouver Island ColdFusion Users Group Founder & Director www.cfug-vancouverisland.com > From the Coolmenus web site faq: > > Q: How can I avoid overlapping form elements, flash plugins or applets thru > coolmenus? > > Answer by Sergi Meseguer > There are certain elements that "float above" HTML elements. It is not a > "z-index" issue. Well, this is not an easy issue, as the problem is not from > the script but from browsers behaviours. Please make sure you read carefully > the following article in DHTML Lab: > http://www.webreference.com/dhtml/diner/seethru/ > > There you will find a through explaination of this proble. They say there is > no fix. Actually, if you're using form elements, the fix is placing the form > in a div and hide it everytime the coolmenu gets in its path. See example 11 ----- Excess quoted text cut - see Original Post for more ----- and ----- Excess quoted text cut - see Original Post for more ----- Really ----- Excess quoted text cut - see Original Post for more -----

Select's are window elements in IE. _Nothing_ can appear above them, same as Flash. It is possible to create the illusion of this, but can be difficult if the layout doesn't take this into account. http://support.microsoft.com/support/kb/articles/Q177/3/78.ASP&NoWebContent=1 One workaround http://www.faqts.com/knowledge_base/view.phtml/aid/14237/fid/53 -- jon mailto:jonhall@ozline.net Thursday, May 29, 2003, 4:48:52 PM, you wrote: BS> Your HTML/JS guy is WRONG. BS> First I'd didch this MX JS script your using and grab CoolMenus from BS> www.DHTMLCentral.com BS> It works back to IE 4+ and Netscape 4+.  It also works OVER select boxes and BS> other form elements (instead of being hidden behind like you sound like BS> you're experiencing). BS> The code is excellent and I've been using it for dynamic menuing for over BS> ayear with NO problems. BS> HTH BS> Cheers BS> Bryan Stevenson B.Comm. BS> VP & Director of E-Commerce Development BS> Electric Edge Systems Group Inc. BS> t. 250.920.8830 BS> e. bryan@electricedgesystems.com BS> --------------------------------------------------------- BS> Macromedia Associate Partner BS> www.macromedia.com BS> --------------------------------------------------------- BS> Vancouver Island ColdFusion Users Group BS> Founder & Director BS> www.cfug-vancouverisland.com BS> ----- Original Message ----- BS> From: "webguy" <webguy@online.ie> BS> To: "CF-Talk" <cf-talk@houseoffusion.com> BS> Sent: Thursday, May 29, 2003 1:44 PM BS> Subject: RE: Making the MX Popup Menu Javascript Dynamic >> Does anyone know how to make to a menu like those work over a >> <select> element in IE5/win so that the select isn't visible thru' the BS> menu ----- Excess quoted text cut - see Original Post for more ----- BS> use >> 6.5 as my multiplier for 10pt verdana.  Capital 'W' is 11 pixels, I BS> believe, ----- Excess quoted text cut - see Original Post for more ----- BS> but ----- Excess quoted text cut - see Original Post for more ----- BS>

I was curious about that... http://www.dhtmlcentral.com/projects/webcronize/examples/hide_selecboxes_and_form_example.html Guess I'll remain curious. > Your HTML/JS guy is WRONG. > > First I'd didch this MX JS script your using and grab CoolMenus from > www.DHTMLCentral.com > > It works back to IE 4+ and Netscape 4+.  It also works OVER select boxes and ----- Excess quoted text cut - see Original Post for more ----- Really ----- Excess quoted text cut - see Original Post for more -----

Thanks, can you use existing nav images to spawn the popup submenus? Thanks, Jamie On Thu, 29 May 2003 13:48:52 -0700, in cf-talk you wrote: ----- Excess quoted text cut - see Original Post for more -----

And he is correct.  It has to do with IE reusing system objects for text boxes.  In essence, your text box is sitting atop the web page and not really part of it. Does anyone know how to make to a menu like those work over a <select> element in IE5/win so that the select isn't visible thru' the menu div ?? My HTML/JS guy says it can't be done WG I usually use a character count times an average width.  For instance, I use 6.5 as my multiplier for 10pt verdana.  Capital 'W' is 11 pixels, I believe, lowercase 'l' is 2 pixels, and the rest are somewhere in between.  Really simple, no cost, and quite effective: <script> multiplier = 6.5; buffer = 20; // extra space around the items window.mymenu = new Menu("title, null, null, "verdana,sans-serif"); <cfset maxlen = 0 /> <cfloop query="items">    <cfset maxlen = max(maxlen, len(name)) />    mymenu.addMenuItem("#name#", "location='#url#'"); </cfloop> mymenu.menuWidth = Math.round(#maxlen# * multiplier) + buffer; </script> I haven't used the menus from DWMX, i use an old version from fireworks, but that shouldn't matter. --- Barney Boisvert, Senior Development Engineer AudienceCentral (formerly PIER System, Inc.) bboisvert@audiencecentral.com voice : 360.756.8080 x12 fax   : 360.647.5351 www.audiencecentral.com ----- Excess quoted text cut - see Original Post for more -----

Go to http://www.milonic.co.uk/menu/.  Their menu works over select boxes.  Show to your HTML/JS guy.  Make sure you help him close his jaw :) ----- Excess quoted text cut - see Original Post for more -----

http://www.milonic.co.uk/menu/overforms_sample.php The instructions on this page are wrong, though.  You don't need to wrap divs around your form. ----- Excess quoted text cut - see Original Post for more -----

Another fairly striaghtforward way is (at least in IE, I have not tested it on Netscape or Opera) is to hide the form element (SELECT or OBJECT) that is below the menu. I know this may not be a popular solution but go to microsoft.com and do a full save of the page, you will see toolbar.js,   there are  functions called hideElement and showElement which shows how they accomplish this. I do not see why this same method should not work using NS6+ or Opera 6+ as well. As I said before, it may not be a popular solution but it is one work around. HTH Best Regards, Donnie Bachan Phone: (718) 217-2883 ICQ#: 28006783 "Nitendo Vinces - By Striving You Shall Conquer" ====================================================================== The information transmitted is intended only for the person or entity to which it is addressed and may contain confidential and/or privileged material. Any review, retransmission, dissemination or other use of, or taking of any action in reliance upon, this information by persons or entities other than the intended recipient is prohibited. If you received this in error, please contact the sender and delete the material from any computer. _________________________________________________________________ Tired of spam? Get advanced junk mail protection with MSN 8. http://join.msn.com/?page=features/junkmail