2 Questions from new user: Closing menu and performance

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:45

2 Questions from new user: Closing menu and performance

Poster: mikip
Dated: Monday May 9 2005 - 11:38:26 BST

Hi,

I am evaluating the menu (which has so far been fantastic!) for a web site we are developing (ASP). I need to be able to provide a menu for each row in a table that essentially performs operations on each row. I have managed to get it so I have a single down arrow image from the main menu that is clicked and produces a sub-menu dropdown. I am building a uniquely named menu per row (in the ASP) as each row contains variables unique to that menu. This is working out fine except for 2 issues:

1) I have a menu option which has no url/target but just performs a chunck of client side javascript. When this menu option is clicked, the javascript is executed however the menu does not close. All other items on the menu, on clicking them, close the menu (however they all have url targets). Does anyone have a clue why this menu may not be closing after the Javascript is executed?

2) This is a performance issue - Some of these pages have 300 rows in them in the table (its a table of orders). For these pages it takes a long time for each menu/row to initialise itself and the page is very big - I guess it would be having the submenu code buried in the page for each row! Is there a way to build the sub menu on the fly for each row without pushing each rows menu to the browser via my ASP which is increasing the size of the page hugely and then takes an age to display for each menu once loaded? i.e. I would like to show the down arrow from the main menu when the page loads and then when you click the down arrow, the page constructs the sub menu dynamically and displays?

Many Thanks in advance for any hints

Mike

Poster: Ruth
Dated: Monday May 9 2005 - 17:07:41 BST

If it's possible we could use a page to see what's happening. I realize that you probably can't put up the full thing, but if you could do a test page maybe with a few of the menus you have and especially the one that won't close, that would really be helpful. From your description I don't have any idea why the menu won't close unless it's something happening in the script you are running from that click.

Ruth

Performance is more of an Issue

Poster: mikip
Dated: Monday May 9 2005 - 17:42:36 BST

Ruth,

Thanks for taking the time to reply. The menu not closing is perhaps the least of the problems and the performance is more problematic. I have removed all of the sub menu code leaving only the Main Menu as a small icon however, even to display this, is taking a very long time. I have to admit, the performance of the page is not good normally (without the menu) but I am not sure what to do to specifically improve the response time with the menu. What seems to be happening is that as each order row is written, (effectively a row in the table), the main menu is drawn. Once the page is displayed, there is a long time before it becomes active (IE says its done loading but I still get the sand timer for quite a while). I am not sure exactly whats happening behind the scenes but would you expect that if you had 350 rows in a table, with each row having its own menu that it would take a long time to load the page?
My other thought now is to have a generic submenu with no items and dynamically add the items when the user clicks the main menu? Would this perform better?

I am working in a bank so even the development servers have sensitive data in them. I can probably send you the "view source" for the page and sanitise it? Would this help?

I don't suppose there is anything in the un-registered version that is causing this to happen?

Cheers

Mike

Poster: Ruth
Dated: Monday May 9 2005 - 19:34:18 BST

No, there shouldn't be anything in the unregistered trial version to cause this. The view source would be helpful, and also your menu_data file with the style and such so we can try and make a page and see what's happening.

One thing about tables, nothing on the page will be available until the table is fully loaded with all the data. One solution many use when they have to have a huge table, is to break it into a number of smaller tables, i.e less rows in each table, each below the other, that way as each table loads it is available while the others are loading.

Ruth

I'll test it tomorrow

Poster: mikip
Dated: Monday May 9 2005 - 23:33:50 BST

Ruth,

I will try and test tomorrow using the same amount of rows but without the rest of the page in case it is somethhing in the page that is causing the problem.
Where should I send the view source too? - Its pretty big.

Thanks

Mike

Poster: Ruth
Dated: Tuesday May 10 2005 - 2:09:45 BST

Hi Mike,

You actually need to paste it here

That's so the rest of the monitors can also take a look. There are others who are much more advanced than I in case it's some script conflict or something like that. It's OK if it's long, just make sure to use the code button above to bracket it. Click code then paste the source, then click code again. That will make sure no code gets scrambled.

Ruth

Poster: kevin3442
Dated: Tuesday May 10 2005 - 2:19:19 BST

Hi Mike,

Re: the closing problem... Under "normal" use, the submenu "appears" to close only because the click results in a new page being loaded. But if you're executing a js function with the click, and the function does not change the url, then the default behavior is for the submenu to remain open. You have two choices: (1) close the menu yourself, e.g., with a call to closeAllMenus() at the end of your js function, or (2) set the closeAllOnClick global property to true, which should cause the submenu to close automatically (read more about the closeAllOnClik global property here.

I'll wait to see the html output for a test page before I comment on the other.

Cheers,

Kevin

Source Code + Page Test

Poster: mikip
Dated: Tuesday May 10 2005 - 10:30:16 BST

Kevin/Ruth,

OK, I have created a brand new page which creates a table with 400 rows and adds the menu to each row. I am just using default values for my function that builds the menu but I am still experiencing the same issues. Unfortunately, our dev kit is a virtual server and the performance is very poor so this will account for some of the performance however, once I see that the page loads, the menus take an eternity to display including the tooltip when you mouse over the menu.
This is the old version of the menu and I'd like to change it so that when you click the down arrow, the menu is built on the fly but again, yesterday I got rid of all the menu option leaving only one default menu item and it still has a performance issue. I have included the simple ASP page + my menu_data.js - I am using the XP menu style and was wondering if a simpler style might improve the performance? I will try and move the source onto a public facing web site I have so you can see for yourself.

If you actualyl need the "source" thats being generated, let me know and I'll add it to the post.

Thanks again for all your help. We would really like to use the menu if we can sort out this issue!

Mike

ASP Page

Code:

