Problem with sub-menu in frames on Firefox

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

Problem with sub-menu in frames on Firefox

Poster: william4
Dated: Monday October 18 2010 - 22:25:09 BST

Hi

Please can someone give me a clue as to why the sub-menu on the left side of the page built by the code below does not scroll its position in Firefox 3.6.10 or Camino 2.0.4 on Mac OS X 10.6.4? When the window is made shorter than the centre frame and a vertical scroll bar appears the sub-menu disappears off the top when the page is scrolled down.

With Safari 5.0.2, Opera 10.63 and OmniWeb 5.10.1 it works as I expect. I am using milonic_src.js 5.831, mmenudom.js 5.831, and mm_navframe.js 2.3.

There are 4 files here index.html, top.html, lft.html and ctr.html.

William

index.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IBRM</title>
</head>
<frameset rows="60,*" frameborder="0" border="0" framespacing="0">
<frame src="top.html" noresize scrolling="no" name="top">
<frameset cols="116,*" frameborder="0" border="0" framespacing="0">
<frame src="lft.html" noresize scrolling="no" name="lft">
<frame name="ctr" src="ctr.html">
</frameset>
<noframes>
<body>
<p>This application requires frames in the browser.</p>
</body>
</noframes>
</frameset>
</html>

top.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Top</title>
</head>
<body>
</body>
</html>

lft.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="milonic_src.js" type="text/javascript"></script>
<script src="mmenudom.js" type="text/javascript"></script>
<script src="mm_navframe.js" type="text/javascript"></script>
<script src="menu_data.js" type="text/javascript"></script>
<script type="text/javascript">
  _subOffsetLeft=-10;
  _subOffsetTop=0;
  _menuCloseDelay=0;
  _menuOpenDelay=0;
  with(milonic=new menuname("10")){
    alwaysvisible=1;
    orientation="vertical";
    style=verticalMenu;
    left=14;
    top=0;
    aI("text=Side 1;showmenu=13;target=ctr;onfunction=openSubmenu();offfunction=closeSubmenu();");
  }
  drawMenus();
</script>
<title>Left</title>
</head>
<body>
</body>
</html>

ctr.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Centre</title>
<script src="milonic_src.js" type="text/javascript"></script>
<script src="mmenudom.js" type="text/javascript"></script>
<script src="menu_data.js" type="text/javascript"></script>
<script type="text/javascript">
  _menuCloseDelay=500;
  _menuOpenDelay=0;
  with(milonic=new menuname("13")){
    left=-10;
    style=verticalMenu;
    aI("url=`link.html`;text=`SubMenu`;");
   }
  drawMenus();
</script>
</head>
<body>
<div id="Application" style="border : 2px solid #a9c4d9;min-height: 450px;width 780px;">
</div>
</body>
</html>

Re: Problem with sub-menu in frames on Firefox

Poster: william4
Dated: Tuesday October 19 2010 - 8:25:11 BST

Forgot to include menudata.js

Code:

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;

// main menu styles
with(mainMenuStyle=new mm_style()){
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="10px";
fontstyle="normal";
headercolor="#ffffff";
offcolor="#ffffff";
onbgcolor="#ffffff";
overfilter="Fade(duration=0.2);Alpha(opacity=80);";
align="center";
valign="center";
padding=2;
pageclass="selected";
pagebgcolor="#ffffff";
separatorcolor="#ffffff";
separatorsize=0;
}

// main submenu styles
mainSubMenuStyle=new copyOf(mainMenuStyle);
mainSubMenuStyle.borderwidth=1;
mainSubMenuStyle.itemwidth=120;
mainSubMenuStyle.offbgcolor="#ffffff";
mainSubMenuStyle.oncolor="#ffffff";
mainSubMenuStyle.align="left";
mainSubMenuStyle.separatorsize=1;

subMenuStyleGrey=new copyOf(mainSubMenuStyle);
subMenuStyleGrey.bordercolor="lightsteelblue";
subMenuStyleGrey.headerbgcolor="#a9c4e5";
subMenuStyleGrey.offcolor="#a9c4e5";
subMenuStyleGrey.onbgcolor="#a9c4e5";
subMenuStyleGrey.separatorcolor="lightsteelblue";

// vertical menu
verticalMenu=new copyOf(subMenuStyleGrey);
verticalMenu.itemwidth=100;
verticalMenu.itemheight=23;
verticalMenu.headercolor="#1a446a";
verticalMenu.pagecolor="#d36804";
verticalMenu.offcolor="#1a446a";
verticalMenu.onbgcolor="#f99000";

/* this code enables main menu item highlighting */

