Frames Menu Help

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

Frames Menu Help

Poster: John2005
Dated: Friday September 2 2005 - 19:33:06 BST

Hi,

Milonic Frame Menu works pretty good. But i have a problem on loading the BODY submenu on every click. since menu_data_body.js is included on every page, it execute the database commands and builts the submenu which is really slowly down our application.

I have tried moving everything from menu_data_header.js and menu_data_body.js into functions and executing these on the top frame - HEADER which gets only loaded once. Now from the BODY frame i'm trying to reference the function in menu_data_body.js but doesn't work.

Can somebody help with this or suggest a new way to implement.

Thank you.

Poster: Ruth
Dated: Friday September 2 2005 - 19:36:17 BST

Hi John,

We need a page to see so we can work with the files and your layout.

Ruth

Poster: John2005
Dated: Tuesday September 6 2005 - 22:48:10 BST

Hi Ruth, Heres the sample code.

I'm trying to call function data_body which is located in the header.htm from body.htm.

Please let me know if you need anything else from me.

Thank you

Index.htm

Code:

<html>
<head>
<title>Frames Test</title>
</head>

<frameset framespacing="0" border="0" frameborder="0" rows="60,*">
   <frame name="header" scrolling="no" noresize src="header.htm">

       <frame name="body" src="body.htm">


</frameset>

</html>

Header.htm

Code:

<html>
<head>
<title>Frames Test</title>

<style>

body {
  background-color: #CFE2D1;
  margin-left: 0;
  margin-top; 0;
  font-family: Verdana, Tahoma, Arial;
  font-size: 10px;
}

</style>

<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="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 language=Javascript src="menu_data_header.js" type=text/javascript></script>
<script language=Javascript src="mm_navframe.js" type=text/javascript></script>

</head>

<body marginwidth="0" marginheight="0">

<div id="milonic" style="position: absolute; top: 3px; left: 570px">
header.htm in the "header" frame - <a href=http://www.milonic.com/>JavaScript Menu Courtesy of Milonic.com</a>
</div>

</body>
</html>

Body.htm

Code:

<html>
<head>
<title>Frames Test</title>

<link rel="stylesheet" type="text/css" href="frames.css">

<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="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_body.js"></script>

</head>

<body>

<h1>body.htm in the "body" frame</h1>

<p>
This is a demonstration of using version 5 of Milonic DHTML Menus across standard frames (i.e., not iFrames).
</p>

<h2>The Frame Setup for this Sample</h2>



</body>
</html>

Menu_data_header.js

Code:

data_header()

function data_header()

{

_menuCloseDelay=0;           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=0;            // The time delay before menus open on mouse over
_subOffsetTop=-37;             // Sub menu top offset
_subOffsetLeft=0;            // Sub menu left offset

/// Style Definitions ///

with(mainStyleHoriz=new mm_style()){
onbgcolor="#9EE3A9";
oncolor="#1D3B23";
offbgcolor="#61A76D";
offcolor="#F7F9F7";
bordercolor="#367E45";
borderstyle="solid";
borderwidth=1;
separatorcolor="#325235";
separatorsize=2;
padding=4;
fontsize=12;
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
subimage="submenu_arrow_down-off.gif";
onsubimage="submenu_arrow_down-on.gif";
high3dcolor="#FFFFFF";
low3dcolor="#367E45";
swap3d=1;
}

// Main Menu

with(milonic=new menuname("mainMenuHoriz")){
style=mainStyleHoriz;
top=35;
left=0;
orientation="horizontal";
alwaysvisible=1;
aI("text=Home;url=body.htm;target=body;");
aI("text=Top 1;showmenu=sub1;target=body;onfunction=openSubmenu();offfunction=closeSubmenu();");
aI("text=Top 2;showmenu=sub2;target=body;onfunction=openSubmenu();offfunction=closeSubmenu();");
aI("text=Top 3;showmenu=sub3;target=body;onfunction=openSubmenu();offfunction=closeSubmenu();");
aI("text=Google in Body;url=http://www.google.com/;target=body;")
aI("text=Google in New;url=http://www.google.com/;target=_new;")
}

drawMenus();

}


function data_body()