<HTML>
<HEAD>
<script type="text/javascript" src="/inc/milonic_src.js"></script>   
<a class=milonic href="http://www.milonic.com/">JavaScript DHTML Popup Menus From Milonic.com</a>
<script   type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=/inc/mmenuns4.js><\/scr"+"ipt>");      
  else _d.write("<scr"+"ipt type=text/javascript src=/inc/mmenudom.js><\/scr"+"ipt>"); 
</script>
<script type="text/javascript" src="/inc/menu_data.js"></script>
<script type="text/javascript" src="/inc/tooltips.js"></script>   
</head>
<SCRIPT LANGUAGE=javascript>
function unDupeOrder ( orderId )
{
   if (confirm('are you sure you want to undupe the order you have selected?. Choose cancel to stop unduping or OK to perform the undupe'))
         {
            //alert('Unduping about to happen on order ' + orderId );
            form1.mode.value = 'UnDupe';
            form1.UnDupeOrderId.value = orderId;
            form1.submit();
            
         }
   else
      return;
   

}
function markOrderAsDupe( orderId, isParent, IPMAOrderId )
{

   var imageId = "MarkDupeImg_" + orderId; // "80705";
   var orderImage = document.getElementById(imageId);
   // Check the user is not trying to dupe 2 parents
   if ( selectedDupeArray.length > 0 )
   {
      if ( selectedDupeArray[0].orderId == orderId )
      {
         if (confirm('You cannot dupe the same order. Choose cancel to select a different order or OK to de-select this order'))
         {
            
            selectedDupeArray.pop();
            //alert('In here!');
            orderImage.style.display  = "none";
            return;
         }
         else{return;}
            
         
      }
      if ( selectedDupeArray[0].isParent == "True" && isParent == "True")
         {
               alert('You cannot Undupe 2 parents. Please select another dupe as your target or deselect the original and make a new selection!');
               return false;
         }
      else
         {
            if (confirm('About to perform duping. Are you sure you want to proceed?')){
               
               form1.mode.value = 'Dupe';
               form1.DupeOrderId1.value = selectedDupeArray[0].IPMAOrderId;
               //alert( 'Iniital IPMAOrder id  ' + form1.DupeOrderId1.value );
               form1.DupeOrderId2.value = IPMAOrderId;
               form1.submit();
               
            }
            else
               return;
         }
      
   }
   
    selectedDupeArray[selectedDupeArray.length] = new duplicateOrder( orderId, isParent, IPMAOrderId );
    

   
   if (!orderImage) { 
           alert("unrecognized ID"); 
          return false; 
        } 
   orderImage.style.display  = "block";
   return;

}
</script>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>

<%
Function BuildBookBuildingMenuJScript( sIssueId, sClientId, sOrderId, sIPMA_OrderID, sOrderCompanyName, sUniqueRowId, bCanDupe, bCanUnDupe, bIsParent )

Dim sJscriptMenu, sEditOrderQuery, sAddOrderQuery, sDeleteOrderQuery, sViewFeedback, sViewOrderHistory, sViewCompanyAdmin

sAddOrderQuery      = "sales_orderform.asp?issueid=" & sIssueId & "&clientid=" & sClientId

sEditOrderQuery      = "sales_orderform.asp?clientid=" & sClientId & "&mode=edit&issueid=" & sIssueId & "&orderid=" & sOrderId

sDeleteOrderQuery   = "sales_orderformupdate.asp?mode=delete&order_id=" & sOrderId & "&issueid=" & sIssueId

sViewFeedback      = "questionnaire.asp?issueid=" & sIssueId & "&companyid=" & sClientId

sViewOrderHistory   = "audit_trail.asp?orderid=" & sOrderId

sViewCompanyAdmin   = "issue_companyform.asp?companyid=" & sClientId & "&mode=edit"

sJscriptMenu      = ""

sJscriptMenu      = "<SCRIPT type=" & chr(34) & "text/javascript" & chr(34) & ">"
sJscriptMenu      = sJscriptMenu & "with(milonic=new menuname(" & chr(34) & "BBuildingMenu_" & sUniqueRowId & chr(34) & ")){"

sJscriptMenu      = sJscriptMenu & "margin=2;style=XPMenuStyle;"

sJscriptMenu      = sJscriptMenu & "aI(" & chr(34) & "bgimage=images/xp_panel_subhead.gif;fontsize=90%;fontweight=bold;separatorsize=1;image=images/transparent.gif;imagewidth=18;text=" &_
                  sOrderCompanyName & ";" & chr(34) & ");"
                  
'sJscriptMenu      = sJscriptMenu & "aI(" & chr(34) & "image=/images/transparent.gif;imageheight=6;offbgcolor=#D6DFF7;type=header;" & chr(34) & ");"

If ( bCanDupe ) Then  

   If ( bCanDupe And Not bCanUnDupe ) Then
      ' Add a seperator to the menu if not dupe order is not displayed
      sJscriptMenu      = sJscriptMenu & "aI(" & chr(34) & "image=/images/mark_as_dupe.gif;offbgcolor=#EFF3FF;separatorsize=1;text=Mark Order As Dupe;clickfunction=markOrderAsDupe('" & sOrderId & "', '" & bIsParent & "', '" & sIPMA_OrderID &  "');"  & chr(34) & ");"
   Else
      
       sJscriptMenu      = sJscriptMenu & "aI(" & chr(34) & "image=/images/mark_as_dupe.gif;offbgcolor=#EFF3FF;text=Mark Order As Dupe;clickfunction=markOrderAsDupe('" & sOrderId & "', '" & bIsParent & "', '" & sIPMA_OrderID &  "');"  & chr(34) & ");"
   End If
   
End If
If ( bCanUnDupe ) Then
   sJscriptMenu      = sJscriptMenu & "aI(" & chr(34) & "image=/images/undupe.gif;offbgcolor=#EFF3FF;separatorsize=1;text=UnDupe This Order;clickfunction=unDupeOrder('" & sIPMA_OrderID & "');"  & chr(34) & ");"
End If

