popup() w/ plain text link & abs position menu? [bypassed]

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

popup() w/ plain text link & abs position menu? [bypassed]

Poster: nwilcox
Dated: Friday July 17 2009 - 15:32:58 BST

Hello,

I was wanting to see if you could with Milonic use popup() function on a plain text link and still be able to absolute position the submenu to a certain area?

This would be the advanced search plain text link in the attachment.

Thanks!

Re: use popup() w/ plain text link and absolute position menu?

Poster: Ruth
Dated: Saturday July 18 2009 - 4:52:08 BST

Hi,

Yes, you can pop up a menu from a text link and you can position it in a specific place. Take a look at the popup explanation under Methods and Functions http://www.milonic.com/menu_methods.php If you want it to look like your below image, then the best waywould be to use a transparent 1x1 px image with an id which you have absolutely positioned and then set the popup using that image. This is much harder to explain than do. Anyway, let's say you have an image someplace on your page and you name that image smenu

Code:

Well, you could have the text Advanced Search set for a popup submenu and if you use that image id the submenu would open wherever you placed that image

Code:

<a href=# 
onmouseover="popup('menuname','smenu')" onmouseout=popdown()>Advanced Search</a>

Mousing over that Advanced Search link would open the submenu at the image named smenu. You could also set it to open onclick by using onclick="popup etc. Hope that made sense.

Ruth

Re: use popup() w/ plain text link and absolute position menu?

Poster: nwilcox
Dated: Monday July 20 2009 - 16:43:35 BST

So there is now way to open the menu without using this hidden menu image approach? The popup() function doesn't allow you to specify a left,top position to call the menu?

I don't think I fully understand the concepts

Is there another method I could use to accomplish this approach?

Thanks Ruth as always for the help!

Re: use popup() w/ plain text link and absolute position menu?

Poster: Ruth
Dated: Monday July 20 2009 - 22:04:16 BST

Hi,

Not that I know about, but I am not js knowledgeable. There are a lot of functions and methods, things like setting position and getting position but I think those come from a main menu not the popup. http://www.milonic.com/menu_methods.php

The only way that I know to have it open at a specified position so it always opens where it is supposed to is to use an image. You can set position but only as to the top left, but that would mean that it would open relative to the top left of the page, so I don't think it will work because it wouldn't always open in the same place. I mean it would always open at top=X;left=Y; but that x and y position wouldn't necessarily be at the same place on the page due to resolution differences.

I think you might contact Milonic on this one. http://www.milonic.com/support/ There may be a way to do it, or maybe Version 6 is something that could be used, but I don't know anything about 6 which is in beta testing and I don't have enough js/programming knowledge to know how to do it without an image, if it is possible. Sorry...

Ruth

Re: popup() w/ plain text link & abs position menu?

Poster: Andy
Dated: Tuesday July 28 2009 - 11:14:08 BST

Have you tried giving the link an id and referencing that instead?

Here's an example:

Code:

<a id="PopLink" href="#" onmouseover="popup('subMenu','PopLink')" onmouseout=popdown()>Popup Based on Link</a>

Re: popup() w/ plain text link & abs position menu?

Poster: nwilcox
Dated: Tuesday July 28 2009 - 14:18:39 BST

sweet! Ruth and Andy that solved the issue in this particular case!

works great - thank you for your help!

I have some other questions regarding this type of menu though that I approached in the support ticket - see attached image below.

Can we create an entire menu this way using the approach you suggested? Clicking on each link would pop a menu aligned to the right of the design as shown here?

Ifo so, can you also keep the calling link active when you call the popup() script? It would be great if we could keep the plain text link "active" as I am on moving inside the sub menu looking around just like you would in a regular top level milonic menu.

Thanks again for all of your help. I think we are stretching what Milonic can do for us so that is a good thing

Re: popup() w/ plain text link & abs position menu?

Poster: Ruth
Dated: Tuesday July 28 2009 - 22:35:47 BST

