Frames Menu Help

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
John2005
Beginner
Beginner
Posts: 8
Joined: Fri Jul 01, 2005 3:26 am

Frames Menu Help

Post by John2005 »

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.
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Hi John,

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

Ruth
John2005
Beginner
Beginner
Posts: 8
Joined: Fri Jul 01, 2005 3:26 am

Post by John2005 »

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: Select all

<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: Select all

<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://websites.milonic.com/milonic.com/>JavaScript Menu Courtesy of Milonic.com</a>
</div>

</body>
</html>

Body.htm

Code: Select all

<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: Select all

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: Select all

<script language="JavaScript">

top.header.data_body();

</script>
Sample Page1.htm

Code: Select all

<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>
<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>
</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 <script> tags above, to relect your own site's directory structure.
</p>

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

</body>
</html>
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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.
stuart
Advanced
Advanced
Posts: 14
Joined: Sat Aug 20, 2005 7:35 pm

Post by stuart »

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: Select all

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
Post Reply