sJscriptMenu      = sJscriptMenu & "aI(" & chr(34) & "image=/images/Add_Order.gif;offbgcolor=#EFF3FF;text=Add Another Order For This Investor;url=" & sAddOrderQuery & chr(34) & ");"
sJscriptMenu      = sJscriptMenu & "aI(" & chr(34) & "image=/images/edit_order.gif;offbgcolor=#EFF3FF;text=Edit Order;url=" & sEditOrderQuery & chr(34) & ");"
sJscriptMenu      = sJscriptMenu & "aI(" & chr(34) & "image=/images/Delete_Order.gif;offbgcolor=#EFF3FF;text=Delete Order;url=" & sDeleteOrderQuery & chr(34) & ");"
sJscriptMenu      = sJscriptMenu & "aI(" & chr(34) & "image=/images/view_feedback.gif;offbgcolor=#EFF3FF;text=View Feedback;url=" & sViewFeedback & chr(34) & ");"
sJscriptMenu      = sJscriptMenu & "aI(" & chr(34) & "image=/images/view_history.gif;offbgcolor=#EFF3FF;text=View Order History;url=" & sViewOrderHistory & chr(34) & ");"
sJscriptMenu      = sJscriptMenu & "aI(" & chr(34) & "image=/images/xp_width.gif;offbgcolor=#EFF3FF;text=View Company Admin;url=" & sViewCompanyAdmin & chr(34) & ");"
sJscriptMenu      = sJscriptMenu & "}drawMenus();"
sJscriptMenu      = sJscriptMenu & "with(milonic=new menuname(" & chr(34) & "MainMenu_" & sUniqueRowId & chr(34) & ")){"
sJscriptMenu      = sJscriptMenu & "alwaysvisible=1;style=XPMainStyle;top=155;" &_
               "orientation=" & chr(34) & "horizontal" & chr(34) & ";position=" & chr(34) & "relative" & chr(34) &_
                  ";overfilter=" & chr(34) & chr(34) & ";"
sJscriptMenu      = sJscriptMenu & "aI(" & chr(34) & "text=;url=http://www.milonic.com/;status=Back To Home Page;" & chr(34) & ");"
sJscriptMenu      = sJscriptMenu & "aI(" & chr(34) & "image=/images/3dwhite_downarrow.gif;onfunction=showtip('<b>" & sOrderCompanyName & "</b>');showmenu=BBuildingMenu_" & sUniqueRowId  & ";" & chr(34) & ");"
sJscriptMenu      = sJscriptMenu & "}drawMenus();</SCRIPT>"
BuildBookBuildingMenuJScript = sJscriptMenu
End Function
%>
<form name="form1">
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
<%for i = 1 to 400%>
   <TR>
      <td><%=i%></td>
      <TD><img id="MarkDupeImg_<%=i%>" src="images/arrow_markdupe.gif" Style="display:none"/></TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
      <TD><%=BuildBookBuildingMenuJScript (100+ i, 200 + i, 300 + i, 400 + i, "A test company_" & Cstr(i), 500+i, true, true, true )%></TD>
   </TR>
<%next%>
</TABLE>
</form>
</BODY>
</HTML>

Menu_Data

Code:

_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;




with(XPMainStyle=new mm_style()){
bordercolor="#8A867A";
borderstyle="solid";
borderwidth=1;
closeonclick=true;
closeAllOnClick = true;
fontfamily="Tahoma,Helvetica,Verdana";
fontsize="70%";
fontstyle="normal";
fontweight="normal";
offbgcolor="#B8D1F8";
offcolor="#000000";
onbgcolor="#C1D2EE";
onborder="1px solid #000080";
oncolor="#000000";
openonclick=true;
overbgimage="images/orange_Venom.gif";
padding=3;
}

with(XPMenuStyle=new mm_style()){
styleid=1;
bordercolor="#8A867A";
borderstyle="solid";
borderwidth=1;
closeonclick=true;
fontfamily="Tahoma,Helvetica,Verdana";
fontsize="90%";
fontstyle="normal";
fontweight="normal";
image="images/xpblank.gif";
imagepadding=3;
menubgimage="images/backoff2003_web.gif";
offbgcolor="transparent";
offcolor="#000000";
onbgcolor="#ffeec2";
onborder="1px solid #000080";
openonclick=true;
oncolor="#000000";
outfilter="randomdissolve(duration=0.1)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#B8D1F8', Direction=135, Strength=5)";
padding=4;
separatoralign="right";
separatorcolor="#6A8CCB";
separatorpadding=1;
separatorwidth="80%";
subimage="images/arrow.gif";
subimagepadding=3;
menubgcolor="#EBF0EC";
}
drawMenus()

with(milonic=new menuname("TestMP")){
style=XPMenuStyle;
aI("image=/images/Add_Order.gif;offbgcolor=#EFF3FF;text=First Test;url=audit_trail.asp?orderid=;");
}

HTML Output - I included it anyway...I've removed the other 396 rows for berevity

Code:

<HTML>
<HEAD>
<script type="text/javascript" src="/inc/milonic_src.js"></script>   
<a class=milonic href="http://www.milonic.com/">JavaScript DHTML Popup Menus From Milonic.com</a>
<script   type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=/inc/mmenuns4.js><\/scr"+"ipt>");      
  else _d.write("<scr"+"ipt type=text/javascript src=/inc/mmenudom.js><\/scr"+"ipt>"); 