Hi,

I'm not really sure what you want, since you can't get that tab look with just text. Anyway, you can set it up to pop however many menus you want, I mean a different one from each link. Using the page I got before I set this up. I didn't create new menus, just used the existing ones with the images, but I did create a new 'main' area in that green bar. So, try putting this in the page at the same place. You'll see I started at that LI id=siteNavigation and ended at the clear both LI at the bottom of that main horizontal area.

Code:

 <LI id=siteNavigation style="VERTICAL-ALIGN: bottom; POSITION: relative">
  <DIV style="FLOAT: left; WIDTH: 706px;height:32px;font-size:12px;line-height:20px;text-align:center;color:#ffffff;">
  <table cellpadding=0 cellspacing=0 bordercolor=white width=706 height=32 >
<tr>
       <td style="border-top:0px;border-left:1px solid white;border-bottom:0px;border-right:1px solid white"><a id="PopPublic" href="#" onmouseover="popup('MenuMegaTPublic','PopPublic')" onmouseout=popdown()>For the Public</a></td>
       <td style="border-top:0px;border-left:0px;border-bottom:0px;border-right:1px solid white"><a id="PopMembers" href="#" onmouseover="popup('MenuMegaTmembers','PopMembers')" onmouseout=popdown()>For Members</a></td>
       <td style="border-top:0px;border-left:0px;border-bottom:0px;border-right:1px solid white"><a id="PopStudents" href="#" onmouseover="popup('MenuMegaTStudents','PopStudents')" onmouseout=popdown()>For Students</a></td>
       <td style="border-top:0px;border-left:0px;border-bottom:0px;border-right:1px solid white"><a id="PopMedia" href="#" onmouseover="popup('MenuMegaTMedia','PopMedia')" onmouseout=popdown()>For the Media</a></td>
       <td style="border-top:0px;border-left:0px;border-bottom:0px;border-right:1px solid white"><a id="PopHealthPro" href="#" onmouseover="popup('MenuMegaTHealthPros','PopHealthPro')" onmouseout=popdown()>For Health Professionals</a></td>
       <td style="color:#006666;font-weight:bold;border-top:0px;border-left:0px;border-bottom:0px;border-right:1px solid white">Shop ADA</td>
</tr>
</table>
  </DIV><!-- Mega-menu code goes here -->
  <DIV style="MARGIN-TOP: 2px; PADDING-LEFT: 39px; padding-top:5px;FLOAT: left; WIDTH: 213px;height:32px;font-size:12px;text-align:center;line-height:20px;color:#ffffff">
  <table border=0 bordercolor='red' cellpadding=0 cellspacing=0 height=20px width=213px align='right';valign="middle">
<tr>
    <td style="background-color:#006666"><a id="PopNutriPro" href="#" onmouseover="popup('megaMenuFindDietitian','PopNutriPro')" onmouseout=popdown()>Find A Nutrition Professional</a></td>
</tr>
</table>
  </DIV>
  <LI id=siteContent style="CLEAR: both">

I just put this in place of the main menus you had set up there, it will at least give you an idea. Note that the text color is the color you have for your links, so you will have to do something for that in the stylesheet. I didn't since I am not good at css and I have no idea how to set up different colors for different links or to make them change color on mouseover, though I know you can do it. Hope this helps

Ruth

Re: popup() w/ plain text link & abs position menu?

Poster: nwilcox
Dated: Thursday July 30 2009 - 15:52:01 BST

Hi Ruth,

I have no idea what you are doing here as you are adjusting the green horizontal menu which I have working perfectly already.

My quesetion and attached image was in regards to the blue bar menu in the header.

You've given me some ideas which I can try.

For the first time I'm disappointed in the menu system. It has always been flexible enough to do everything we've ever needed it to do for our customers in the last 4 or 5 years we've been using the product. It is a shame we won't be able to accomodate this special menu configuration.

