Popup() and right alignment

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

Popup() and right alignment

Poster: Joseph
Dated: Thursday March 23 2006 - 16:29:02 GMT

Hi!

I am evaluating menu v.5 (build 744) and struggling with the following problem. We display the menu on mouseover for the image using popup(). When the image is right-aligned, menu is displayed at the page (or frame in our case) edge and no horizontal offset can move it to the left! Vertical offset works fine. I have created a simple page having two pairs of elements - left and right aligned, you can see that everything works fine for the former but not the latter with the buttons used to popup the menu.

popup call is:
function doPopupRight() {
var _x = parseInt(document.getElementById('txtOffXr').value) ;
var _y = parseInt(document.getElementById('txtOffYr').value) ;
return popup('testmm5',1,_y, _x ) ;
}

The page is available on http://iosif.newmail.ru/mm5/test.html

Is there something I am missing?

Kind regards,
Joseph

Poster: Ruth
Dated: Friday March 24 2006 - 9:28:33 GMT

Hi,

I'm not sure what you are trying to do. If someone who knows js sees this they may be able to help.

Milonic has a built in pop function so you can pop up the menu from a text link or an image. http://www.milonic.com/menu_methods.php The explanation is at the bottom of the page and is pretty detailed as to how it can be coded for different things, like offsets, or opening delay etc.

Code:

<img src="transparent.gif" border="1" name="milonicmenu" id="milonicmenu">
<a href=# onmouseover="popup('milonic','milonicmenu',50,-350)" onmouseout="popdown()"><font size="3" color="green">Milonic</font></a> 

Without the 50, -350 the menu would open at the left bottom corner of the image, the 50 will offset the image 50 px down from that corner, and the -350will shift it 350 px toward the left side of the page from that left bottom corner.

I don't know if this will give you any help because I don't really know what the do pop right function is.

Ruth

Poster: Joseph
Dated: Friday March 24 2006 - 9:56:10 GMT

Hi Ruth,

Thank you for your response.
If you put your example into a div like that:

Code:

<div align="right">
<img src="transparent.gif" border="1" name="milonicmenu" id="milonicmenu">
<a href=# onmouseover="popup('milonic','milonicmenu',50,-350)" onmouseout="popdown()"><font size="3" color="green">Milonic</font></a>
</div>