</script>
<script type="text/javascript" src="/inc/menu_data.js"></script>
<script type="text/javascript" src="/inc/tooltips.js"></script>   
</head>
<SCRIPT LANGUAGE=javascript>
function unDupeOrder ( orderId )
{
   if (confirm('are you sure you want to undupe the order you have selected?. Choose cancel to stop unduping or OK to perform the undupe'))
         {
            //alert('Unduping about to happen on order ' + orderId );
            form1.mode.value = 'UnDupe';
            form1.UnDupeOrderId.value = orderId;
            form1.submit();
            
         }
   else
      return;
   

}
function markOrderAsDupe( orderId, isParent, IPMAOrderId )
{

   var imageId = "MarkDupeImg_" + orderId; // "80705";
   var orderImage = document.getElementById(imageId);
   // Check the user is not trying to dupe 2 parents
   if ( selectedDupeArray.length > 0 )
   {
      if ( selectedDupeArray[0].orderId == orderId )
      {
         if (confirm('You cannot dupe the same order. Choose cancel to select a different order or OK to de-select this order'))
         {
            
            selectedDupeArray.pop();
            //alert('In here!');
            orderImage.style.display  = "none";
            return;
         }
         else{return;}
            
         
      }
      if ( selectedDupeArray[0].isParent == "True" && isParent == "True")
         {
               alert('You cannot Undupe 2 parents. Please select another dupe as your target or deselect the original and make a new selection!');
               return false;
         }
      else
         {
            if (confirm('About to perform duping. Are you sure you want to proceed?')){
               
               form1.mode.value = 'Dupe';
               form1.DupeOrderId1.value = selectedDupeArray[0].IPMAOrderId;
               //alert( 'Iniital IPMAOrder id  ' + form1.DupeOrderId1.value );
               form1.DupeOrderId2.value = IPMAOrderId;
               form1.submit();
               
            }
            else
               return;
         }
      
   }
   
    selectedDupeArray[selectedDupeArray.length] = new duplicateOrder( orderId, isParent, IPMAOrderId );
    

   
   if (!orderImage) { 
           alert("unrecognized ID"); 
          return false; 
        } 
   orderImage.style.display  = "block";
   return;

}
</script>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>