thanks for your help anyways! It is alwasy appreciated

Re: popup() w/ plain text link & abs position menu?

Poster: nwilcox
Dated: Thursday July 30 2009 - 16:37:59 BST

Andy wrote:

Have you tried giving the link an id and referencing that instead?

Here's an example:

Code:

<a id="PopLink" href="#" onmouseover="popup('subMenu','PopLink')" onmouseout=popdown()>Popup Based on Link</a>

I have implemented this exactly as you have descibed in another link in the design, which worked fine. However with this approach, can you keep the link text "Popup Based on Link" active while you are inside the subMenu?

If that is possible, we can make the hidden gif menu popup work.

Re: popup() w/ plain text link & abs position menu?

Poster: Ruth
Dated: Thursday July 30 2009 - 18:48:49 BST

Well, that's strange. I only got part of the image ending at the bottom of the blue bar, and I got no scroll bars telling me it was bigger. I thought it was strange you wanted to change that tabbed looking menu

After your comment and looking at it, I clicked on it and finally see it all. Sorry about that. I can work on it, but I need to actually have the stuff. The page I've been working on doesn't have that blue bar with the Faqs Hot Topics and such. It only says addlink a few times in that bar.

Ruth

Re: popup() w/ plain text link & abs position menu?

Poster: nwilcox
Dated: Thursday July 30 2009 - 20:36:30 BST

wow that is weird. I have been using the attachment feature I think correctly?

I'm going to experiment using the approach you've laid out at the top and get back to you with what I find out.

Re: popup() w/ plain text link & abs position menu?

Poster: Ruth
Dated: Thursday July 30 2009 - 21:02:30 BST

Hi,

Yes, you are attaching correctly. I am on IE7 and it is probably something to do with that and my resolution. I'll just try and remember to click on all images from now on

Ruth

Re: popup() w/ plain text link & abs position menu?

Poster: nwilcox
Dated: Friday July 31 2009 - 18:49:14 BST

Hi Ruth and Andy,

http://dev.eatright.org/Public/

I have have built a custom JS/CSS/dHTML feature to get what I need done. If you want to take a look at what I have put in for the blue nav bar (in the header), maybe that will help you understand what I would have wanted to originally do with the Miloninc product.

For comparison, I have dropped in the three different approaches I have tried in this menu bar:

1.) Regular Milonic menu with itemlevel link calling popup() function which loads the menu off the 1px placeholder image
issues: cannot get the parent level link to stay active when inside a sub menu

2.) standard anchor tags using popup() function which loads the menu off of the 1px placeholder image
issues: I can get the top level to stay active with a custom javascript function, however I cannot figure out how "reset" the calling parent link when leaving the sub menu
issues: I can only get the menu to close when I mouseover and out of the sub menu. Rolling over and out of the parent level item does not close the submenu.

3.) My custom JS script
issues: none. It works exactly as I need it to so you can see what I would like to accomplish.

