Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:22
Re: Milonic menu and jquery Thickbox
Poster: msoden
Dated: Friday July 15 2011 - 4:40:17 BST
I am having a similar issue with a jquery rotator banner. The menu avbove in the rotating image. The zindex does not work. The dropdowns work fine. It is just the main nav that are images. And only only on the index page . Here is a link is a link to the test site. It has to be something simple I am missing to do.
Any second level page is a good example of how it should work.
http://www.lifemattersusa.com/index0611.html
Menu data file
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(menuStyle=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="transparent";
offcolor="#000000";
onbgcolor="transparent";
oncolor="#000099";
outfilter="randomdissolve(duration=0.3)";
padding=0;
}
with(menuStyle1=new mm_style()){
bordercolor="#a7baa3";
borderstyle="solid";
borderwidth=0;
fontfamily="Arial, Verdana, Tahoma";
fontsize="12px";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#f89829";
offcolor="#FFFFFF";
onbgcolor="#f89829";
oncolor="#005288";
outfilter="randomdissolve(duration=0.3)";
padding=6;
separatorcolor="#4a9cd2";
separatorsize=1;
}
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
position="relative";
zindex=9;
style=menuStyle;
aI("image=images/Navigationlink_home2.png;overimage=images/Navigationlink_home2_on.png;url=http://www.lifemattersusa.com/index0611.html;");
aI("image=images/Navigationlink_aboutus2.png;overimage=images/Navigationlink_aboutus2_on.png;showmenu=whylifematter;url=about0611.html;");
aI("image=images/Navigationlink_howcanwehelp2.png;overimage=images/Navigationlink_howcanwehelp2_on.png;showmenu=howwecanhelp;url=howcanwehelp0611.html;");
aI("image=images/Navigationlink_gettingstarted2.png;overimage=images/Navigationlink_gettingstarted2_on.png;showmenu=gettingstarted;url=gettingstarted0611.html");
aI("image=images/Navigationlink_ourcaregivers2.png;overimage=images/Navigationlink_ourcaregivers2_on.png;showmenu=ourcaregivers;url=ourcaregivers0611.html;");
aI("image=images/Navigationlink_contactus2.png;overimage=images/Navigationlink_contactus2_on.png;url=http://www.lifemattersusa.com/contactus0611.html;");
}
with(milonic=new menuname("whylifematter")){
overflow="scroll";
style=menuStyle1;
aI("text=Why Life Matters;url=http://www.lifemattersusa.com/whylifematters0611.html;")
aI("text=Management Team;url=http://www.lifemattersusa.com/managementteam0611.html;")
aI("text=Affiliations;url=http://www.lifemattersusa.com/affiliations0611.html;")
}
with(milonic=new menuname("howwecanhelp")){
style=menuStyle1;
aI("text=Home Care;url=http://www.lifemattersusa.com/homecare0611.html;");
aI("text=Care Matching;url=http://www.lifemattersusa.com/carematching0611.html;");
aI("text=Aging in place;url=http://www.lifemattersusa.com/aginginplace0611.html;");
aI("text=Patient Advocacy;url=http://www.lifemattersusa.com/patientadvocacy0611.html;");
aI("text=FlexCare;url=http://www.lifemattersusa.com/flexcare0611.html;");
}
with(milonic=new menuname("gettingstarted")){
style=menuStyle1;
aI("text=First Steps;url=http://www.lifemattersusa.com/firststeps0611.html;");
aI("text=Choosing Care;url=http://www.lifemattersusa.com/choosingcare0611.html;");
aI("text=Helpful Resources;url=http://www.lifemattersusa.com/helpfulresources0611.html;");
aI("text=Starting the Conversation;url=http://www.lifemattersusa.com/startingtheconversation0611.html;");
}
with(milonic=new menuname("ourcaregivers")){
style=menuStyle1;
aI("text=Hiring Process;url=http://www.lifemattersusa.com/hiringprocess0611.html;");
aI("text=Matching Process;url=http://www.lifemattersusa.com/matchingprocess0611.html;");
}
drawMenus();
Milonic menu and jquery Thickbox
Poster: cstavros19
Dated: Tuesday February 5 2008 - 19:24:24 GMT
I am using Jquery thickbox to display images and it is supposed to make all the background inactive however it does not make my milonic menu inactive. Has anybody encoutered this problem?
Thanks,
Charlie
Re: Milonic menu and jquery Thickbox
Poster: Ruth
Dated: Tuesday February 5 2008 - 23:01:37 GMT
Hi Charlie,
I'm sorry but you are going to have to go to the support area and ask this at Milonic directly. I don't think anyone here has the knowledge about thickbox and stuff, at least I don't. If you have a professional license or above use this link, log in under the name used to purchase/register the menu and open a support ticket. They are pretty quick in responding.
http://www.milonic.com/support/
If you don't have a professional license try this link http://www.milonic.com/contactus.php
Just post what is supposed to happen based on the thickbox and ask if this works or not with milonic, and/or how to make it work.
Ruth
Re: Milonic menu and jquery Thickbox
Poster: Andy
Dated: Sunday August 31 2008 - 12:57:13 BST
I'm going to respond to this and explain how to get Thickbox to work with Milonic DHTML Menus, there have been quite a few people asking for this. This method also works with Lightbox and Lytebox etc.
Basically, these scripts add a veil or a type of curtain to your webpage and then display their window with the images inside them on top of this veil. The veil has a transparency so that your site can be seen through it but the focus is on the image inside the window, it's quite a nice effect. It's very much like how certain dialog boxes work in Windows Vista.
Anyway, the problem you have is that, by default, the menu's ZIndex has been set higher than the veil and will show on top of it. In oder to get the menu to display behind the veil, you need to change the menus default ZIndex property. This is set to 1000 by default.
I believe that JQuery Thickbox and Lightbox zindexes are around 100, so you should try changing the menus zindex to something like 90. This is done with the menu property zindex, heres how it should look:
Code:
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
zindex=90;
aI("text=Home;url=index.htm;");
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
zindex=90;
aI("text=Home;url=index.htm;");
I Hope this helps explain to everybody searching for an answer to this problem
Re: Milonic menu and jquery Thickbox
Poster: iBringSolutions
Dated: Thursday November 27 2008 - 18:35:33 GMT
Much appreciated you posting this 'fix'. It worked brilliantly for me.
Thanks!
PJ
Re: Milonic menu and jquery Thickbox
Poster: wuscheck
Dated: Tuesday January 12 2010 - 17:00:25 GMT
I placed zindex=9 because lightbox got an z-index 100, 90 and 10 but it won't work.
Code:
$mmStyle->zindex=9;
Where I have to place the zindex when I use the php version of milonic?
Re: Milonic menu and jquery Thickbox
Poster: Ruth
Dated: Wednesday January 13 2010 - 2:06:58 GMT
Hi,
The zindex goes in the menu, not the style. For example:
Code:
with(milonic=new menuname("Main Menu")){
style=menuStyle;
alwaysvisible="true";
orientation="horizontal";
position="relative";
itemwidth="120";
itemheight="29";
align="center";
zindex=9;
style=menuStyle;
alwaysvisible="true";
orientation="horizontal";
position="relative";
itemwidth="120";
itemheight="29";
align="center";
zindex=9;
Ruth
Re: Milonic menu and jquery Thickbox
Poster: wuscheck
Dated: Wednesday January 13 2010 - 7:00:20 GMT
Hi Ruth,
I pasted it into the wrong code... now it works fine. Thank you for your support.
Re: Milonic menu and jquery Thickbox
Poster: chrisinoz
Dated: Monday June 21 2010 - 6:48:28 BST
Hi
Built quite a few sites with Milonic but first one requiring a Greybox popup
I am using Greybox (http://orangoo.com/labs/GreyBox/) - latest Milonic menu. (Version 5.830 - Built: Monday May 10 2010)
Greybox has
#GB_overlay {
background-color: #000;
position: absolute;
margin: auto;
top: 0;
left: 0;
z-index: 100;
}
I have set z-index in menu =9
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
overfilter="";
position="relative";
zindex="9";
A normal href link = <a href=thegallery.php class="topmenu" rel="gb_page_center[835, 700]"> (works fine)
So i put
aI("text=gallery;url=thegallery.php;rel=gb_page_center[835, 700]");
However it does not produce the overlay. It is acting as if it cannot find rel="gb_page_center[835, 700]"
See
http://www.thedivinitycode.org/home.php
Any ideas anyone? Thanks.
Cheers
Chris
Re: Milonic menu and jquery Thickbox
Poster: Andy
Dated: Tuesday June 22 2010 - 10:17:46 BST
I have now added the rel property to the latest version of the menu.
If you download version 5.831 and update milonic_src.js and mmenudom.js you should see it working.
Please note that you will have to build the menu before calling the Grey Box code and you will probably need to build all menus so you will need to add buildAllMenus=true; to the top of your menu_data.js file
Re: Milonic menu and jquery Thickbox
Poster: chrisinoz
Dated: Tuesday June 22 2010 - 11:03:39 BST
Hi Andy
Downloaded 5.831 and overwrote milonic_src.js and mmenudom.js
Thanks for that but I still get the same result at
http://www.thedivinitycode.org/home.php
Added extra line at top of menu_data.js
buildAllMenus=true;
fixMozillaZIndex=true;
Cheers
Chris
Re: Milonic menu and jquery Thickbox
Poster: Andy
Dated: Tuesday June 22 2010 - 11:35:38 BST
It looks like you are calling the menu after you have added the gallery code.
The gallery code scans through the links looking for the keyword rel - because the menu is added after the gallery script the rel in the menu is being ignore.
To get this to work you MUST build the menu first, then run the gallery script. This will ensure that the link is found.
Re: Milonic menu and jquery Thickbox
Poster: chrisinoz
Dated: Tuesday June 22 2010 - 11:51:40 BST
Andy - thanks but I am not sure how to achieve that?
I moved the following from before the <head> and put it after menu_data.js but it made no difference.
<script type="text/javascript">
var GB_ROOT_DIR = "http://www.thedivinitycode.org/greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
Cheers
Re: Milonic menu and jquery Thickbox
Poster: Andy
Dated: Tuesday June 22 2010 - 12:03:54 BST
Hi,
I think we need to forget the "rel=" idea it's just not going to work with dynamic links.
It looks like you can use methods, according to this: http://orangoo.com/labs/greybox/advance_usage.html
Can you please show me a page with the menu removed so that I can see how to use the GB Methods.
Re: Milonic menu and jquery Thickbox
Poster: chrisinoz
Dated: Tuesday June 22 2010 - 12:37:28 BST
Here is without the menu - top gallery menu item.
Using GB system - works fine
http://www.thedivinitycode.org/home2.php
<a href=thegallery.php class="topmenu" onclick="return GB_showCenter('Gallery', this.href,700,835)">gallery</a>
===========================
Using GB system (with Milonic - not working yet)
http://www.thedivinitycode.org/home.php
aI("text=gallery;url=thegallery.php;onclick=return GB_showCenter('Gallery', this.href,700,835)");
Re: Milonic menu and jquery Thickbox
Poster: Andy
Dated: Tuesday June 22 2010 - 12:45:02 BST
on this page: http://www.thedivinitycode.org/home.php
try changing: aI("text=gallery;url=thegallery.php;onclick=return GB_showCenter('Gallery', this.href,700,835)");
to : aI("text=gallery;url=thegallery.php;clickfunction=return GB_showCenter('Gallery', this.href,700,835)");
Re: Milonic menu and jquery Thickbox
Poster: chrisinoz
Dated: Tuesday June 22 2010 - 13:04:12 BST
Thanks but ...sigh...
http://www.thedivinitycode.org/home.php
aI("text=gallery;url=thegallery.php;clickfunction=return GB_showCenter('Gallery', this.href,700,835)");
Maybe I need to try an alternative to this Andy.
Re: Milonic menu and jquery Thickbox
Poster: Andy
Dated: Tuesday June 22 2010 - 13:18:28 BST
I think we are now getting closer:
try this instead: aI("text=gallery;url=thegallery.php;clickfunction=GB_showCenter('Gallery', 'thegallery.php',700,835)");
Re: Milonic menu and jquery Thickbox
Poster: chrisinoz
Dated: Tuesday June 22 2010 - 13:22:20 BST
It brings up the grey bg for a second then loses it and reverts to a standard page.
http://www.thedivinitycode.org/home.php
Re: Milonic menu and jquery Thickbox
Poster: Andy
Dated: Tuesday June 22 2010 - 13:41:23 BST
Ok, almost there then.
Try this one: aI("text=gallery;url=thegallery.php;clickfunction=GB_showCenter('Gallery', 'thegallery.php',700,835);custom=retFalse;");
Re: Milonic menu and jquery Thickbox
Poster: chrisinoz
Dated: Tuesday June 22 2010 - 13:45:51 BST
Absolutely closer - we now popup where we should :>
we now just have a referencing url prob
http://www.thedivinitycode.org/home.php
Re: Milonic menu and jquery Thickbox
Poster: Andy
Dated: Tuesday June 22 2010 - 13:48:06 BST
If this one fails then I'll need to dig deeper:
aI("text=gallery;url=thegallery.php;clickfunction=GB_showCenter('Gallery', '/thegallery.php',700,835);custom=retFalse;");
Re: Milonic menu and jquery Thickbox
Poster: chrisinoz
Dated: Tuesday June 22 2010 - 13:53:52 BST
Done :>
aI("text=gallery;url=http://www.thedivinitycode.org/thegallery.php;clickfunction=GB_showCenter('Gallery','http://www.thedivinitycode.org/thegallery.php',700,835);custom=retFalse;");
I was getting tired - getting late in OZ!
Many years using Milonic for my clients and that was the longest troubleshoot I have been involved with
Thanks very much Andy for perservering!
Cheers
Chris
Re: Milonic menu and jquery Thickbox
Poster: Ruth
Dated: Sunday July 17 2011 - 6:22:47 BST
Hi,
Can you give us some more information? Which browsers have the problem and what exactly is happening. I went to the page and I don't seem to see anything wrong. When I mouse over the main menu of images right above the banner, the menus drop down and the top horizontal menu image switches to the over image and everything looks fine.
Ruth
Re: Milonic menu and jquery Thickbox
Poster: msoden
Dated: Thursday July 21 2011 - 23:11:22 BST
The challenge is this. I have a horizontal menu that is in a div with relative positioning just above a rotater banner on the idex page. The design concept is for the menu to appear over the banner. I can not seem to make it happen. How do I get the menu to appear on the banner so the menu images appear to be part of the banner. All of the second level pages work fine because I made the large image a background. Just can't seem to make it work. I have tried to make this happen using z-index. Here are links to the site as you will see. The index page shows the menu above with only the dropdowns going over the banner. The second level pages show the menu as it should be.
index file: http://www.lifemattersusa.com/index0611.html
Second level page worked correctly with no rotator banner.: http://www.lifemattersusa.com/about0611.html
Re: Milonic menu and jquery Thickbox
Poster: Ruth
Dated: Saturday July 23 2011 - 2:34:35 BST
Hi,
I finally figured out what was different, it is so little that it doesn't stand out. Well, I'm sure it does for you since you designed it
Anyway, I made a page with a screenshot of the two pages side by side. I used your pages and on each page put borders around the relevant divs.
http://support.milonic.com/ruth/msoden/screenshot.htm
Anyway, as you can see, on the about page, the div with the lime border is short, only having the menu in it. Then the red bordered 'flash' div is higher and that image is really a background image of that div. So, that image is 270px high and is the background of the 'main' flash div but looks like a background image of the menu div. That's because the verticalspry and milonic menu div sit on top of that 'flash' div. On the index page, that rotator div can't be made to do that because those are images not background images so that over image jag at the bottom of the menu will not be 'over' the images.
I have found a script that will rotate background images using setInterval but...I am not a js person and this script is set up for the body tag. I can't figure out how you would do it on a div, I've tried and instead of rotating as it does on a page where it is from the body tag, it shows 3 time and then rotates, so you have 3 of each image one above the other. I'll post the html page code and maybe you can figure it out. If you can get the banner rotating images to actually be background images of the flash div, then the menu would drop like it does on the other pages.
Now, there is another solution which I am working on, but it will probably be a day or so before I can get it done. That is to redo the menu for that page, and put that over image bottom part as part of the submenu. When I get it done I'll post back and you can see if that will work for you.
Here's that rotating bg image page.
Code:
<html> <head>
<!-- This file retrieved from the JS-Examples archives http://www.js-examples.com 1000s of free ready to
use scripts, tutorials, forums. Author: Steve S - http://jsmadeeasy.com/ -->
<style> body {
background-repeat: no-repeat;
background-position: top left; }
</style>
<script language="JavaScript1.2">
var bgimages=new Array()
bgimages[0]="banner-1.png"
bgimages[1]="banner-2.png"
bgimages[2]="banner-3.png"
//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++)
{
pathToImg[i]=new Image()
pathToImg[i].src=bgimages[i]
}
var inc=-1
function bgSlide()
{
if (inc<bgimages.length-1)
inc++
else
inc=0
document.body.background=pathToImg[inc].src
}
if (document.all||document.getElementById)
window.onload=new Function('setInterval("bgSlide()",3000)')
</script>
</head>
<body> <BR><center>
<a href="http://www.js-examples.com">JS-Examples.com</a>
</center>
</body>
</html>
<!-- This file retrieved from the JS-Examples archives http://www.js-examples.com 1000s of free ready to
use scripts, tutorials, forums. Author: Steve S - http://jsmadeeasy.com/ -->
<style> body {
background-repeat: no-repeat;
background-position: top left; }
</style>
<script language="JavaScript1.2">
var bgimages=new Array()
bgimages[0]="banner-1.png"
bgimages[1]="banner-2.png"
bgimages[2]="banner-3.png"
//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++)
{
pathToImg[i]=new Image()
pathToImg[i].src=bgimages[i]
}
var inc=-1
function bgSlide()
{
if (inc<bgimages.length-1)
inc++
else
inc=0
document.body.background=pathToImg[inc].src
}
if (document.all||document.getElementById)
window.onload=new Function('setInterval("bgSlide()",3000)')
</script>
</head>
<body> <BR><center>
<a href="http://www.js-examples.com">JS-Examples.com</a>
</center>
</body>
</html>
As you can see I used your images and I set them for top left, but I would guess that would change if you can get it to work in a div.
Hope this helps.
Ruth
Re: Milonic menu and jquery Thickbox
Poster: Ruth
Dated: Saturday July 23 2011 - 4:34:09 BST
Hi again,
OK, doing the image in the submenu won't work. However, I did find a way to do it that makes it look sort of like it is part of the banner.
1st, go to the menuStyle1 that you have for the submenus and add this as the last item.
Code:
menubgcolor="transparent";
2nd, you need to create a transparent image 3px high and 25px wide. Then in the submenus you would add this item to the top of each submenu, it's all on one line, doesn't wrap.
Code:
aI("image=subblank2.gif;imageheight=3px;itemheight=3px;
offbgcolor=null;onbgcolor=null;separatorsize=0;padding=0px;type=disabled;");
offbgcolor=null;onbgcolor=null;separatorsize=0;padding=0px;type=disabled;");
This item will be your first item in each submenu and because of the transparent image and the off and on bg color being set to null what you see in that 3px area is the rotator image. That's the best I can do to get it to look pretty close to the other pages.
Ruth