<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>

   <TR>
      <td>1</td>
      <TD><img id="MarkDupeImg_1" src="images/arrow_markdupe.gif" Style="display:none"/></TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
      <TD><SCRIPT type="text/javascript">with(milonic=new menuname("BBuildingMenu_501")){margin=2;style=XPMenuStyle;aI("bgimage=images/xp_panel_subhead.gif;fontsize=90%;fontweight=bold;separatorsize=1;image=images/transparent.gif;imagewidth=18;text=A test company_1;");aI("image=/images/mark_as_dupe.gif;offbgcolor=#EFF3FF;text=Mark Order As Dupe;clickfunction=markOrderAsDupe('301', 'True', '401');");aI("image=/images/undupe.gif;offbgcolor=#EFF3FF;separatorsize=1;text=UnDupe This Order;clickfunction=unDupeOrder('401');");aI("image=/images/Add_Order.gif;offbgcolor=#EFF3FF;text=Add Another Order For This Investor;url=sales_orderform.asp?issueid=101&clientid=201");aI("image=/images/edit_order.gif;offbgcolor=#EFF3FF;text=Edit Order;url=sales_orderform.asp?clientid=201&mode=edit&issueid=101&orderid=301");aI("image=/images/Delete_Order.gif;offbgcolor=#EFF3FF;text=Delete Order;url=sales_orderformupdate.asp?mode=delete&order_id=301&issueid=101");aI("image=/images/view_feedback.gif;offbgcolor=#EFF3FF;text=View Feedback;url=questionnaire.asp?issueid=101&companyid=201");aI("image=/images/view_history.gif;offbgcolor=#EFF3FF;text=View Order History;url=audit_trail.asp?orderid=301");aI("image=/images/xp_width.gif;offbgcolor=#EFF3FF;text=View Company Admin;url=issue_companyform.asp?companyid=201&mode=edit");}drawMenus();with(milonic=new menuname("MainMenu_501")){alwaysvisible=1;style=XPMainStyle;top=155;orientation="horizontal";position="relative";overfilter="";aI("text=;url=http://www.milonic.com/;status=Back To Home Page;");aI("image=/images/3dwhite_downarrow.gif;onfunction=showtip('<b>A test company_1</b>');showmenu=BBuildingMenu_501;");}drawMenus();</SCRIPT></TD>
   </TR>

   <TR>
      <td>2</td>
      <TD><img id="MarkDupeImg_2" src="images/arrow_markdupe.gif" Style="display:none"/></TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
      <TD><SCRIPT type="text/javascript">with(milonic=new menuname("BBuildingMenu_502")){margin=2;style=XPMenuStyle;aI("bgimage=images/xp_panel_subhead.gif;fontsize=90%;fontweight=bold;separatorsize=1;image=images/transparent.gif;imagewidth=18;text=A test company_2;");aI("image=/images/mark_as_dupe.gif;offbgcolor=#EFF3FF;text=Mark Order As Dupe;clickfunction=markOrderAsDupe('302', 'True', '402');");aI("image=/images/undupe.gif;offbgcolor=#EFF3FF;separatorsize=1;text=UnDupe This Order;clickfunction=unDupeOrder('402');");aI("image=/images/Add_Order.gif;offbgcolor=#EFF3FF;text=Add Another Order For This Investor;url=sales_orderform.asp?issueid=102&clientid=202");aI("image=/images/edit_order.gif;offbgcolor=#EFF3FF;text=Edit Order;url=sales_orderform.asp?clientid=202&mode=edit&issueid=102&orderid=302");aI("image=/images/Delete_Order.gif;offbgcolor=#EFF3FF;text=Delete Order;url=sales_orderformupdate.asp?mode=delete&order_id=302&issueid=102");aI("image=/images/view_feedback.gif;offbgcolor=#EFF3FF;text=View Feedback;url=questionnaire.asp?issueid=102&companyid=202");aI("image=/images/view_history.gif;offbgcolor=#EFF3FF;text=View Order History;url=audit_trail.asp?orderid=302");aI("image=/images/xp_width.gif;offbgcolor=#EFF3FF;text=View Company Admin;url=issue_companyform.asp?companyid=202&mode=edit");}drawMenus();with(milonic=new menuname("MainMenu_502")){alwaysvisible=1;style=XPMainStyle;top=155;orientation="horizontal";position="relative";overfilter="";aI("text=;url=http://www.milonic.com/;status=Back To Home Page;");aI("image=/images/3dwhite_downarrow.gif;onfunction=showtip('<b>A test company_2</b>');showmenu=BBuildingMenu_502;");}drawMenus();</SCRIPT></TD>
   </TR>

   <TR>
      <td>3</td>
      <TD><img id="MarkDupeImg_3" src="images/arrow_markdupe.gif" Style="display:none"/></TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
      <TD><SCRIPT type="text/javascript">with(milonic=new menuname("BBuildingMenu_503")){margin=2;style=XPMenuStyle;aI("bgimage=images/xp_panel_subhead.gif;fontsize=90%;fontweight=bold;separatorsize=1;image=images/transparent.gif;imagewidth=18;text=A test company_3;");aI("image=/images/mark_as_dupe.gif;offbgcolor=#EFF3FF;text=Mark Order As Dupe;clickfunction=markOrderAsDupe('303', 'True', '403');");aI("image=/images/undupe.gif;offbgcolor=#EFF3FF;separatorsize=1;text=UnDupe This Order;clickfunction=unDupeOrder('403');");aI("image=/images/Add_Order.gif;offbgcolor=#EFF3FF;text=Add Another Order For This Investor;url=sales_orderform.asp?issueid=103&clientid=203");aI("image=/images/edit_order.gif;offbgcolor=#EFF3FF;text=Edit Order;url=sales_orderform.asp?clientid=203&mode=edit&issueid=103&orderid=303");aI("image=/images/Delete_Order.gif;offbgcolor=#EFF3FF;text=Delete Order;url=sales_orderformupdate.asp?mode=delete&order_id=303&issueid=103");aI("image=/images/view_feedback.gif;offbgcolor=#EFF3FF;text=View Feedback;url=questionnaire.asp?issueid=103&companyid=203");aI("image=/images/view_history.gif;offbgcolor=#EFF3FF;text=View Order History;url=audit_trail.asp?orderid=303");aI("image=/images/xp_width.gif;offbgcolor=#EFF3FF;text=View Company Admin;url=issue_companyform.asp?companyid=203&mode=edit");}drawMenus();with(milonic=new menuname("MainMenu_503")){alwaysvisible=1;style=XPMainStyle;top=155;orientation="horizontal";position="relative";overfilter="";aI("text=;url=http://www.milonic.com/;status=Back To Home Page;");aI("image=/images/3dwhite_downarrow.gif;onfunction=showtip('<b>A test company_3</b>');showmenu=BBuildingMenu_503;");}drawMenus();</SCRIPT></TD>
   </TR>

   <TR>
      <td>4</td>
      <TD><img id="MarkDupeImg_4" src="images/arrow_markdupe.gif" Style="display:none"/></TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
      <TD><SCRIPT type="text/javascript">with(milonic=new menuname("BBuildingMenu_504")){margin=2;style=XPMenuStyle;aI("bgimage=images/xp_panel_subhead.gif;fontsize=90%;fontweight=bold;separatorsize=1;image=images/transparent.gif;imagewidth=18;text=A test company_4;");aI("image=/images/mark_as_dupe.gif;offbgcolor=#EFF3FF;text=Mark Order As Dupe;clickfunction=markOrderAsDupe('304', 'True', '404');");aI("image=/images/undupe.gif;offbgcolor=#EFF3FF;separatorsize=1;text=UnDupe This Order;clickfunction=unDupeOrder('404');");aI("image=/images/Add_Order.gif;offbgcolor=#EFF3FF;text=Add Another Order For This Investor;url=sales_orderform.asp?issueid=104&clientid=204");aI("image=/images/edit_order.gif;offbgcolor=#EFF3FF;text=Edit Order;url=sales_orderform.asp?clientid=204&mode=edit&issueid=104&orderid=304");aI("image=/images/Delete_Order.gif;offbgcolor=#EFF3FF;text=Delete Order;url=sales_orderformupdate.asp?mode=delete&order_id=304&issueid=104");aI("image=/images/view_feedback.gif;offbgcolor=#EFF3FF;text=View Feedback;url=questionnaire.asp?issueid=104&companyid=204");aI("image=/images/view_history.gif;offbgcolor=#EFF3FF;text=View Order History;url=audit_trail.asp?orderid=304");aI("image=/images/xp_width.gif;offbgcolor=#EFF3FF;text=View Company Admin;url=issue_companyform.asp?companyid=204&mode=edit");}drawMenus();with(milonic=new menuname("MainMenu_504")){alwaysvisible=1;style=XPMainStyle;top=155;orientation="horizontal";position="relative";overfilter="";aI("text=;url=http://www.milonic.com/;status=Back To Home Page;");aI("image=/images/3dwhite_downarrow.gif;onfunction=showtip('<b>A test company_4</b>');showmenu=BBuildingMenu_504;");}drawMenus();</SCRIPT></TD>
   </TR>

   <TR>
      <td>5</td>
      <TD><img id="MarkDupeImg_5" src="images/arrow_markdupe.gif" Style="display:none"/></TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
      <TD><SCRIPT type="text/javascript">with(milonic=new menuname("BBuildingMenu_505")){margin=2;style=XPMenuStyle;aI("bgimage=images/xp_panel_subhead.gif;fontsize=90%;fontweight=bold;separatorsize=1;image=images/transparent.gif;imagewidth=18;text=A test company_5;");aI("image=/images/mark_as_dupe.gif;offbgcolor=#EFF3FF;text=Mark Order As Dupe;clickfunction=markOrderAsDupe('305', 'True', '405');");aI("image=/images/undupe.gif;offbgcolor=#EFF3FF;separatorsize=1;text=UnDupe This Order;clickfunction=unDupeOrder('405');");aI("image=/images/Add_Order.gif;offbgcolor=#EFF3FF;text=Add Another Order For This Investor;url=sales_orderform.asp?issueid=105&clientid=205");aI("image=/images/edit_order.gif;offbgcolor=#EFF3FF;text=Edit Order;url=sales_orderform.asp?clientid=205&mode=edit&issueid=105&orderid=305");aI("image=/images/Delete_Order.gif;offbgcolor=#EFF3FF;text=Delete Order;url=sales_orderformupdate.asp?mode=delete&order_id=305&issueid=105");aI("image=/images/view_feedback.gif;offbgcolor=#EFF3FF;text=View Feedback;url=questionnaire.asp?issueid=105&companyid=205");aI("image=/images/view_history.gif;offbgcolor=#EFF3FF;text=View Order History;url=audit_trail.asp?orderid=305");aI("image=/images/xp_width.gif;offbgcolor=#EFF3FF;text=View Company Admin;url=issue_companyform.asp?companyid=205&mode=edit");}drawMenus();with(milonic=new menuname("MainMenu_505")){alwaysvisible=1;style=XPMainStyle;top=155;orientation="horizontal";position="relative";overfilter="";aI("text=;url=http://www.milonic.com/;status=Back To Home Page;");aI("image=/images/3dwhite_downarrow.gif;onfunction=showtip('<b>A test company_5</b>');showmenu=BBuildingMenu_505;");}drawMenus();</SCRIPT></TD>
   </TR>

   
