Sub menu width 100% when using frames [resolved]

[salbertson]

I am using a header frame and body frame within a frameset. Everything
works except for the sub menu items. The sub menu items span all the
way 100% of the window and I want them to be a fixed width. I tried
setting itemwidth and that didn't work. I am including both files in the head
tags of each page. Any help would be greatly appreciated.

Thanks in advance

Here is my menu_data_header.js file

Code: Select all

_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=-36;             // Sub menu top offset
_subOffsetLeft=0;            // Sub menu left offset

/// Style Definitions ///

with(mainStyleHoriz=new mm_style()){
onbgcolor="#3670A7";
oncolor="white";
offbgcolor="#E4E4E4";
offcolor="#3670A7";
separatorcolor="#E1E1E1";
separatorsize=1;
padding=5;
fontsize=11;
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
bgimage="/images/bg2test.JPG";
//top="-1px";


}

// Main Menu

with(milonic=new menuname("mainMenuHoriz")){
style=mainStyleHoriz;
top=0;
left=129;
orientation="horizontal";
position="relative";
alwaysvisible=1;
aI("text=Home;url=body.htm;target=mainFrame;");
aI("text=Top 1;showmenu=sub1;target=mainFrame;onfunction=openSubmenu();offfunction=closeSubmenu();");
aI("text=Top 2;showmenu=sub2;target=mainFrame;onfunction=openSubmenu();offfunction=closeSubmenu();");
}

drawMenus();

Here is my menu_data_body.js file

Code: Select all

_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=24              // Sub menu top offset
_subOffsetLeft=80            // Sub menu left offset

/// Style Definitions ///

with(subStyle=new mm_style()){
onbgcolor="#F9FBFD";
oncolor="#3670A7";
offbgcolor="#3670A7";
offcolor="white";
bordercolor="#E4E4E4";
borderstyle="solid";
borderwidth=0;
onborder="1px solid #3670A7";
separatorcolor="white";
separatorsize=1;
padding=4;
fontsize=11;
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
headerbgcolor="#548959";
headercolor="#f2f2ff";
}

/// 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("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;");
}

drawMenus();

[Ruth]

Hi,

You are going to have to give us a page and more information. I just tried
setting your data files up and created a page and I'm not seeing the
problem. So, we'll need a page, which would be easiest, but if you can find
a place to put it, then well need your main frameset page html, the html
for each of the pages in the frameset, any css you are using and which
browser has the problem. Finally, and most important, what version of the
menu. I tested it in 5.774 with no problem. So, if you're downlevel you
need to upgrade your menu.

Ruth

[salbertson]

Thanks for the quick response.

I don't have a public facing page so that will not work at the moment. If I
paste the frame source views into a post would that be sufficient? I am not
using css includes and the problem is occurring in FF 2 and IE 7. Lastly I
am using version 5.774 of milonic. Thanks in advance.

fyi - I am including the js files in the body dynamically using DOM scripting.

Main Frame Source

Code: Select all