you will notice (at least that's what I see in IE6 and Opera 8 ) that horizontal offset parameter of the popup function will take no effect on the menu (BTW, we are talking about vertical menu, right?) and it will always appear close to the page border. If we change div align property to "left" everything will work fine.

Joseph

Poster: Ruth
Dated: Friday March 24 2006 - 10:02:39 GMT

It's because you have the image in a div opening the menu from it and the div is coded align=right. I don't know if you can set up the image to not be in a div aligned right, that will fix the problem, but not knowing your layout I don't have any suggestion on how to do it. Sorry

Ruth

Poster: Ruth
Dated: Friday March 24 2006 - 10:29:04 GMT

Hi Joseph,

Try this:

use the div you have, coded like this [I put in a border so you can see the little transparent image and I've popped the partners submenu.

Code:

<div align="right"><img src=transparent.gif border=1 name=mmenu id=menu onmouseover="popup('partners','mmenu')" onmouseout=popdown()></div>

Then, put the offsets into the actual submenu.

Code:

with(milonic=new menuname("Partners")){
style=menuStyle;
top="offset=50px";
left="offset=-350px";
aI("status=(aq) Web Server Hosting & Services;text=(aq) Web Hosting;url=http://www.a-q.co.uk/;");
aI("text=WebSmith;url=http://www.softidiom.com/?milonicmenu;");
aI("text=SMS 2 Email;url=http://www.sms2email.com/;");
}

Hope this helps.

Ruth

Poster: Joseph
Dated: Friday March 24 2006 - 11:18:16 GMT

Ruth,

I tried that before. The funny thing is - it sort of works but not as I expect it to.

Code:

<div style="align:right;margin:20px;">
   <a href=# onmouseover="popup('milonic','milonicmenu')" onmouseout="popdown()">
      <font size="3" color="green">Milonic</font>
      <img src="arrow.gif" border="1" name="milonicmenu" id="milonicmenu">
   </a>
</div>

Mind the margin of the div - it ensures image is 20px from the right border of the page. If I set left="offset=-150px" (in my case it's the width of the menu), it appears not aligned with the right edge of the image (as I would expect it to), but 130px on the left in the air

and if I set it to left="offset=0px", it is obviously at the edge of the page. So I could just use left="offset=-20px" (equal to my margin), couldn't I? No

In my case all this stucture is a part of the large div with the "overflow: scroll;", so it fails to position properly when scrollers come out - I assume menu does not know anything about them.

What I ultimately need to achieve is a header like the following

Code:

   <div class="tp" id="tpnet">
      <div class="spacer" ><!-- --></div>
      <div class="lefth leftpad350">
      <span class="tpc" >Caption</span>
      </div>
      <div class="righth">
         <div class="rightpad" style="line-height: 18px; vertical-align: middle;">
            <span class="tpctrl" >View By:</span><span class="tpctrl" id="fltInfo" >&nbsp;</span>
            <img name="qqqqq" id="qqqqq" src="/__CommonFiles/arrowDownNav.gif" onmouseover="javascript:popup('fltnettrend','qqqqq');" onmouseout="popdn()" class="imgmenu" />
         </div>
      </div>
      <div class="spacer"><!-- --></div>
   </div>

where the menu is supposed to perform filtering of the content shown below, and both header and main content are within that auto-scrollable div. I could try to post the full code but it takes quite a long time to copy all the HTML/CSS needed, that's why I initially created just a simple example. So before it goes any further - is it a "by design behavior" which is definitely correct and thus I need to change my HTML/CSS or it may be considered a bug (sorry) and I could just relax and wait till it's fixed?

Joseph

Poster: vikenk
Dated: Friday March 24 2006 - 13:53:57 GMT

Hello,

Let me add one thing: The menu has built-in "collision detection". If the menu comes too close to the edge of the screen, it will automatically re-position its self to remain in view and not go off the edge of the screen. Since you're positioning the menu near the edge of the screen, maybe this is affecting your menu? It may be worth looking at.

Change (or add) this property in the global settings: ignoreCollisions:

Code:

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

It may be worth a try.

Poster: Joseph
Dated: Friday March 24 2006 - 16:32:13 GMT

Hi vikenk,

Thank you very much for that! Seems to have fixed the problem. Actually I tried to use it before in popup() function itself but probably did it incorrectly.
Apparently the code checks for collision before applying user offsets. Not a problem since I now know about it. Hope real life application is going to work in a same way the test does.

Best regards,
Joseph

Poster: Ruth
Dated: Friday March 24 2006 - 19:50:27 GMT

Good catch, Vikenk. I never thought of that.

Joseph, please note that the menu does not like being in a div, so though it does work in most cases, it is not recommended. It's not really the menu, it's how browsers treat divs differently, and when you have divs, nested in divs on a page, and the menu also has divs, tables, and so on in the programming there can be problems. They might not show when using the popup, since in reality, it is the image in the div, and the submenu is just popping up based on the image position. Just wanted to note this for anyone else doing something with the menu and divs.

Ruth

Poster: Joseph
Dated: Monday March 27 2006 - 11:08:09 BST

Thank you for advice, Ruth. I hope, we can live with divs for now - would be too complicated to get rid of them. Looks like in our case it works in the main browsers.

It turns out though there is still a problem. When collision detection is off, submenus (which do not have ignoreCollisions = true) of the popup I display initially are shown on the right of it - outside of the visible part of the window. So - looks like I should leave ignoreCollisions = false and set menu left and top coordinates manually before each popup call, it is possible and it's exactly what we do in v.3. But I still think that it would be much better if before making a decision about a collision menu applied custom offsets. Is that possible at all? Can anybody comment on it?

Joseph

Poster: Ruth
Dated: Monday March 27 2006 - 11:21:31 BST

Joseph wrote:

But I still think that it would be much better if before making a decision about a collision menu applied custom offsets

I must be very tired. I cannot figure out what you mean by that. It's really really late/early in the morning here, sorry.

Ruth

Poster: Migru
Dated: Monday March 27 2006 - 11:34:41 BST

Hi

don´t know about the existence of any property like

"collision menu applied custom offsets."

There is no such property. There should be certainly something like that in the code, but I don´t think its user controllable. And if you think of the wide range of optional monitor resolutions and screen widths, is it advisable to have the collision detection disabled ?

Michael

Poster: Joseph
Dated: Monday March 27 2006 - 12:35:19 BST

Ruth,

somewhere in the menu Javascript code there has to be something like

1) if (MyRightEdge is greater then window width) AND (ignore collisions is false) then MyLeftEdge=(window width - MyWidth).

I suspect MyRightEdge above is calculated before applying offsets.
2) if customOffset is defined then MyLeftEdge=MyLeftEdge + customOffset.

Joseph

Poster: Joseph
Dated: Monday March 27 2006 - 12:44:18 BST

Michael,

Migru wrote:

don´t know about the existence of any property like
"collision menu applied custom offsets."

of course there is no such property

Sorry, English is not my mother tongue. Let me rephrase

...it would be much better if the menu
1) applied custom offsets (i.e. left="offset=-150")
2) checked whether there is a collision.