</TABLE>

</BODY>
</HTML>

Each table row has a different menu

Poster: mikip
Dated: Tuesday May 10 2005 - 17:52:58 BST

Ruth,

I can certainly try and use the the preloadmenuimages module which will lessen the load time!
Each submenu in each cell has to be different because each rows operations (essentially the URL's in the submenus) is unique to each row - Each row is an order e.g.

[Row 1 of table cell] Order 1 - Sub Menu Item 1 = loadorder.asp?orderid=1
[Row 2 of table cell] Order 2 - Sub Menu Item 1 = loadorder.asp?orderid=2

I will try and get this page up on my public web site this evening

Now, I guess it would be more efficient to generate each menu dynamically after clicking the main menu option - If you could provide some help in how to add the sub-menu options dynamically after clicking the main menu in a table cell. I could try that however, in a brief test, I removed all the sub menu options and had one static sub-menu option in menu_data and it still seemed to cause problems on the page (Slow loading of the menu). Is it just prohibitive to have so many menus in a page?

Any further help greatly appreciated

Regards

Mike

Poster: kevin3442
Dated: Tuesday May 10 2005 - 18:13:06 BST

Hi Mike,

In case you're wondering what happened to Ruth's post that you replied to... I accidentally deleted it. Oops! (Bad moderator... bad!) Hope she doesn't kill me!

At least you know we're having a look. I think there are several things we can suggest to help, but it may take a little time to get all of it together.

Question: On first glance, it looks like the submenu selections are the same for each item; just the parameters passed in the urls change... correct?

Kevin

Poster: kevin3442
Dated: Tuesday May 10 2005 - 18:58:10 BST

Hi Mike,

A couple more questions:

(1) In each row, the first item in the "main" menu is a link to milonic.com... you're using the unlicensed version. I assume your ultimate intent is to have only one item per main menu, correct?

(2) Would you be opposed to using a little client-side scripting to set the urls in the menu items?

Kevin

Answers to questions

Poster: mikip
Dated: Tuesday May 10 2005 - 19:44:47 BST

Kevin,

I'll forgive you for removing Ruth's post (as long as she does!)

In answer to your questions:

1) Yes, you are right..the submenu items are exactly the same with different paramters. The only one difference is based on some logic in the ASP which determines that some menu items are not available to some orders. I see the way forward (maybe what you are thinking) is to to use the ASP to populate the parameters for an Onclick method that then constructs the sub-menu when clicked for the appropriate order row -Not sure if that is what you had in mind?

2) Yes, if we can get this to work then we will purchase a license and get rid of that menu item (is this menu item causing any delay?)...it will be a good reference client....v.large bank

3) Nope...no problem with any client side scripting - Again, not sure if what I hinted at in 1 is what you are thinking of.

Essentially, I need to very quickly prove that having these sub-menus in what could be 400-500 rows (lets not get on to whay we have 500 rows - that would make me look like :roll:

!!!) is not in any way prohibitive to using the page (we can live with a little slower load time but not being able to use the page/menus is not an option) otherwise I'll have to go to Plan B (just as soon as I think of a Plan B!)

Again, your help is greatly appreciated

Many Thanks in advance

Mike

Poster: kevin3442
Dated: Tuesday May 10 2005 - 20:43:53 BST

Hi Mike,

Yes, you're thinking exactly what I'm thinking... I think.

My bet is that it is the large number of calls to drawMenus() that's causing most of the slow down. Each row has two menus -- a main and a sub -- and you are calling drawMenus() after each menu definition. For a page with 500 rows, that's 1000 calls to drawMenus(). You could immediately cut the number of calls to drawMenus() in half by only calling it once per <td>, right before the closing </script> tag. It should be easy to remove the first drawMenus() call in each <td> in your asp script. Might want to try that, and see if it improves load time at all (just to test the theory).

Anyway, here's my thinking.

(1) Since the "main" menu in each row is essentially just an image that's used to open the submenu, I would scrap each row's main menu, and just put in a plain ol' <img> in its place. I would open the submenu with the image's onclick event using the menu system's popup() method. That automatically cuts the number of menus in half.