<script type="text/javascript">

    // only include files for mainFrame
    if(window.name == "mainFrame")
    {
        var includesArr = new Array('/scripts/milonic/milonic_src.js', '/scripts/milonic/
mmenudom.js', '/scripts/
milonic/extras/frames_menu/menu_data_body.js');

        var html_doc = null;
        var js = null;

        // include js files on the fly
        for(var i = 0; i < includesArr.length; i++)
        {
            html_doc = document.getElementsByTagName('head').item(0);
            js = document.createElement('script');
            js.setAttribute('language', 'javascript');
            js.setAttribute('type', 'text/javascript');
            js.setAttribute('src', includesArr[i]);
            html_doc.appendChild(js);
        }
    }

</script>
<html><head><script language='JavaScript' type='text/javascript' 
src='/scripts/refresh.js'></script>
    </head><body><script><!--
 refreshTree('','','',''); 
--></script></body></html><!DOCTYPE html PUBLIC "-//W3C//DTD 
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<title>Welcome To Xtrac</title>
<meta http-equiv="Content-type" content="text/html; charset=EN" />

	<link type="text/css" rel="stylesheet" 
href="http://websites.milonic.com/10.125.5.105:81/style/style.css" media="screen" />

	<link rel='STYLESHEET' href='/style/print.css' type='text/css' 
media="print">
	<script language='JavaScript' type='text/javascript' 
src='/scripts/ns4_reload.js'></script>
	<script language='JavaScript' type='text/javascript' 
src='/scripts/refresh.js'></script>
	<script language='JavaScript' type='text/javascript' 
src='/scripts/showhide.js'></script>
	<script language='JavaScript' type='text/javascript'>
		function hideProg() {document.getElementById('progressBar').style.display='none';}
	</script>
</head>

<body onload='javascript:{
                                refreshBanner("","","","");
                                refreshTree("data","/modules/0000-XtracCoreFunctionality/0500-MainMenu/index.php","","","1191");
                                refreshFooter();
                            };hideProg();' onunload=' if(ele = document.activeElement)
{if(ele.nodeName != "BODY" && ele.blur){ele.blur()}}'>

<span id="xglobal"><div id='progressBar' style='position:absolute; left:300px; top:300px; 
width:100px; height:20px; z-index:2000; display: none;'><img 
src='/images/loading.gif' alt='loading...'/></div><div 
id="hiddenDevInfo"><ul><li id="frm_dev_f">Form: Undefined</li><li 
id="frm_dev_r">Record: Undefined</li></ul></div>
                <script type="text/javascript" language="JavaScript">
                    // takes the dev data and pushes it up top
                    var tf = top.frames.topFrame; // set up for the topFrame
                    var wtf = window.opener;        // set up for the opener window
                    // check to see if we need to use just tf or both tf and wtf (for a pop up)
                    var utf = (tf ? tf : (wtf ? (wtf.tf ? wtf.tf : false) : false));

                    // same as before but for the main frames
                    var mf = top.frames.mainFrame;
                    var wmf = window.opener;
                    var umf = (mf ? mf : (wmf ? (wmf.tf ? wmf.tf : false) : false));

                    // if the elements exist, then lets go ahead and start pushing it accross
                    if(umf) var ff = umf.document.getElementById('frm_dev_f');
                    if(utf) var f = utf.document.getElementById('dev_f');
                    if(umf) var fr = umf.document.getElementById('frm_dev_r');
                    if(utf) var r = utf.document.getElementById('dev_r');
                    if(f && ff) f.innerHTML = ff.innerHTML;
                    if(r && fr) r.innerHTML = fr.innerHTML;
                </script>
                <div class='centerContent'>

<h1>Welcome To Xtrac</h1>
<br />

<form name='frm1' >

<table border="0" cellspacing="0" cellpadding="0" name='main' id='main' >

<tr>
<td valign='middle'>

Please choose your desired application from the Tree Menu on the left.
</td></tr>

</table>

</form>

</div>
<script language='JavaScript' type='text/javascript'>
	inps = document.getElementsByTagName('INPUT');
	for(x=0; x < inps.length;x++){
		if(inps[x].type == 'text'){
			inps[x].onkeypress = enterToTab;
		}
	}
for(y=0;y < document.forms.length;y++){
	f = document.forms[y];
	inps = f.getElementsByTagName('INPUT');
	for(x=0;x < inps.length;x++){if(inps[x].type == 'text'){inps[x].onkeypress = enterToTab;}}
}</script>

</span>
</body>

</html>

Header Frame Source

Code: Select all

