dynamically create menu - after the page has loaded

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

dynamically create menu - after the page has loaded

Poster: subodh
Dated: Wednesday December 29 2004 - 0:31:10 GMT

Hi
Can I create and display a menu after the page has loaded.
I want to generate the menu, in html1 and the data for the menu is retrived from the server via iframe which loads html2 in the iframe.
html2 has the required information to build the menu.
How can I build and display the menu in Html1.

Thanks in advance
Subodh

Poster: Ruth
Dated: Wednesday December 29 2004 - 4:34:05 GMT

Hi,
Could you post a url with the page as it is so we can see what you are attempting and test it? Thanks.

Ruth

Poster: subodh
Dated: Wednesday December 29 2004 - 16:11:01 GMT

Hi Ruth

Thanks for responding promptly. I am sorry but I cannot paste the url as I am behind the Firewall. But I will try to explain the exact scenario.
I have a page (html1) which displays some user actions against a particular feature in a table row

<table>
<tr><td>Feature1</td><td>action1</td><td id=td1>More Actions</td></tr>
<tr><td>Feature2</td><td>action2</td><td id=td2>More Actions</td></tr>
<tr><td>Feature3</td><td>action3</td><td id=td3>More Actions</td></tr>
<tr><td colspan=3><iFrame id=myFrame src="about:blank"></iFrame></td></tr>
</table>

First Column is Feature Name, Second column has Primary Action and Third column has link to Additional Actions that are relevant for the Feature. Due to performance issues we cannot load all the additional actions for all the feature at the page load itself. So when a user clicks on "More Action" link for a particular feature, we want to make the server trip through the iFrame, get the required data in iFrame and then display those additional options as menu items in the same row.

So when user click on "More Actions" in cell: td1, we will make the server trip through iFrame get the data for the menu, and then build the menu dynamically and display it in td1 itself. When user clicks on td2, we will clear the menu in td1 and build a menu in td2.

So essentially I need to have a menu object to which I can add & delete the items dynamically (after the page has loaded, through javascript) and then place that menu in any of the cells that the user clicks.

Functionality wise consider the following html code:
<html>
<head>
<script>

function showMenu(cellID){
// This function should dynamically build the menu and
// display it in td1 when it is clicked, and when td2 is clicked
// it should remove the menu from td1 and display it in td2.
// MenuItems would be different for td1 and td2.
}

</script>
</head>
<body>
<table>
<tr>
<td><a href="#" onClick='showMenu("td1")>show menu</a></td><td id=td1>&nbsp</td>
</tr>
<tr>
<td><a href="#" onClick='showMenu("td2")>show menu</a></td><td id=td2>&nbsp</td>
</tr>
</table>
</body>
</html>

I hope I have been able to explain the scenario, let me know if I should send the actual files to you.

Thanks
Subodh Natu

Poster: subodh
Dated: Wednesday December 29 2004 - 16:24:12 GMT

sorry for replying so many times

this is my first time to reply to any post on this forum. If you could please delete the duplicate onces.

I would be careful from next time.

Thanks
Subodh Natu

Poster: Ruth
Dated: Wednesday December 29 2004 - 17:00:32 GMT

No problem, Subodh, I've removed the extra posts.

What you're asking is way beyond my level of knowledge so I'm not really sure if this POST is relevant or not to what you want.

It might help someone else address the issue if you can post the html for the two pages completely with the function you mention in your post so they can see what's supposed to happen and your menu_data.js file. Please put any code inside the CODE tag, using the code button above.

Ruth

Poster: subodh
Dated: Wednesday December 29 2004 - 22:20:54 GMT

Hi Ruth

I am attaching a modified version, which has two htmls only, so that the functionality required can be seen without the webserver setup.

The client.html is the main html where options are displayed. ServerData.html is loaded in the iFrame of Client.html. In this version the menu is being displayed inside the iFrame, which is placed in the <TD>.

What I need is that the menu should be directly displayed in the <TD> itself (the <td> which has iFrame). So based on the data retrieved in ServerData.html, I should be able to build a menu in Client.html and display it inside the <td> which invoked the iFrame.
Code for Client.html

Code:

<html>
   <head>
   <Title>Html for Main Page</Title>

      <script type="text/javascript" src="milonic_src.js"></script>
      <script   type="text/javascript">
         if(ns4) _d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
         else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
      </script>
      <script type="text/javascript" src="menu_data.js"></script>

      <script type='text/javascript'>

         var oldIndex = "";

         function dynamicMenu(rowIndex){
            if (oldIndex != rowIndex){
               if (oldIndex != "") {
                  document.getElementById("a"+oldIndex).style.display="block";
                  //document.getElementById("myIFrame"+oldIndex).src = "about:blank";
                  document.getElementById("myIFrame"+oldIndex).style.display="none";
               }
               oldIndex = rowIndex;
            }
            document.getElementById("a"+rowIndex).style.display="none";
            document.getElementById("myIFrame"+rowIndex).src = "ServerData.html";
            document.getElementById("myIFrame"+rowIndex).style.display="block";
         }

      </script>
   </head>
   <body>
      <table id=tab1 name=tab1 border=1>
         <tr>
            <td>Fixed Menu Options</td>
            <td id=td1>
               <a id=a1 href='#' onClick='dynamicMenu("1")'>More Options</a>
               <iFrame id=myIFrame1 name=myIFrame1 style="display:none"></iFrame>
            </td>
            <td id=td11></td>
         </tr>
         <tr>
            <td>Fixed Menu Options1</td>
            <td id=td2>
               <a id=a2 href='#' onClick='dynamicMenu("2")'>More Options1</a>
               <iFrame id=myIFrame2 name=myIFrame2 style="display:none"></iFrame>
            </td>
            <td id=td21></td>
         </tr>
         <tr>
            <td>Fixed Menu Options2</td>
            <td id=td3>
               <a id=a3 href='#' onClick='dynamicMenu("3")'>More Options2</a>
               <iFrame id=myIFrame3 name=myIFrame3 style="display:none"></iFrame>
            </td>
            <td id=td31></td>
         </tr>
         <tr>
            <td>Fixed Menu Options3</td>
            <td id=td4>
               <a id=a4 href='#' onClick='dynamicMenu("4")'>More Options3</a>
               <iFrame id=myIFrame4 name=myIFrame4 style="display:none"></iFrame>
            </td>
            <td id=td41></td>
         </tr>
      </table>
   </body>
</html>

Code for ServerData.html

Code:

<html>
   <Title>Html for iFrame</Title>
   <head>

      <script type="text/javascript" src="milonic_src.js"></script>
      <script   type="text/javascript">
         if(ns4) _d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
         else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
      </script>
      <script type="text/javascript" src="menu_data.js"></script>

   </head>

   <body>
      <table>
         <tr>
            <td id=menuCode>
               <script type="text/javascript">
                  with(milonic=new menuname("Actions")){
                  style=menuStyle;
                  // The below menu data would be set from server side code.
                  aI("text=Server Data 1;url=#;");
                  aI("text=Server Data 2;url=#;");
                  aI("text=Server Data 3;url=#;");
                  }

                  with(new menuname("Main Menu")){
                  style=menuStyle;
                  orientation="horizontal";
                  alwaysvisible=1;
                  position="relative";
                  aI("text=Home;url=http://www.milonic.com/;status=Back To Home Page;");
                  aI("text=Actions;showmenu=Actions;url=#");
                  }
                  drawMenus();
               </script>
            </td>
         </tr>
      </table>
   </body>
</html>

code for menu_data.js

Code:

_menuCloseDelay=500           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=150            // The time delay before menus open on mouse over
_subOffsetTop=5               // Sub menu top offset
_subOffsetLeft=-10            // Sub menu left offset



with(menuStyle=new mm_style()){
onbgcolor="#4F8EB6";
oncolor="#ffffff";
offbgcolor="#DCE9F0";
offcolor="#515151";
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
separatorcolor="#2D729D";
separatorsize="1";
padding=5;
fontsize="75%";
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="arrow.gif";
subimagepadding="2";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
}

I hope this explains what I need. I would really appreciate if anyone can help

Thanks
Subodh

Industrial Strength JavaScript and DHTML Menus

dynamically create menu - after the page has loaded