Milonic menu and jquery Thickbox

[Andy]

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;");

[chrisinoz]

Done :>

aI("text=gallery;url=http://www.thedivinitycode.org/thegalle ... m=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

[msoden]

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/startingt ... n0611.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();

[Ruth]

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

[msoden]

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

[Ruth]

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: Select all

 <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> 

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

[Ruth]

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: Select all

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: Select all

aI("image=subblank2.gif;imageheight=3px;itemheight=3px;
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