{

_menuCloseDelay=400           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=0            // The time delay before menus open on mouse over
_subOffsetTop=0              // Sub menu top offset
_subOffsetLeft=0            // Sub menu left offset

/// Style Definitions ///

with(subStyle=new mm_style()){
onbgcolor="#9EE3A9";
oncolor="#1D3B23";
offbgcolor="#61A76D";
offcolor="#F7F9F7";
bordercolor="#367E45";
borderstyle="solid";
borderwidth=1;
separatorcolor="#325235";
separatorsize=2;
padding=4;
fontsize=12;
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
subimage="submenu_arrow_right-off.gif";
onsubimage="submenu_arrow_right-on.gif";
subimagepadding="0 0 0 10";
high3dcolor="#FFFFFF"; //"#edf3ee";
low3dcolor="#367E45";
swap3d=1;
headerbgcolor="#548959";
headercolor="#f2f2ff";
//overfilter="Pixelate(squares=20, duration=0.3)";
//outfilter="Pixelate(squares=20, duration=0.3)";
}

/// Submenu Definitions ///

with(milonic=new menuname("sub1")){
style=subStyle;
aI("text=Sub1.1;showmenu=sub1.1;");
aI("text=Sub1.2;showmenu=sub1.2;");
aI("text=Sub1.3;showmenu=sub1.3;");
aI("text=Sub1.4;showmenu=sub1.4;");
}

with(milonic=new menuname("sub2")){
style=subStyle;
aI("text=Sub2.1;showmenu=sub1.1;");
aI("text=Sub2.2;showmenu=sub1.2;");
aI("text=Sub2.3;showmenu=sub1.3;");
aI("text=Sub2.4;showmenu=sub1.4;");
}

with(milonic=new menuname("sub3")){
style=subStyle;
aI("text=Sub3.1;showmenu=sub1.1;");
aI("text=Sub3.2;showmenu=sub1.2;");
aI("text=Sub3.3;showmenu=sub1.3;");
aI("text=Sub3.4;showmenu=sub1.4;");
}

with(milonic=new menuname("sub4")){
style=subStyle;
aI("text=Sub4.1;showmenu=sub1.1;");
aI("text=Sub4.2;showmenu=sub1.2;");
aI("text=Sub4.3;showmenu=sub1.3;");
aI("text=Sub4.4;showmenu=sub1.4;");
}

with(milonic=new menuname("sub1.1")){
style=subStyle;
aI("text=Open page1;url=page1.htm;");
aI("text=Open page2;url=page2.htm;");
}

with(milonic=new menuname("sub1.2")){
style=subStyle;
aI("text=Open page1;url=page1.htm;");
aI("text=Open page2;url=page2.htm;");
aI("text=Open page3;url=page3.htm;");
}

with(milonic=new menuname("sub1.3")){
style=subStyle;
aI("text=Open page1;url=page1.htm;");
aI("text=Open page2;url=page2.htm;");
aI("text=Open page3;url=page3.htm;");
aI("text=Open page4;url=page4.htm;");
}

with(milonic=new menuname("sub1.4")){
style=subStyle;
aI("text=Open page1;url=page1.htm;");
aI("text=Open page2;url=page2.htm;");
aI("text=Open page3;url=page3.htm;");
aI("text=Open page4;url=page4.htm;");
aI("text=Open page5;url=page5.htm;target=_new;");
}

drawMenus();


}

Menu_data_body.js

Code:

<script language="JavaScript">

top.header.data_body();

</script>

Sample Page1.htm

Code:

<html>
<head>
<title>Frames Test</title>

<link rel="stylesheet" type="text/css" href="frames.css">

<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_body.js"></script>

</head>

<body>
<h1>page1.htm in the "body" frame</h1>

<p>
This page has been loaded into the "body" frame.
The submenus still work because the base Milonic .js files (milonic_src.js and mmenudom.js/mmenuns4.js)
have been loaded into the page, along with menu_data_body.js, which contains the javascript code for the
submenus. The code used to load the .js files into this pages is as follows:
</p>

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

<br>
<p class="note">
<b>Directory Paths.</b>  When loading the .js file, your would of course adjust the
paths shown in the &lt;script&gt; tags above, to relect your own site's directory structure.
</p>

<div id="milonic" style="position: absolute; top: 400px; left: 10px">
<a href=http://www.milonic.com/>JavaScript Menu Courtesy of Milonic.com</a>
</div>

</body>
</html>

Poster: Ruth
Dated: Wednesday September 7 2005 - 17:26:23 BST

Hi John,

I thought it was just something on your site. I just wanted to let you know, this isn't something with which I can help. I'm not really sure what the problem is, once the menus have been loaded they are in the memory.

I think this is something you would have to go direct to Milonic and explain what you're trying to do to find a solution.

The only suggestions I can make if you want the menus to be built on one 'frame' would have to do with layout.

1. You could use an iframe instead of a frameset. With an iframe you can actually have the same layout and function, loading the pages into the iframe instead of frame and the menu actually will drop over the iframe.

2. Have the menu in the top frame totally, some have set theirs up so that the submenus open horizontally and put it all in the top frame, not having to use the frames menu. The top frame would have to accommodate however many 'horizontal' sub levels are needed.

3. Have a left side frame that is only for the opening of submenus, but that woud depend on your design, if you could use that.

Sorry I couldn't be more help.

Poster: stuart
Dated: Saturday September 10 2005 - 22:15:10 BST

Hi John

I've had a similar problem with my site.
My menus are derived from a database but the menu does not change that often and aren't that extensive.

What I am trying is using application variables.
When the page loads it checks if an application variable is empty or not. If it is the page generats the menu text from the database and then populates the application variable.
The next time the page loads the variable is populated so it just uses the menu text from the variable.

Code:

if application("HeaderMenu")=""  or request.querystring("MenuReset") = "DoIt" then
   Populate menu variable from database....
else
   menu=application("HeaderMenu")
end if
response.write("<script>"&menu&"</script>")

You'll see that I'm using a request querystring to force a manual menu recalculation when I change the menu data.

Hope this helps

Stuart

Industrial Strength JavaScript and DHTML Menus

Frames Menu Help