Obviously, I would rather have the collision detection ENabled. The problem is, till now I can't get both things - offsets and collision detection - work together.

Joseph

Poster: Migru
Dated: Monday March 27 2006 - 13:05:16 BST

Hi

I don´t really get the point.

Quote:

struggling with the following problem. We display the menu on mouseover for the image using popup().

It is a popup. So what is the problem, when - due to the one or the other reason, the popup will appear not exactly where it is exactly to be expected . Particularly when you consider this extreme value (next to the window margin), so if you want to use the menu, don´t use it there, next to the window. If you still see a problem, and if you have a license, make use of the http://www.milonic.com/support/.

To discuss this here, don´t think it will be successful.

Michael

Poster: Migru
Dated: Monday March 27 2006 - 13:18:18 BST

Hi Ruth,

As there was a similar problem (see: former release)
http://www.milonic.com/menuvinfo.php

Quote:

Fixed problem with tooltips not performing correct collision detection

my question:

is it possible, that in this case this could be modified too, regarding the popup menu / collision detection ? Would you please find out, if this should be reported?

Michael

Poster: Ruth
Dated: Monday March 27 2006 - 17:47:52 BST

Hi Michael,

I will ask but as far as I know there wouldn't be a cross-over problem. Tooltips is its own module so the problem was in the tooltips module as far as I know.

Joseph,

I am getting lost in all this. I thought you wanted the menu to open where the image in the div was and then be offset by the amounts you listed. That would of course put it 350 px from the right given the offset you listed and 50px down from its opening point.

Where exactly do you want the submenu to open?

I created this page. Note I put borders around things so I can see what's going on.

Code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
   <title>Mil test - joseph</title>
   <style type="text/css">
   body{margin:0px}
   .mildiv{position=absolute;right:0px;padding-right:20px;border=1px solid #ff0000;}
   .milteston,.miltestoff {
   font-family:Verdana, Tahoma, Arial;
   font-size:11px;
   font-style: normal;
   color:#000000;
   background-color:#ffb84d;
   padding:2px;
   box-sizing:content-box;-moz-box-sizing:content-box;
}

.miltestoff {
   background-color:#CECFCE;
}
   </style></head>

<body>
<script type="text/javascript" src="milonic_src.js"></script>   
<noscript><a href="http://www.milonic.com/">DHTML JavaScript Website Pull Down Navigation Menu By Milonic</a></noscript>
<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="pop_joseph.js"></script>   
<div class="mildiv"> 
   <a href=# onmouseover="popup('milonic','milonicmenu')" onmouseout="popdown()"> 
      <font size="3" color="green">Milonic</font> 
      <img src="arrow.gif" border="1" name="milonicmenu" id="milonicmenu"> 
   </a> 
</div> 


</body>
</html>

and this data file

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;




with(hlMenuStyle=new mm_style()){
 onclass="milteston";
   offclass="miltestoff";
   bordercolor="black";
   borderstyle="solid";
   borderwidth=1;
   subimagepadding=2;
   separatorcolor="black";
   separatorsize=1;
}



with(milonic=new menuname("Milonic")){
style=hlMenuStyle;
itemwidth=150;
top="offset=5";
left="offset=-20";
aI("subimageposition=0;text=test1;");
aI("subimageposition=0;text=test2;");
aI("subimageposition=0;text=test3;");
}

drawMenus();

When I open that page, the div is 2px from the right margin, the image is 20px inside that, the submenu opens 5px down from the image and the right side border of the menu is exactly at the right side border around the arrow image.

If you can provide a page with all your coding: html, css, menu that would be very helpful so we are working with the actual layout.

Ruth

Poster: Joseph
Dated: Tuesday March 28 2006 - 16:13:56 BST

Hi Ruth,

I am sorry you are getting lost. I don't know whether you looked at the initial example I provided or not, but I thought it was pretty clear and had the source included. I was wrong apparently.

So I will try again.
First of all, what I am trying to achieve. I provided the simplified code for it and explanation in the post Fri Mar 24, 2006 11:18 am. Basically, it is almost what you have given in your example: 1) image within a div, that is close to the right border of the page 2) a menu displayed onmouseover so that the right side of the menu is aligned with the right side of the image. The main difference between your example and the real life is: in our application the position of the image in respect to the page border is NOT static, can not be. I will show it in the example below.