function hFPI(_iFFrame){
  var pFi=parent.frames[_iFFrame]

  if(!pFi.$h)return

  for(var _c=0;_c<_cip.length;_c++){
    var _ci=_cip[_c];
    var i=$Ff(_ci);
    if(i==-1)i=_ci
    if(i+" "!=$u){
      while(i!=-1){
        var I=_mi[i]
        _omni=i
        i=$Ff(i);
        if(i==_omni||i+" "==$u)i=-1
      }
      menuName=_m[_mi[_omni][0]][1]
      P=parent.frames[1]

      PM=P.$h(menuName)

      for(var a=0;a<P._mi.length;a++){
        if(P._mi[a][3]==menuName)
        {
          _iFItem=a;
          pFi.$Cw(pFi._mi[_iFItem],_iFItem);
          setTimeout(function(){pFi.e$(_iFItem)},20);
          setTimeout(function(){pFi.d$(_iFItem)},50);
        }
      }
    }
  }
}

function highlightFramesParentItems(){
  for(var a=0;a<parent.frames.length;a++)hFPI(a)
}

highlightFramesParentItems()

William

Re: Problem with sub-menu in frames on Firefox

Poster: Ruth
Dated: Friday October 29 2010 - 19:03:18 BST

Thanks for posting the solution. That happens a lot, I've done it a few times myself!

Ruth

Re: Problem with sub-menu in frames on Firefox

Poster: william4
Dated: Friday October 29 2010 - 19:58:29 BST

It's not a solution. It's a file I forgot to include in the first post.

The problem still exists in Firefox 3.6.12. I also discovered the menus do on work at all on Google Chrome.

WIlliam

Re: Problem with sub-menu in frames on Firefox

Poster: Ruth
Dated: Friday October 29 2010 - 20:17:17 BST

Can you give me a link to the page so I can test it? I have FF and Google chrome

Yes, solution probably wasn't a good choice of word, but it is something that I've done myself, forgetting a file, and something that we don't always think about as the cause of a problem

Ruth

Re: Problem with sub-menu in frames on Firefox

Poster: william4
Dated: Friday October 29 2010 - 20:22:49 BST

Hi Ruth

It's a private page, so I can't give you a link. However the 4 files I have put on this topic will demonstrate the problem (at least they do for me). Put them in a folder/directory and open index.html in a browser. Chrome is a minor issue as none of the users have that. The problem occur on Mac, I don't know about anything else as I only have a Mac.

William

Re: Problem with sub-menu in frames on Firefox

Poster: Ruth
Dated: Saturday October 30 2010 - 0:46:43 BST

Hi,

I am going to post to Milonic since I can't figure out the problem. It doesn't exist with the frames menu on this site in the browsers I have available, and I am wondering if it has something to do with the coding on your pages directly instead of using files. Try this link in those browsers and see if the frames work for you in those browsers. As soon as I hear from Milonic, I will post back.

http://www.milonic.com/frames

Ruth

Re: Problem with sub-menu in frames on Firefox

Poster: william4
Dated: Saturday October 30 2010 - 10:07:48 BST

Ruth

Yes, the sample frames page works correctly in all the browsers. I tried moving the menus into files and that didn't make any difference.

Thanks for your help. Now I know it's not just my imagination.

William

Re: Problem with sub-menu in frames on Firefox

Poster: Ruth
Dated: Saturday October 30 2010 - 14:42:33 BST

Hi,

Well, I did some more experimenting. Try the following

lft data file, I named it menu_data_lft.js. That means you'd have to change the data file name called on that lft page if you change it.

Code:

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

/// Style Definitions ///
// main menu styles
with(mainMenuStyle=new mm_style()){
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="10px";
fontstyle="normal";
headercolor="#ffffff";
offcolor="#ffffff";
onbgcolor="#ffffff";
overfilter="Fade(duration=0.2);Alpha(opacity=80);";
align="center";
valign="center";
padding=2;
pageclass="selected";
pagebgcolor="#ffffff";
separatorcolor="#ffffff";
separatorsize=0;
}

// main submenu styles
mainSubMenuStyle=new copyOf(mainMenuStyle);
mainSubMenuStyle.borderwidth=1;
mainSubMenuStyle.itemwidth=120;
mainSubMenuStyle.offbgcolor="#ffffff";
mainSubMenuStyle.oncolor="#ffffff";
mainSubMenuStyle.align="left";
mainSubMenuStyle.separatorsize=1;

subMenuStyleGrey=new copyOf(mainSubMenuStyle);
subMenuStyleGrey.bordercolor="lightsteelblue";
subMenuStyleGrey.headerbgcolor="#a9c4e5";
subMenuStyleGrey.offcolor="#a9c4e5";
subMenuStyleGrey.onbgcolor="#a9c4e5";
subMenuStyleGrey.separatorcolor="lightsteelblue";

