How to: Showmenu & load iframe simultaneously onMouseove

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

How to: Showmenu & load iframe simultaneously onMouseove

Poster: MikeSelvage
Dated: Monday February 19 2007 - 3:47:57 GMT

Hi

I am new to the Milonic Menu System, and web development in general, so forgive me if this seems a rather dumb "newbie" question.

Currently a dropdown submenu is displayed when the mouse pointer is placed on a Main Menu - Menu Item. This is great, but I am wondering if I can extend the "MouseOver" functionality to include displaying the contents of a file in an Iframe while keeping the existing display of the submenu.

I hope what I am asking is clear. I want to keep the existing functionality and add to it the display of a .htm file contents.

Thanks in advance.

Poster: Ruth
Dated: Monday February 19 2007 - 9:10:42 GMT

Hi,

Yes, you can do that, however you would also have to add a class for the link or it will just turn that bright blue with an underline and ignore the on off colors listed in your style. The css a.link which is a pseudo class seems to take precedence unless you define it in its own class for the menu when you are using a href links in an aI string. I've posted the code for a test page and the code for the main menu with what is needed for opening a page and submenu at the same time on mouseover. It is the Milonic item in the menu I set up. Note that the iframe needs both an id= and name=, that's because some browsers, I think the older ones, some use name and some use id.

You also need to make a page to load, for the test name it about.htm because that's what I used in the menu.

PAGE:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
   <title>Show Menu and Load Iframe on Same Mouseover</title>
   <style type="text/css">
.mmlinkcolor a:link { color:#000000;text-decoration:none;font-size:75%; font-family:Verdana, Tahoma, Arial; }
.mmlinkcolor a:hover{ color:#ff0000;text-decoration:underline;font-size:75%; font-family:Verdana, Tahoma, Arial; }
</style>   
</head>

<body>
<!--Milonic DHTML Website Navigation Menu Version 5.0+
Copyright 2007 (c) Milonic Solutions Limited (UK). All Rights Reserved.
Please visit http://www.milonic.com/ for more information.
-->   

<script type="text/javascript" src="milonic_src.js"></script>   
<script type="text/javascript" src="mmenudom.js"></script>
<script type="text/javascript" src="menu_data.js"></script>   
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<iframe name="tempiframe" id="tempiframe" frameborder="1" width="200" height="200" marginwidth="20" marginheight="10"> </iframe> 
</body>
</html>

Main Menu in the menu data file - DO NOT let that long line wrap, it's all on one line.

Code:

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
left=10;
orientation="horizontal";
style=menuStyle;
top=10;
aI("text=Home;url=http://www.milonic.com/;");
aI("showmenu=Samples;text=Menu Samples;");
aI("text=<a href=\"test.html\"onmouseover=\"parent.tempiframe.location='about.htm';\">Milonic</a>;offclass=mmlinkcolor;onclass=mmlinkcolor;showmenu=Milonic;type=html;"); 
aI("showmenu=Partners;text=Partners;");
aI("showmenu=Links;text=Links;");
aI("showmenu=MyMilonic;text=My Milonic;");
}

______________

There is also a way to open the menu on mouseover and open a link in a remote iframe on click. I'll post it in case you decide to use that one.

1. make a page that will load in the iframe. about.htm is what I named it.
2. you would need to make a page which will be the remote page with the iframe. I am not real knowledgeable about js so I don't know how to do anything but make a regular page, but I'm sure there's some way to get the page to be a specific size, say a smaller window and I'm also sure there's a way to get it to open in a specific place for some browsers. In the head of this page will be the loadIframe function, and in the body will be the iframe. For this example the page is named container.htm

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html> 
<head> 
<script   type="text/javascript"> 
function loadIframe() 
{ 
  var urlStr; 
  urlStr = location.search.slice(1); 
  window.frames.iframe1.location = urlStr; 
} 
</script> 
</head> 
<body onload = "loadIframe()"> 
<h3>I am the "remote" container window with the iframe</h3> 
<br> 
<iframe name="iframe1" id="iframe1" frameborder="1" width="750" height="200" marginwidth="20" marginheight="10" scrolling="auto"> </iframe> 
<br> 
<br> 
</body> 
</html> 

Then in the menu data file, in the item you want to open in this remote iframe you would code it like this.

Code:

aI("showmenu=Milonic;text=Milonic - Open about.htm;target=container;url=container.htm?about.htm;"); 

I can't figure out how to do this one so it opens the submenu and opens and loads the remote iframe page on mouseover. The submenu opens on mouseover but the loading of the iframe takes a click.

One other thing you might want to look at, since you're talking about loading iframes, is the function to load multiple iframes. The only thing about these is you would need to have an understanding of js if you want changes to them. For example the one below opens on click though I'm sure there's a way to tell it to open onmouseover in the function....

http://support.milonic.com/demos/load_m ... /index.htm

Hope these help.

Ruth

Thans for the help and quick reply ..

Poster: MikeSelvage
Dated: Monday February 19 2007 - 16:50:54 GMT

Thanks Ruth, I will give it a try.

.. And thank you for the 'other' ideas.

If I ever quit coming up with new ideas I might actually get this website done ... someday.

Thanks again for your help, it is most definitely appreciated.

Mike Selvage
Las Vegas, NV. U.S.A.

Industrial Strength JavaScript and DHTML Menus

How to: Showmenu & load iframe simultaneously onMouseove

Thans for the help and quick reply ..