Now, lets take your example. Just wanted to mention, I am not an expert in CSS/HTML. You used the div with position=absolute. Good. As far as I understand what you do is position the image 20px from the right border and position the menu in the same way using the offset, because if you simply add a margin to your image like this

Code:

   <a href=# onmouseover="popup('milonic','milonicmenu')" onmouseout="popdown()"> 
      <font size="3" color="green">Milonic</font> 
      <img src="arrow.gif" border="1" name="milonicmenu" id="milonicmenu" style="margin:30px;"> 
   </a>

the image and the menu will not be aligned anymore - menu is still 20px from the border ot the page. Correct?

So now let me show what is the problem with static positioning.
Consider the following example:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

<html> 
<head> 
   <title>Mil test - joseph</title> 
   <style type="text/css"> 
   body{margin:0px} 

   .mildiv{position=absolute;right:0px;padding-right:0px;border=1px solid #ff0000;} 

   .milteston,.miltestoff { 
   font-family:Verdana, Tahoma, Arial; 
   font-size:11px; 
   font-style: normal; 
   color:#000000; 
   background-color:#ffb84d; 
   padding:2px; 
   box-sizing:content-box;-moz-box-sizing:content-box; 
} 

.miltestoff { 
   background-color:#CECFCE; 
} 


div#sblock1 {
   text-align: justify;
   width: 100%;
   height: 500px ;
   background: repeat-x ;
   margin: 0px;
   margin-top: 0px ;
   padding: 0px ;
   position: fixed ;
   clear: both;
   line-height: 0px;
   border: none ;
   }
div.spad20 {
   line-height: 0px;
   width: 100%;
   height: auto ;
   top: 0px;
   left: 0px;
   margin: 0px;
   padding: 20px;
   position: static;
   border: none ;
   display: block;
}
div.soverflow {
   width: auto;
   height: 500px ;
   overflow: auto;
   padding: 0px;
   margin: 0px ;
   line-height: 0px;
   position: static ;
}
div.spadside1 {
   width: auto;
   height:auto ;
   line-height: 0px;
   padding-right: 0px;
   margin: 0px;
   position: static ;
}

div.contentcap {
   position:relative;
   left:0px;
   top:0px;
   width: auto;
   height: 30px;
   width:100%;
   line-height: 0px;
   padding-right: 0px;
   margin: 0px;
}

div#content {
   position: static ;
   line-height: 25px;
   font-size: 16px;
   margin: 25px;
   border: 1px solid green;
   height:auto;
}

   </style>

<script>

function setContent(aType) {
if (0==aType) {
document.getElementById('content').innerHTML = 'Now I do not need scrolling - not much content here...' ;
} else {
var _tmp = document.getElementById('content') ;
_tmp.innerHTML = '' ;
for (var _i=0;_i<20;_i++) {
_tmp.innerHTML += 'Huge content here - requires scrolling<br/>' ;
}
}
} 
</script>

</head> 

<body> 
<script type="text/javascript" src="milonic_src.js"></script>    
<noscript><a href="http://www.milonic.com/">DHTML JavaScript Website Pull Down Navigation Menu By Milonic</a></noscript> 
<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="ruth.js"></script>    