<script type="text/javascript">

    // only include files for mainFrame
    if(window.name == "mainFrame")
    {
        var includesArr = new Array('/scripts/milonic/milonic_src.js', '/scripts/milonic/mmenudom.js', '/scripts/milonic/extras/frames_menu/menu_data_body.js');

        var html_doc = null;
        var js = null;

        // include js files on the fly
        for(var i = 0; i < includesArr.length; i++)
        {
            html_doc = document.getElementsByTagName('head').item(0);
            js = document.createElement('script');
            js.setAttribute('language', 'javascript');
            js.setAttribute('type', 'text/javascript');
            js.setAttribute('src', includesArr[i]);
            html_doc.appendChild(js);
        }
    }

</script>
<?xml version='1.0' encoding='iso-8859-1'?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Banner - XTRAC</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script language="Javascript" type="text/javascript" src="/scripts/refresh.js"></script>
    <script language="Javascript" type="text/javascript" src="/scripts/showhide.js"></script>

    <script language="Javascript" type="text/javascript" src="/scripts/cookies.js"></script>
    <script language="Javascript" type="text/javascript" src="/scripts/frametoggle.js"></script>
    <script language="Javascript" type="text/javascript" src="/tree/tree.engine.js"></script>
    <script language="Javascript" type="text/javascript" src="/scripts/form.functions.js"></script>

    <link type="text/css" rel="stylesheet" href="/style/banner.css" />
<style type="text/css">
td {border-style:solid}
</style>

</head>
<body onLoad="javascript:setToggleUI();">

    <div id="banner">
         <div id="devInfo" >
                        <li id="dev_c">Connected to: dev4_xtrac_master @ 10.125.5.105</li><li id="dev_m">Module: </li><li id="dev_g">Group: </li><li id="dev_s">Security: Read / Write</li><li id="dev_b">Broswer: Firefox/2.0.0.4</li><li id="dev_f">Form: </li><li id="dev_r">Record: </li>

                      </div>
                      <div id="bannerButtons">
                        <ul id="devInformation"><input type='button' value='Dev 
Info' id='Dev Info Button' 
onclick='top.frames.hiddenFrame.document.location="/includes/forms/
HandleControls.php?control=Dev%20Info%
20Button&event=onclick&sArrayKey=BannerControls";'   /></ul>
                      </div>
                      <script type="text/javascript" language="JavaScript">
                        var ff = top.frames.mainFrame.document.getElementById('frm_dev_f');
                        var f = top.frames.topFrame.document.getElementById('dev_f');
                        var fr = top.frames.mainFrame.document.getElementById('frm_dev_r');
                        var r = top.frames.topFrame.document.getElementById('dev_r');
                        if(f && ff) f.innerHTML = ff.innerHTML;
                        if(r && fr) r.innerHTML = fr.innerHTML;
                      </script>
        <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
        <td>

            <img class="logo" src="/oleFiles/TWIBannerLogo.jpg" border="0">
        </td>
        <td>
            <p class="user"> <span class='bold'>Current User:</span> Albertson, Scott</p>
        </td></tr>

        </table>

    </div>

    <div  id='subnav' class='subnav'>
                        <table width='100%'>

                        <tr>
                        <td width='1%'><!--  EXPAND / COLLAPSE TREE PANE CONTROL -->
                        <span id='togglePlaceholder'></span></td>

                        <td width='1%'><!-- REFRESH TREE CONTROL  -->

                        </td>

                        <td id="orgby"><!-- ORGANIZE BY CONTROL  -->
                        </td>

                        <td><!-- DATABSE QUICK SEARCH CONTROL  -->
                        </td>

                        <td><!-- SEARCH CONTROL  -->
                        </td>

                        <td align='left'><!-- SUBNAV HYPERLINKED (FUTURE DROP-DOWN) CONTROLS  -->
                        <div class='nav'>
    <script type="text/javascript" src="/scripts/milonic/milonic_src.js"></script>
    <script type="text/javascript" src="/scripts/milonic/mmenudom.js"></script>
    <script type="text/javascript" src="/scripts/milonic/extras/frames_menu/mm_navframe.js">