// vertical menu
verticalMenu=new copyOf(subMenuStyleGrey);
verticalMenu.itemwidth=100;
verticalMenu.itemheight=23;
verticalMenu.headercolor="#1a446a";
verticalMenu.pagecolor="#d36804";
verticalMenu.offcolor="#1a446a";
verticalMenu.onbgcolor="#f99000";


// Main

 with(milonic=new menuname("10")){
    alwaysvisible=1;
    orientation="vertical";
    style=verticalMenu;
    left=14;
    top=0;
    aI("text=Side 1;showmenu=13;target=ctr;onfunction=openSubmenu();offfunction=closeSubmenu();");
  }

drawMenus();

function hFPI(_iFFrame){
  var pFi=parent.frames[_iFFrame]

  if(!pFi.$h)return

  for(var _c=0;_c<_cip.length;_c++){
    var _ci=_cip[_c];
    var i=$Ff(_ci);
    if(i==-1)i=_ci
    if(i+" "!=$u){
      while(i!=-1){
        var I=_mi[i]
        _omni=i
        i=$Ff(i);
        if(i==_omni||i+" "==$u)i=-1
      }
      menuName=_m[_mi[_omni][0]][1]
      P=parent.frames[1]

      PM=P.$h(menuName)

      for(var a=0;a<P._mi.length;a++){
        if(P._mi[a][3]==menuName)
        {
          _iFItem=a;
          pFi.$Cw(pFi._mi[_iFItem],_iFItem);
          setTimeout(function(){pFi.e$(_iFItem)},20);
          setTimeout(function(){pFi.d$(_iFItem)},50);
        }
      }
    }
  }
}

ctr data file which I named menu_data_ctr.js

Code:

_menuCloseDelay=500           // 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 ///

// main menu styles
with(mainMenuStyle=new mm_style()){
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="10px";
fontstyle="normal";
headercolor="#ffffff";
offcolor="#ffffff";
onbgcolor="#ffffff";
overfilter="Fade(duration=0.2);Alpha(opacity=80);";
align="center";
valign="center";
padding=2;
pageclass="selected";
pagebgcolor="#ffffff";
separatorcolor="#ffffff";
separatorsize=0;
}

// main submenu styles
mainSubMenuStyle=new copyOf(mainMenuStyle);
mainSubMenuStyle.borderwidth=1;
mainSubMenuStyle.itemwidth=120;
mainSubMenuStyle.offbgcolor="#ffffff";
mainSubMenuStyle.oncolor="#ffffff";
mainSubMenuStyle.align="left";
mainSubMenuStyle.separatorsize=1;

subMenuStyleGrey=new copyOf(mainSubMenuStyle);
subMenuStyleGrey.bordercolor="lightsteelblue";
subMenuStyleGrey.headerbgcolor="#a9c4e5";
subMenuStyleGrey.offcolor="#a9c4e5";
subMenuStyleGrey.onbgcolor="#a9c4e5";
subMenuStyleGrey.separatorcolor="lightsteelblue";

// vertical menu
verticalMenu=new copyOf(subMenuStyleGrey);
verticalMenu.itemwidth=100;
verticalMenu.itemheight=23;
verticalMenu.headercolor="#1a446a";
verticalMenu.pagecolor="#d36804";
verticalMenu.offcolor="#1a446a";
verticalMenu.onbgcolor="#f99000";
/// Submenu Definitions ///

with(milonic=new menuname("13")){
    left=-10;
    style=verticalMenu;
    aI("url=link.html;text=SubMenu;");
   }



drawMenus();

This seems to work just fine

Ruth

Re: Problem with sub-menu in frames on Firefox

Poster: william4
Dated: Saturday October 30 2010 - 15:19:41 BST

So the answer is to have a separate data file for each frame.

Thanks for that.

William

Re: Problem with sub-menu in frames on Firefox

Poster: Ruth
Dated: Sunday October 31 2010 - 21:33:14 GMT

Hi,

I'm sorry I didn't catch that quicker. The problem with frames is, that they look like one page opened in a browser and 'divided' into different parts, but they are not. They are actually each a different page. So, the page in the frame with the main menu has to have the main menu and all its styles on it, and the menu program files so the menu can read the styles and other program things, and the same goes for the frame and pages where you want the submenus to open, they need their styles, menus and program files.

Ruth

Re: Problem with sub-menu in frames on Firefox

Poster: william4
Dated: Sunday October 31 2010 - 21:48:13 GMT

I expected the browser to cache the file once it was loaded use the cached version if it is required again. Now that I think about that, I realise I have caching disabled in Firefox (because I use it for testing during development), but enabled in the other browsers. Perhaps that's why it works in them but not in Firefox.

I'm not going to worry about that, now I know how to fix it.

Thanks for your help.

William