(2) It is pretty straight forward to manipulate menu item programatically, once you figure out the system's internal data structure. Since the submenus contain the same items, I would have just one submenu, defined in menu_data.js. Again, using the "main menu" image's onclick event, we would programatically change the submenu items, putting in the correct urls, etc., then pop the submenu. The properties for the submenu items would be generated by the asp code (generating the javascript for the image's onclick event). I think that it would also be possible to conditionally disable items on some rows. This approach eliminates all but one submenu.

The end result... the entire system requires only one menu, no matter how many rows are in the table. Drawing one menu as opposed to 1000 should make a difference in performance.

I'll work up the onclick handler based on the sample code you posted. I'll be back...

Cheers,

Kevin

Sounds like a plan

Poster: mikip
Dated: Tuesday May 10 2005 - 21:37:08 BST

Kevin,

Thanks for the reply. Yep, this all makes sense to me and sound like a plan! It will have to wait till tomorrow to test the theory and I'll wait to grab the code that you post. I had a horrible suspicion I was drawing the menu too many times (i could see by what IE was continually doing). Hopefully, I'll be sat here tomorrow, smoking my fat cigar (or pretending at least as i dont smoke), saying "I love it when a plan comes together"

Again, thanks so much for your time and if this works, I owe you a virtual beer

Cheers

Mike

Poster: kevin3442
Dated: Tuesday May 10 2005 - 23:13:40 BST

Hi Mike,

First stab:

menu_data.js

Code:

_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;

closeAllOnClick = true;

function setSubmenu(companyName, companyid, issueid, clientid, orderid, isParent, IPMAOrderId)
{
  var itemArr = _m[_smI][0];

  _mi[itemArr[0]][1] = companyName;
  _mi[itemArr[1]][2] = "javascript:markOrderAsDupe('" + orderid + "','" + isParent + "','" + IPMAOrderId + "')";
  _mi[itemArr[2]][2] = "javascript:unDupeOrder('" + IPMAOrderId + "')";
  _mi[itemArr[3]][2] = "sales_orderform.asp?issueid=" + issueid + "\&client=" + clientid;
  _mi[itemArr[4]][2] = "sales_orderform.asp?clientid=" + clientid + "\&mode=edit\&issueid=" + issueid + "\&orderid=" + orderid;
  _mi[itemArr[5]][2] = "sales_orderformupdate.asp?mode=delete\&orderid=" + orderid + "\&issueid=" + issueid;
  _mi[itemArr[6]][2] = "questionnaire.asp?issueid=" + issueid + "\&companyid=" + companyid;
  _mi[itemArr[7]][2] = "audit_trail.asp?orderid=" + orderid;
  _mi[itemArr[8]][2] = "issue_companyform.asp?companyid=" + companyid + "\&mode=edit";

  BDMenu(_smI);

  popup("submenu",1);
}

with(XPMainStyle=new mm_style()){
bordercolor="#8A867A";
borderstyle="solid";
borderwidth=1;
closeonclick=true;
closeAllOnClick = true;
fontfamily="Tahoma,Helvetica,Verdana";
fontsize="70%";
fontstyle="normal";
fontweight="normal";
offbgcolor="#B8D1F8";
offcolor="#000000";
onbgcolor="#C1D2EE";
onborder="1px solid #000080";
oncolor="#000000";
openonclick=true;
overbgimage="images/orange_Venom.gif";
padding=3;
}

with(XPMenuStyle=new mm_style()){
styleid=1;
bordercolor="#8A867A";
borderstyle="solid";
borderwidth=1;
closeonclick=true;
fontfamily="Tahoma,Helvetica,Verdana";
fontsize="90%";
fontstyle="normal";
fontweight="normal";
image="images/xpblank.gif";
imagepadding=3;
menubgimage="images/backoff2003_web.gif";
offbgcolor="transparent";
offcolor="#000000";
onbgcolor="#ffeec2";
onborder="1px solid #000080";
openonclick=true;
oncolor="#000000";
outfilter="randomdissolve(duration=0.1)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#B8D1F8', Direction=135, Strength=5)";
padding=4;
separatoralign="right";
separatorcolor="#6A8CCB";
separatorpadding=1;
separatorwidth="80%";
subimage="images/arrow.gif";
subimagepadding=3;
menubgcolor="#EBF0EC";
}

with(milonic=new menuname("submenu")){
margin=2;
style=XPMenuStyle;
aI("text=Company Name;type=header;");
aI("text=Mark Order As Dupe;");
aI("text=UnDupe This Order;");
aI("text=Add Another Order For This Investor;");
aI("text=Edit Order;");
aI("text=Delete Order;");
aI("text=View Feedback;");
aI("text=View Order History;");
aI("text=View Company Admin;");
}

drawMenus()

var _smI = getMenuByName("submenu");

The <table> from you html output would now look like:

Code:

<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1> 

   <TR> 
      <td>1</td> 
      <TD><img id="MarkDupeImg_1" src="images/arrow_markdupe.gif" Style="display:none"/></TD> 
      <TD></TD> 
      <TD></TD> 
      <TD></TD> 
      <TD><img src="/images/3dwhite_downarrow.gif" onclick="setSubmenu('Company A','201','101','201','301','True','401')"></TD>
   </TR>

   <TR>
      <td>2</td>
      <TD><img id="MarkDupeImg_2" src="images/arrow_markdupe.gif" Style="display:none"/></TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
      <TD><img src="/images/3dwhite_downarrow.gif" onclick="setSubmenu('Company B','202','102','202','302','True','402')"></TD>
   </TR>

   <TR>
      <td>3</td>
      <TD><img id="MarkDupeImg_3" src="images/arrow_markdupe.gif" Style="display:none"/></TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
      <TD><img src="/images/3dwhite_downarrow.gif" onclick="setSubmenu('Company C','203','103','203','303','True','403')"></TD>
   </TR>

   <TR>
      <td>4</td>
      <TD><img id="MarkDupeImg_4" src="images/arrow_markdupe.gif" Style="display:none"/></TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
      <TD><img src="/images/3dwhite_downarrow.gif" onclick="setSubmenu('Company D','204','104','204','304','True','404')"></TD>
   </TR>

   <TR>
      <td>5</td>
      <TD><img id="MarkDupeImg_5" src="images/arrow_markdupe.gif" Style="display:none"/></TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
      <TD><img src="/images/3dwhite_downarrow.gif" onclick="setSubmenu('Company E','205','105','205','305','True','405')"></TD>
   </TR>

</TABLE> 

There is only one submenu (creatively named, "submenu") and it's defined in menu_data.js. it's just a shell of a submenu; sort of a place holder. The setSubmenu() function, also defined in menu_data.js, sets properties of each item in "submenu" according to the parameters passed (I used the various parameter names that I saw in your sample html output, and set them in the same order within each menu item's url).

Note the <img> tag in place of the <SCRIPT> blocks you had in your <td>s. The onclick event is handled by setSubmenu(). Of course, you would generate the parameters to pass to setSubmenu() with your asp code (I'll leave that to you

).

This is just a framework. There may be additions to the function to handle disabling menu items or other conditional events. Or, perhaps it'll turn out that it would be better to have a separate function to set each submenu item. But I think it illustrates the idea.

The last thing that setSubmenu() does is call popup() to actually open the submenu. By passing 1 as a second parameter, we tell popup() to open the specified menu at the current X,Y coordinates of the pointer. You can also add a third and fourth parameter for top and left offsets. If you'd prefer to have the menu open in relation to the image's position, you can do that too (i.e., open directly below the "main menu" image). If that's something you want to do, you'll need to use asp to add unique id= and name= attributes to each <img> tag (id and name should be assigned the same value). In the image's onclick event, pass the image's id/name (as a string) to setSubmenu(). Within setSubmenu(), pass the image id as the second parameter in popup(). Hope that made sense!

Hope that helps,

Kevin

Thanks - will try this tomorrow

Poster: mikip
Dated: Tuesday May 10 2005 - 23:44:56 BST

Kevin,

Thanks so much for the prompt reply - I will try this out tomorrow. i noticed that you did not define any images for the sub-menu? Did we decide that this was part of the problem or can I use something Ruth mentioned about pre-loading the images (on the previous post that was removed)?

Thanks and I'll let you know how it works out

Cheers and have a great evening (whats left of it)

Mike

Poster: kevin3442
Dated: Tuesday May 10 2005 - 23:52:53 BST

Hi Mike,

I just removed the image definitions because I didn't have your images and I got tired of looking at little red Xs during my tests!

You can certainly put them back in. I don't think preloadimages.js will be necessary. You don't really have a lot of images... you just had a lot of menus, but they were all using the same small set of images. You may notice a very slight delay when you open the submenu for the first time (in fact, you may notice it building itself as the images are downloaded to the cache). But once the images are in the browser cache, they should load quickly from there each subsequent time the menu is opened. Of course, preloading the images won't hurt. What you'd gain here is that you won't notice the menu building itself the first time it's opened. I think in this case it's just a matter of preference; it shouldn't have much bearing on load time.

Cheers,

Kevin

Smoking my cigar

Poster: mikip
Dated: Wednesday May 11 2005 - 10:43:23 BST

Kevin,

I sit here smoking my fat, imaginary cigar, admiring the now speedy menus in my giant order page. May you live long and have many sub-menus.

Huge thanks for all your efforts (and to Ruth) - Time to break open the wallet.

Cheers

Mike

One more question

Poster: mikip
Dated: Wednesday May 11 2005 - 17:29:47 BST

Kevin,

One more question - Can you just give me a rough idea how to deal with making some menu items dissapear and greying out conditionally? I cannot seem to find a menu item property for visibility (or I'm just missing it). Also, how can I can make my header in the submenu non-clickable? If you could just point me in the right direction, i'll stumble the rest of the way.

Cheers again

Mike

Poster: Ruth
Dated: Wednesday May 11 2005 - 21:22:05 BST

Hi Mike,

mikip wrote:

I'll forgive you for removing Ruth's post (as long as she does!)

Well, [grumbles] I am all forgiveness and light! :lol:

As to making the 'header' item in the submenu non-clickable, add type=header;

On greying out, that's something Kevin will have to address. There is a function called mm_changeItemProperty() Kevin did the dynamic drag demo here. Perhaps that will give you some idea how to do it, if you look at the dynamic_drag_data.js file

Ruth

Where is this example

Poster: mikip
Dated: Wednesday May 11 2005 - 23:35:53 BST

Ruth,

Thanks for the reply. Where would I find the

Quote:

dynamic drag demo here

Thanks in advance

Mike

Poster: Ruth
Dated: Thursday May 12 2005 - 0:38:33 BST

:oops:

I should have rephrased that or left the here out or said there. It's really the blue mm_changeItemProperty() that is the link. Sorry

change item property dynamic drag There's a link to download the sample at the bottom. You also need the newest dragdrop.js file which has a link there if you are downloading the sample and playing with it on your own desktop. If you just want to see the function in the data file you can get the data file

here

Ruth

Yep, that's what I'm looking for

Poster: mikip
Dated: Thursday May 12 2005 - 11:39:35 BST

Ruth,

Looks like these are exactly what I'm looking for

In fact the 2nd sample at http://support.milonic.com/demos/change_item_property/disable_item.htm is exactly what I need. Just one thing, the download link at the bottom of the page to demo.zip is broken. Any chance you can point me in the right direction at the correct URL? The project manager just told me he is going ahead with the purchase....

Again, thanks for the support...much appreciated

Regards

Mike

Poster: Ruth
Dated: Thursday May 12 2005 - 12:53:37 BST

Hi Mike,

Sorry about the link. I was making changes on some of these and forgot to update that. I put the whole demo in one zip file, the same as the link on the entry page. I've made the correction, but you can get it here from this.

mm_change_item_property

Welcome to the Milonic. I think it's the best menu out there.

Ruth

I'm grey now!

Poster: mikip
Dated: Thursday May 12 2005 - 16:29:13 BST

Ruth,

Yep...I'm all greyed out now!

Thanks for your help

Mike