<input type="button" onclick="javascript:setContent(1);" value="Set Large Content" />
<input type="button" onclick="javascript:setContent(0);" value="Set Small Content" />

   <div id="sblock1">
      <div class="spad20" id="spad20">
         <div id="soverflow" class="soverflow">
            <div id="maindatadiv" class="spadside1">

<div class="contentcap">
<div class="mildiv"> 
   <a href=# onmouseover="popup('milonic','milonicmenu')" onmouseout="popdown()"> 
      <font size="3" color="green">Milonic</font> 
      <img src="arrow.gif" border="1" name="milonicmenu" id="milonicmenu" > 
   </a> 
</div> 
</div>
               <div id="content">Now I do not need scrolling - not much content here...</div>
            </div>
         </div>
      </div>
   </div>

</body> 
</html>

The menu code stays the same as in your example.
Here I added almost a real life code, that behaves exactly like in our application: we load part of the content on demand. So initially, when there is no scrollers in the div and the content is small, menu is aligned with the image. Now, press the button "Set Large Content" and after the scroller appears you will notice, that the menu is still 20px from the page border, where as the image has moved left on the width of the scroller. That is THE problem, that is something I am trying to overcome.

Michael is absolutely right saying that ignoreCollisions is the reason the menu does not appear where the image is but instead just jumps to the right border of the page (minus offset if such applied). But I continue stressing that this offset should have been applied before testing the collision condition - if possible. If you know Javascript, you definitely know what I mean. If not - I would be grateful if someone who does now it commented as well.

Best regards,
Joseph

Poster: Ruth
Dated: Tuesday March 28 2006 - 17:30:41 BST

Hi Joseph,

Thanks for that post. It was most helpful in understanding what the problem is. I'll play around for a solution and post back.

Ruth

Poster: Ruth
Dated: Tuesday March 28 2006 - 18:13:04 BST

Hi,

Try this and you'll need to test in different browsers [I'm setting up my new computer so I haven't upgraded browsers IE5.5, FF1.0.2, NN7.1, Opera7.54 on the old one]

I created an image 150px wide. If you need text, you have to make it part of the image.

Then I changed the offsets in the submenu to

Code:

top="offset=5";
left="offset=5";

It doesn't have that negative one that is 'shifting' the menu back 20px to the left. Now when you mouseover the menu follows the usual positioning and opens at the left side of the image. So, when the scroll bar goes on and the image shifts, the menu will automatically 'shift' to open at its left side.

See if that will take care of the problem.

Ruth

Poster: Joseph
Dated: Wednesday March 29 2006 - 10:53:42 BST

Hi Ruth,

Thank you for the idea - it definitely works, great workaround. I am going to use another absolutely positioned empty image as an anchor for a menu rather then one wide image, but I would not have thought of it myself.

Code:

<div class="contentcap">
   <img src="ghost.gif" name="mmanchor" id="mmanchor" style="position:absolute;width:1px;height:1px;right:150px;top:50%;"> 
   <div class="mildiv"> 
      <a href=# onmouseover="popup('milonic','mmanchor')" onmouseout="popdown()"> 
         <font size="3" color="green">Milonic</font> 
         <img src="arrow.gif" border="1" name="milonicmenu" id="milonicmenu" > 
      </a> 
   </div> 
</div>

menu definition: 
top="offset=0"; 
left="offset=0";

Thanks again.

Best regards,
Joseph

P.S. It is still a workaround - I hope Andy will look at it at some stage. :-)

Poster: Ruth
Dated: Wednesday March 29 2006 - 17:16:08 BST

Hi Joseph,

I'm glad it works

Since I don't know js and programming, my life is spent in workarounds :lol:

I'm sure Andy will do what he can, but I'm not sure what you suggest would work anyway. I'm not really good an explaining 'techinically' because of my lack of programming knowledge but.... the menu you are using is a pop menu, it's not relatively positioned like when you put it in a table, or in a div as many do which makes it 'a part' of that table or div and so follows what happens in that table or div. So when you pop it up it's sitting 'on top' of the various things. Since it is doing that and it's not 'part' of the div that gets the scroll bar I can't think how the menu would know about that. I don't even know if it would shift over if the div that had the image in it got a scroll bar, since it's 'on top' of that div, also, and not a 'part' of it. I hope that made sense.

Ruth

Industrial Strength JavaScript and DHTML Menus

Popup() and right alignment