Is it possible to get this functionality to work correctly in Milonic? I was looking at this piece of functionality (http://support.milonic.com/demos/change ... /index.htm) but couldn't figure anything out or even where to put it.

Re: popup() w/ plain text link & abs position menu?

Poster: Ruth
Dated: Friday July 31 2009 - 23:04:40 BST

Hi,

Well, I can answer your questions about #2. You forgot part of the popup/popdown menu. It needs to be told to close. The code should be

Code:

<A id=menuItem1 
  onmouseover="popup('MenuMegaQuickGlance','imgQuickGlance',-2,-679,null,0)" onmouseout="popdown(); toggleLink('menuItem1',1);">popup()</A> 

Notice the onmouseout="popdown() part of it. Now, I have no idea if the toggleLink has to go before or after, it seems to work fine the way I have it. This will make the menu close when you mouseout of the text link popup as long as you haven't moused into the menu. Of course, if you're in the submenu it stays open.

And, as to the color, I don't know if I can explain it clearly, but here goes. You have created a function in order to get the white color when the submenu is opened, that function has one requirement which triggers that color, that requirement is the mouseover state. So, once you mouseover the text turns white and it will stay white unless you set up another requirement, the problem is as soon as you do, which would be the mouseout state, then your color won't be white when you mouse down into the submenu. It's kind of a catch 22. I know you have an if/else statement, but that statement only says the color is this until X takes place then it becomes that. Once X has taken place, then the color stays what that action changed it to. I hope that made sense.

Now, as to the other issues you have mentioned about using the popup, things like that link not remaining in an 'active' state. You have to think about the popup as a function that is being applied to the menu to make it 'show' when you are doing something to a link that is not the menu. That is, there is no 'main' menu there which can use the things like the page items, pagecolor etc, it is only a text link or image or whatever, for which Milonic created a function to cause a non visible menu to become visible, so that text link has no menu 'properties' to keep or follow. I hope that made sense, also

I am working on the other one you have, the first one Milonic, and I'll let you know if I find a solution so you can use that, which would mean that the menu would actually follow all the functions.

Ruth

Re: popup() w/ plain text link & abs position menu?

Poster: Ruth
Dated: Saturday August 1 2009 - 0:21:05 BST

Hi,

Can you tell me what menus are going to pop from that blue menu bar? I think it is possible to set up that whole blue bar as a regular Milonic menu and you would then not have any of the issues you have now, but to figure this out I need to have more than that submenu so I can work with each one of them. I got the first one to open just as you want it without using the popup function, so if I can get the others to do the same, that would solve the problems, unless there is a reason not to use a regular menu

Ruth

Re: popup() w/ plain text link & abs position menu?

Poster: nwilcox
Dated: Monday August 3 2009 - 16:00:46 BST

I don't have any of the content yet for the sub menus - heince why it is just a bunch of random characters

Can you show me what you have got so far? Idealy, I'd love to be able ot accomplish this menu with a single Milonic parent menu and then the appropriate sub-menus

Also on #2, I just added onmouseout fuction as you indicate for the popup example. The submenu just goes away so I can never get inside the sub-menu

Thanks Ruth!

Re: popup() w/ plain text link & abs position menu?

Poster: Ruth
Dated: Monday August 3 2009 - 23:40:32 BST

Hi,

The closing problem has to do with your MenuCloseDelay=0. Because you are mousing over a link to get the submenu the link ends at the bottom of the popup() word so when you mouse down to get to the submenu it closes immediately with that 0 delay set. Try setting it at about 150 which is usual.

As to what I did to get a regular menu, the reason it works is because your audiencequicklinks css has a width set to 430 and if you set the itemwidths in the menu, then you can offset the submenus to the left so the right side of the submenus match the right side of the main. Dang, I don't seem to be able to explain things really well lately. OK, let's do it this way, I'll post the main menu here, and then the submenus so you can see

First the MenuQuickGlanceTest style and the image I made to get your || separator look.Kind of hard to see on this but it's right -->

Code:

with(menuStyleQuickGlanceTest=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=0;
fontfamily="Arial, Helvetica, sans-serif";
fontsize="11px";
fontstyle="normal";
fontweight="bold";
headerbgcolor="transparent";
headercolor="transparent";
offbgcolor="transparent";
offcolor="#d2e0ed";
onbgcolor="transparent";
oncolor="#FFFFFF";
outfilter="";
overfilter="";
padding=0;
pagebgcolor="transparent";
pagecolor="transparent";
separatorimage="sepdual.gif";
separatorwidth=5;
separatorheight=10;
separatoralign='center middle';
subimage="";
subimagepadding=0;
rawcss="line-height:32px;"
}

The main menu on the page. Note that I put in an itemwidth, tha tis equal to the 430 of the audiencelink box width, when you kind of figure in the padding and such [more or less

]
<SCRIPT language=javascript type=text/javascript>

Code:

with (milonic = new menuname("MenuQuickGlanceTest")) {                                                           
style = menuStyleQuickGlanceTest;
alwaysvisible = 1;
orientation = "horizontal";
position = "relative";
menuheight="32px";
itemwidth="107px";
zindex=95;
align='center';                                  
aI("text=Milonic Menu;showmenu=MenuMegaQuickGlance;");
aI("text=Milonic 2;showmenu=MenuMegaQuickGlance2;");
aI("text=Milonic 3;showmenu=MenuMegaQuickGlance3;");
aI("text=Milonic 4;showmenu=MenuMegaQuickGlance4;");                      
 }
drawMenus();
</SCRIPT>

Now the submenus. What I did was to just copy and paste the first quick glance sub and renamed it 3 times so I had 4 submenus. Now, this was easy to figure since all the submenus are the same size. So, starting with the first one, the width of the submenu is 682. You have that set at itemwidth, but you could also put it as menu width. Anyway, because you are setting a width, all you need to do is to set the left offsets for these submenus subtracting the 430 pixels from the width of the first submenu. This means that submenu opens with the right side of the submenu equal to the right side of the main menu

Now, for each following submenu, because I used the same ones and just renamed them, I only had to add 107, the main menu item width to that original left offset of the first submenu. So the first submenu is left="offset=-252px"; the second one is -359px, the third is -466px and the final one is -573px. Now all four open with their right side equal to the right side of the main menu. So, if you have the audiencelinks box size set and the css for that blue container set and the width of the submenu set then it should be fairly easy to figure out the negative left offset to get the submenu positioned correctly.

Code:

//Quickglance Menus
with(milonic=new menuname("MenuMegaQuickGlance")){
style=menuStyleQuickGlanceSub;
itemwidth="682px";
zindex=90;
left='offset=-252px';
aI("type=header;image=bg_megamenu_q_top.png;");
aI("offfunction=javascript:alert('test');rawcss=background-image:url('bg_megamenu_q_repeat.png');background-position:bottom;padding:0 7px 0 5px;type=form;text=`<div class=\"mega_top_blue\"><table cellpadding\"0\" cellspacing=\"0\"><tr><td><dl><dt class=\"large\">Featured Blog:</dt><dd>adsf asdfasdf</dd></dl></td><td><dl><dt>Featured Blog:</dt><dd>adsf asdfasdf</dd></dl></td><td><dl><dt>Featured Blog:</dt><dd>adsf asdfasdf</dd></dl></td><td class=\"last\"><dl><dt>Featured Blog:</dt><dd>adsf asdfasdf</dd></dl></td></tr></table></div>`;");
aI("type=header;image=bg_megamenu_q_bottom.png");
}
//Quickglance Menus
with(milonic=new menuname("MenuMegaQuickGlance2")){
style=menuStyleQuickGlanceSub;
itemwidth="682px";
zindex=90;
left='offset=-359px';
aI("type=header;image=bg_megamenu_q_top.png;");
aI("offfunction=javascript:alert('test');rawcss=background-image:url('bg_megamenu_q_repeat.png');background-position:bottom;padding:0 7px 0 5px;type=form;text=`<div class=\"mega_top_blue\"><table cellpadding\"0\" cellspacing=\"0\"><tr><td><dl><dt class=\"large\">Featured Blog:</dt><dd>adsf asdfasdf</dd></dl></td><td><dl><dt>Featured Blog:</dt><dd>adsf asdfasdf</dd></dl></td><td><dl><dt>Featured Blog:</dt><dd>adsf asdfasdf</dd></dl></td><td class=\"last\"><dl><dt>Featured Blog:</dt><dd>adsf asdfasdf</dd></dl></td></tr></table></div>`;");
aI("type=header;image=bg_megamenu_q_bottom.png");
}
//Quickglance Menus
with(milonic=new menuname("MenuMegaQuickGlance3")){
style=menuStyleQuickGlanceSub;
itemwidth="682px";
zindex=90;
left='offset=-466px';
aI("type=header;image=bg_megamenu_q_top.png;");
aI("offfunction=javascript:alert('test');rawcss=background-image:url('bg_megamenu_q_repeat.png');background-position:bottom;padding:0 7px 0 5px;type=form;text=`<div class=\"mega_top_blue\"><table cellpadding\"0\" cellspacing=\"0\"><tr><td><dl><dt class=\"large\">Featured Blog:</dt><dd>adsf asdfasdf</dd></dl></td><td><dl><dt>Featured Blog:</dt><dd>adsf asdfasdf</dd></dl></td><td><dl><dt>Featured Blog:</dt><dd>adsf asdfasdf</dd></dl></td><td class=\"last\"><dl><dt>Featured Blog:</dt><dd>adsf asdfasdf</dd></dl></td></tr></table></div>`;");
aI("type=header;image=bg_megamenu_q_bottom.png");
}
//Quickglance Menus
with(milonic=new menuname("MenuMegaQuickGlance4")){
style=menuStyleQuickGlanceSub;
itemwidth="682px";
zindex=90;
left='offset=-573px';
aI("type=header;image=bg_megamenu_q_top.png;");
aI("offfunction=javascript:alert('test');rawcss=background-image:url('bg_megamenu_q_repeat.png');background-position:bottom;padding:0 7px 0 5px;type=form;text=`<div class=\"mega_top_blue\"><table cellpadding\"0\" cellspacing=\"0\"><tr><td><dl><dt class=\"large\">Featured Blog:</dt><dd>adsf asdfasdf</dd></dl></td><td><dl><dt>Featured Blog:</dt><dd>adsf asdfasdf</dd></dl></td><td><dl><dt>Featured Blog:</dt><dd>adsf asdfasdf</dd></dl></td><td class=\"last\"><dl><dt>Featured Blog:</dt><dd>adsf asdfasdf</dd></dl></td></tr></table></div>`;");
aI("type=header;image=bg_megamenu_q_bottom.png");
}

Please note that I don't have any image paths other than the image name because when I test I put everything in one folder, so you'll have to put all the right paths in them. Sorry

Hope this helps.

Ruth

Re: popup() w/ plain text link & abs position menu?

Poster: nwilcox
Dated: Friday August 7 2009 - 18:18:32 BST

Hi Ruth,

This in theory would work but I cannot guarantee the number of top blue levels will be the same. It may change from time to time as it is going to be built from a database. The customer could add or remove menu items at any given time.

I appreciate the effort and in another senario, I think this would have worked.

Thanks!

Re: popup() w/ plain text link & abs position menu?

Poster: Ruth
Dated: Saturday August 8 2009 - 1:28:56 BST

Hi,

Darn! I was wondering about that, but when I tried adding things to that submenu so I could see what would happen, i.e. adding 4 more

Code:

<td><dl><dt>Featured Blog:</dt><dd>adsf asdfasdf</dd></dl></td>

the table didn't expand wider, and the item didn't go wider either. What happened was that the items wrapped, so instead of Featured Blog on one line, it split into two lines and the menu itself stayed the same width.

I think it is the css in the class applied to the div in that menu item in which you have the table

Code:

.mega_top_blue {
   FONT-SIZE: 11px; OVERFLOW: hidden; WIDTH: 670px; COLOR: #fff

Just wanted to point that out because it sounds like that menu is supposed to expand based on items added from a data base and it doesn't do that

Ruth

Re: popup() w/ plain text link & abs position menu?

Poster: nwilcox
Dated: Friday August 14 2009 - 19:07:43 BST

Hi Ruth,

I was able to build out a custom rollover menu using our own homerolled solution. It just doesn't appear Milonic can do this (which is fine). There is no magic software that can do everything for everyone!

Thanks again for all of your help. I am closing this thread.