Can't get submenus to align with the right side of images

petegraves · Post by **petegraves** » Fri Jun 16, 2006 9:55 am

Hello,

We're using a horizontal Milonic menu on a frames-based web-site. I am trying reverse the menu direction when the site is displayed in Arabic, so the menu switches from the top-left to the top-right corner, with popups on the left.

I can't get first-level submenus to align to the right hand side of the image, so the rightmost menus hang over the right hand side of the page.

E.g. I get this

Code: Select all

<=>
+---+
|---|
|---|
+---+

I want this (for right-to-left display)

Code: Select all

  <=>
+---+
|---|
|---|
+---+

Here is our code:

Code: Select all

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

var subAdjustTop_H = 0;
var subAdjustLeft_H = 0;
var subAdjustTop_V = 0;
var subAdjustLeft_V = 0;

// Style Definitions
with(mainStyleHoriz=new mm_style()) {
    borderstyle="none";
    borderwidth=0;
    separatorsize=0;
    padding=4;
    fontsize=12;
    fontstyle="normal";
    fontfamily="Verdana, Arial, sans-serif";
    swap3d=1;
    followscroll=0;
}

// Main Menu
with(milonic=new menuname("mainMenuHoriz")){
    style=mainStyleHoriz;
    top=45;
    left=0;
    orientation="horizontal";
    // TODO: can't get menu to align with right of button
    screenposition="right";
    openstyle="rtl";
    align="right";
    alwaysvisible=1;
    aI("image=/Menu/logout.png;overimage=/Menu/logout-over.png;status=الإدارة;url=/Logout.stml;target=_top;onfunction=parent.frames['content'].popdown();offfunction=closeSubmenuInFrame();");
    aI("image=/Menu/devtools.png;overimage=/Menu/devtools-over.png;status=Developer Tools;showmenu=devtools;url=/servlet/LoadServlet?run=Logon2.HsAdminMenu.run;target=content;onfunction=openSubmenuInFrame();offfunction=closeSubmenuInFrame();");
    aI("image=/Menu/docs.png;overimage=/Menu/docs-over.png;status=Document Manager;url=javascript:doLink(\"/common/FileSystem.stml\", \"Document Manager\");;onfunction=parent.frames['content'].popdown();offfunction=closeSubmenuInFrame();");
    aI("image=/Menu/reports.png;overimage=/Menu/reports-over.png;status=Reports;showmenu=reports;target=content;onfunction=openSubmenuInFrame();offfunction=closeSubmenuInFrame();");
    
    aI("image=/Menu/admin.png;overimage=/Menu/admin-over.png;status=الإدارة;showmenu=admin;target=content;onfunction=openSubmenuInFrame();offfunction=closeSubmenuInFrame();");
    
    aI("image=/Menu/payroll.png;overimage=/Menu/payroll-over.png;status=كشف الأجور;showmenu=payroll;url=/payroll/PayrollInformation.stml;target=content;onfunction=openSubmenuInFrame();offfunction=closeSubmenuInFrame();");
    
    aI("image=/Menu/hr.png;overimage=/Menu/hr-over.png;status=الموارد البشرية;showmenu=hr;url=/hr/EmployeeSearch.stml;target=content;onfunction=openSubmenuInFrame();offfunction=closeSubmenuInFrame();");
}

// Submenu Definitions
with(milonic=new menuname("hr")){
    style=subStyle;
    // TODO: I can't get the menus to align with the right side of each button
    openstyle="rtl";
    align="right";
    aI("text=البحث عن موظف;status=البحث عن موظف;url=javascript:doLink(\"/hr/EmployeeSearch.stml\", \"البحث عن موظف\");");
    aI("text=مستجد;status=مستجد;url=javascript:doLink(\"/employee/NewEmpPreqCheck.stml\", \"مستجد\");");
}

etc... (more submenu definitions skipped)

Can anyone see what I'm missing?

Thanks,
Pete

Post by **Ruth** » Fri Jun 16, 2006 6:05 pm

Hi,

The align="right"; property has to do with text, not menu position.

You'd need to provide us with a url, or if that is not possible, then with the html code, any css code and the menu_data.js file. If the page has images, we also need to have the images so we can make the page and test what it is you want.

Without that, we can't really see where you want the menu to open and experiment, nor see if something else on the page is preventing the positioning as you wish.

Ruth

petegraves · Post by **petegraves** » Fri Jun 16, 2006 7:39 pm

Hi Ruth,

I'm afraid I won't be able to post any code until Monday now.

I understand that align="right" is for aligning the text, but expected either openstyle="rtl" or screenposition="right" to make the menus align with the right edge of the image (see ASCII picture in my previous post).