</script>
    <script type="text/javascript">
    _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=-36;             // Sub menu top offset
    _subOffsetLeft=0;            // Sub menu left offset

    /// Style Definitions ///
    with(mainStyleHoriz=new mm_style()){
    onbgcolor="#3670A7";
    oncolor="white";
    offbgcolor="#E4E4E4";
    offcolor="#3670A7";
    separatorcolor="#E1E1E1";
    separatorsize=1;
    padding=5;
    fontsize=11;
    fontstyle="normal";
    fontfamily="Verdana, Tahoma, Arial";
    bgimage="/images/bg2test.JPG";
    //top="-1px";
    }

    // Main Menu
    with(milonic=new menuname("mainMenuHoriz")){
    style=mainStyleHoriz;
    top=0;
    left=129;
    orientation="horizontal";
    position="relative";
    alwaysvisible=1;
    aI("text=Account Management;showmenu=sub1;target=mainFrame;onfunction=
openSubmenu();offfunction=closeSubmenu();");
aI("text=Administration;showmenu=sub1;target=mainFrame;
onfunction=openSubmenu();offfunction=closeSubmenu();");
aI("text=Demonstrated Performance;showmenu=sub1;target=mainFrame;
onfunction=openSubmenu();offfunction=closeSubmenu();");
aI("text=Public Interface Management;url=1947433;
target=mainFrame;");
    }
    drawMenus();
    </script></div>

                        </td>

                        </tr>
                        </table>
                   </div>
<!-- Silly Hack to correct IE bug.  The enter key was throwing an error on the
    second and up press, having another control to set the focus on gets rid
    of that error.  Wierd.  -  JW -->
<input type="text" size="1" id="Pawn" style="width: 1px; height: 1px; position: absolute; 
left: -9999px;">



</body>
</html>

[Ruth]

Hi,

I'm sorry I didn't get back quicker, but I didn't get a notification of your last post.

I will post this to Milonic since I don't have IE7 so can't test to find the solution. Hopefully, Milonic will be able to find the problem.

Ruth

[Ruth]

Forgot to say to upgrade, we are now at 5.776 you need to download that version to see if your issue is resolved. Also, if these submenu are vertical in orientation, set menuwidth= whatever size, and itemwidth= whatever size in the menus. See if that fixes it.

Ruth

[salbertson]

The same problem happens in IE 6. My menu is horizontal and I found out when the body frame is empty the width problem is resolved. Could this be a bug in Milonic or is it most likely a style or tag conflict? Thanks again for the help.

[Ruth]

Hi,

You need to be using the latest version of the menu 5.777. Is that what you tested to see if it was still not working?

Ruth

[salbertson]

I am getting the same sub menu width problem with the newest version. The menu is horizontal and uses frames. The submenu items drop down in the "body" frame and line up correctly but span all the way to the right end of the window.

[Ruth]

Hi,

I am posting this to Milonic since it is beyond what I know how to do. If you are a professional license or above with a valid support contract then you might want to make out a support ticket. On the main site, login with your license login and at the bottom click the Tech Support link and follow the directions to make out a ticket.

Before you do that, you should look at the frames example here and see if the submenus are 100% across the body section when they open. If they are not, then I have to believe it's something in your site, and most likely either css or relative positioning. Again, don't forget to set the menuwidth and itemwidth for the submenus to see if it fixes it. It looks like you are relatively positioning the main menu in the header and that might be an issue in frames.

http://milonic.com/frames/

This page uses the newest milonic program files so if there is width problem here, then the issue is something on your site. I will post to Milonic this topic.

Ruth

[salbertson]

I found the issue. It was a css style that was setting all table widths to 100%. For some reason I didn't realize the sub menus were table based, I thought they were divs. Sorry, thanks for the help.

[Ruth]

Hi,

I'm glad you found it. I wish I'd thought to mention testing the frames on the site and then your css the first time.

Ruth

[salbertson]

No problem. Thanks again for the quick responses and the great help.