Because the menus are aligned with the left side of the image, when the menu is positioned on the right side of the page, if pops up off the edge of the screen.

I have found a site (http://chaiisrael.org/ar/home/a_index.htm) that uses Milonic, and has menus aligned correctly for RTL display, but I can't see what they have done differently to me.

Thanks,

Pete

Post by **Ruth** » Fri Jun 16, 2006 9:32 pm

Hi,

We'll look for the post on Monday. Sorry I'm unable to help without seeing everything. I realized you did a little picture but I'm a 'visual' have to see the page and code person to figure out what's going on.

Ruth

Post by **Andy** » Sun Jun 18, 2006 11:04 am

Hi,

Looks like you need to Right To Left menu.

There is a demo at http://milonic.com/menusample65.php and the property you need is openstyle="rtl"; addig to your menus.

Hope this helps,
Andy

petegraves · Post by **petegraves** » Mon Jun 19, 2006 9:56 am

Thanks for your suggestions, I set openstyle="rtl" in the main menu and submenus (see above code.) That makes the sub-submenus popup on the left, but it is the submenus that are aligned wrong.

Is there somewhere I could attach or email an example?

Post by **Andy** » Mon Jun 19, 2006 10:08 am

As Ruth said, we'll need to see a page.

Is there no way you could mock something up and put it on a temporary server?

petegraves · Post by **petegraves** » Mon Jun 19, 2006 11:23 am

Hi Andy,

I've prepared an example page for you. Do you have an email address I could send it to? It would be more convenient than finding somewhere to host it.

petegraves · Post by **petegraves** » Mon Jun 19, 2006 12:41 pm

I have opened a ticket on the technical support page and added my example to it.

Post by **Ruth** » Mon Jun 19, 2006 7:51 pm

Hi,

If you cannot put a page up, then you can post here using the code button.

We need the html, any css, and the menu_data.js file codes. We can then put together a page and see what's up.

Since you have images, I have to assume that the sizes of those images would be in the html since I'd have to make blanks to fit that area.

Ruth

petegraves · Post by **petegraves** » Mon Jun 19, 2006 9:03 pm

I attached an example page to the ticket I put on the Milonic Tech Support System this morning. Andy has looked at it and made a change in http://milonic.com/mm_navframe.js but I can't see how it's going to solve this problem.

Here is the ticket:

Subject: Can't get submenus to align with the right side of images

This is the example I have made to demonstrate to Andy the problem I am having with the Milonic menu (posted in the support forum on Fri Jun 16)

Pete

PS. Please respond to post in the support forum

File: Patersons Menu.zip

Replies:
From: Andy Woolley
Message ID: support4113
Date: Mon Jun 19 2006
Time: 16:33:57
Subject: Re: Can't get submenus to align with the right side of images
Message: Hi,

I have now added the property left="offset" to allow the menu use offsets for frames based menus.

please download the new mm_navframe.js file from http://milonic.com/mm_navframe.js and add something like the folllwing to your sub menus:

left="offset=-100";

This value will need to be modified to suit your individual needs.

Hope this helps
Milonic Support

The problem is that it looks like I'll need to specify a horizontal offset in pixels for each submenu. To align the submenus with the right edges of the images, the offset will be 'imagewidth - menuwidth', but it is impossible to get the width of the menu until it is rendered.

Instead I need something that positions the submenus from the right hand side of the page, to align with the right edge of each image. As mentioned in a previous post, I have already found a site that seems to do this already using Milonic, but I can't see how they've done it.

petegraves · Post by **petegraves** » Tue Jun 20, 2006 5:22 pm

Anyone?

Post by **Ruth** » Tue Jun 20, 2006 9:48 pm

Hello,

I messed around with your menu and am going to post the content one below that I set up. But a couple of things:

You are trying, and this doesn't matter if it's frames or non-frames, to make the submenus align from the right side of the submenu with the right side of the image. The only way you can get that setup is to use the popup, but it is not a frames menu and won't open across frames as far as I know.

You are also using an old version of the frames menu. I know your menu files are up to date, but I also remember that the var top etc that you have on the page in the script tags was from when the frames menu was first being developed. It now uses the mm_navFrame.js file and doesn't have the stuff you have, even the aI set up is different.

I did this and it lets the 3 items at the right align at the right. I used screenposition and offsets to do what I did. I made 3 different submenus because if you are using offsets, you can't use one, or it will always have offsets no matter which item opens it. You'll have to take a look at the submenus to see what I did.

Code: Select all

<script language="Javascript">
_menuCloseDelay=200; // The time delay for menus to remain visible on mouse out
_menuOpenDelay=100;  // The time delay before menus open on mouse over
_subOffsetTop=6;     // Sub menu top offset
_subOffsetLeft=-4;   // Sub menu left offset

var subAdjustTop_H = 0;
var subAdjustLeft_H = 0;
var subAdjustTop_V = 0;
var subAdjustLeft_V = 0;

// Style Definitions
with(subStyle=new mm_style()){
    onbgcolor="#439B24"; // release 3 green
    oncolor="white";
    offbgcolor="whitesmoke";
    offcolor="black";
    bordercolor="#666";
    borderstyle="solid";
    borderwidth=2;
    separatorcolor="#CCC";
    separatorsize=1;
    padding=3;
    fontsize=12;
    fontstyle="normal";
    fontfamily="Verdana, Arial, sans-serif";
    subimage="arrow_off.png";
    onsubimage="arrow_on.png";
}

// Submenu Definitions

with(milonic=new menuname("hr")){
    style=subStyle;
    // TODO: I can't get the menus to align with the right side of each button
    openstyle="rtl";
    align="right";
	screenposition="right"; 
    aI("text=THIS USES<br>the screenposition<br>property set to right<br>in this submenu;status=And This One;"); 
    aI("text=And This One;status=And This One;");
    aI("text=Elephant Hunt;status=Elephant Hunt;");
    aI("text=New Sausage;status=New Sausage;");
}

with(milonic=new menuname("umbrella")){
    style=subStyle;
    // TODO: I can't get the menus to align with the right side of each button
    openstyle="rtl";
    align="right"; 
	screenposition="right";
    aI("text=See What I Mean;status=See What I Mean;");
    aI("text=Open Umbrella;status=Open Umbrella;");
    aI("text=Close Umbrella;status=Close Umbrella;");
    aI("text=Green Updates;status=Green Updates;");
    aI("text=Bubble and Squeak;status=Bubble and Squeak;");
    aI("text=Elephant on Hold;status=Elephant on Hold;");
}
with(milonic=new menuname("test1")){
    style=subStyle;
    // TODO: I can't get the menus to align with the right side of each button
    openstyle="rtl";
    align="right"; 
	screenposition="right";
	top="offset=40";  
    aI("text=New Submenu because<br>it uses top=<br>offset so it<br>has to be<br>different from<br>the umbrella one.;status=See What I Mean;");
    aI("text=See What I Mean;status=See What I Mean;");
    aI("text=Open Umbrella;status=Open Umbrella;");
    aI("text=Close Umbrella;status=Close Umbrella;");
    aI("text=Green Updates;status=Green Updates;");
    aI("text=Bubble and Squeak;status=Bubble and Squeak;");
    aI("text=Elephant on Hold;status=Elephant on Hold;");
}
with(milonic=new menuname("test2")){
    style=subStyle;
    // TODO: I can't get the menus to align with the right side of each button
    openstyle="rtl";
    align="right"; 
    aI("text=This is under the first image at the left;");
}
with(milonic=new menuname("admin")){
    style=subStyle;
    // TODO: I can't get the menus to align with the right side of each button
    openstyle="rtl";
    align="right"; 
	screenposition="right"; 
    aI("text=The Next One Across Overhangs;status=The Next One Across Overhangs;");
    aI("text=I have a submenu;status=I have a submenu;showmenu=test1;");
}

with(milonic=new menuname("timesheet")){
    style=subStyle;
    // TODO: I can't get the menus to align with the right side of each button
    openstyle="rtl";
    align="right"; 
    aI("text=Upload Tree;status=Upload Tree;");
}

with(milonic=new menuname("performance")){
    style=subStyle;
    // TODO: I can't get the menus to align with the right side of each button
    openstyle="rtl";
    align="right"; 
    aI("text=Job Evaluation;status=Job Evaluation;");
}

with(milonic=new menuname("recruitment")){
    style=subStyle;
    // TODO: I can't get the menus to align with the right side of each button
    openstyle="rtl";
    align="right";
    aI("text=Very very very very very very long titles;status=Very very very very very very long titles;");
}

with(milonic=new menuname("relishs")){
    style=subStyle;
    // TODO: I can't get the menus to align with the right side of each button
    openstyle="rtl";
    align="right"; 
    aI("text=Pretty Pictures;status=Pretty Pictures;");
    aI("text=Comp. Benefit Pastrami;status=Comp. Benefit Pastrami;");
    aI("text=Should be aligned to the right of the image;status=Should be aligned to the right of the image;");
    aI("text=Udders Actions Relish;status=Udders Actions Relish;");
}

with(milonic=new menuname("devtools")){
    style=subStyle;
    // TODO: I can't get the menus to align with the right side of each button
    openstyle="rtl";
    align="right"; 
    aI("text=Menu is aligned with left side of image;status=Menu is aligned with left side of image;");
}

with(milonic=new menuname("logout")){
    style=subStyle;
    // TODO: I can't get the menus to align with the right side of each button
    openstyle="rtl";
    align="right"; 
    aI("text=Milonic Support Example;status=Milonic Support Example;");
    aI("text=test submenu;status=I have a submenu;showmenu=test2;");
}

drawMenus();

function openSubmenu(menuName, selectOpenemPos, mainOrientation){
  menuNum = getMenuByName(menuName);
  menuObj = gmobj("menu" + getMenuByName(menuName));

  subTop = subAdjustTop_H;
  subLeft = selectOpenemPos[1] + subAdjustLeft_H;
  subTop += _sT;
  spos(menuObj, subTop, subLeft);
  popup(menuName);
}
--></script>

Paste that on your content html page and see if that is at least close to what you want.

Ruth

petegraves · Post by **petegraves** » Thu Jun 22, 2006 12:08 pm

Hi Ruth,

I don't understand why this is so difficult. Can I not use the same method as this site because our site uses frames?

What you have done is ok as a temporary fix, but is not a suitable solution. The menus in our application are generated for each user depending on their privileges & language. It would be too complicated to insert different attributes for only the rightmost menus when displayed in Arabic, and guess offsets for each submenu.

Even that still doesn't align the menus properly, but just forces menus that were hanging off the edge of the frame to display inside the frame. Also, the fix causes the horizontal scrollbar to flash when the menu pops up (in Firefox).

Could you explain which parts of my example page contain out of date Milonic code? I'm having problems with the menus since upgrading to the latest version. You might have guessed I've picked this up from someone else who implemented our menu about a year ago, so I'm still trying to figure out what needs updating.

Thanks for your help,

Pete

Post by **Ruth** » Thu Jun 22, 2006 8:05 pm

Hi,

If you download the newest version of the menu and unzip it, there will be a folder called extras and in that folder is one called frames which will show you how the frames works. That version that is on the site you have was the original development before it was finalized and made into a module and you've got some other js codes in which the navFrame module code is 'wrapped' I guess you call it so I can't figure out how to use the new module with the page, since yours has the old module code inside the other js code instead of as a module.

As to why it's so difficult. A regular browser window with a page in it is much different than a browser window with a frameset in it. I'm not a code person so most of my explanations are analogies.

More or less what a frameset is [my analogy], is like having one browser window in which you have opened [in your case] 3 other browser windows each of which has its own page. So, when you talk 'across' frames it's like you have opened 3 browser windows on your computer and you ask something on the page in the 1st one to do something on the page in the second one.

I really can't see any kind of solution using your frames layout with the menu set to the right and the content frame set to scroll, that is what's happening, when the submenu opens there's really no 'margin' for it to detect rather if the menu is wider the content frame 'scrolls' Even though it doens't show as if it is. If you put scrolling="yes" instead of the auto you can see a horizontal scroll bar appear at the bottom.

As to you wanting to align the menu to match the right side of the main item with the right side of the menu, the openstyle="rtl"; does that as you can see from the link you posted.

I'm still trying things, to see if I can figure out something but I don't think I'm going to find a solution with your layout as it is. I'm sorry.

Is there some reason you must have frames? Can we do a layout like that using something besides frames, like divs perhaps?

Ruth

petegraves · Post by **petegraves** » Fri Jun 23, 2006 3:27 pm

I would love to get rid of frames, but I'm afraid our web application relies on the frames layout, and it would be a huge amount of work to change it. We may eventually move to a non-frames layout, but it will be a huge task (at least a month), and is not what we wanted to do to get the menus working in Arabic.

I still don't understand why it can't get the position of the button image from the right edge of the frame, pass that offset to the content frame (the same as it passes the left offset currently), and position the menu from the right edge of the content frame? (using absolute positioning)

Post by **Ruth** » Fri Jun 23, 2006 5:48 pm

Hi,

The openstyle="rtl"; does what you want, it aligns the items at the right side, the right side of the submenu with the right side of the parent item.
The problem is that scroll in that frame and I don't know why since I'm not technically knowledgeable about these things, and just kind of am able to conceptialize what's going on. I will post to Andy since I've narrowed the problem to that and hopefully some solution can be found or it may turn out that it's not fixable.

If something is fixable Milonic always works to get a solution.

Ruth