menu highlighting in table cells

flobadob · Post by **flobadob** » Thu Feb 08, 2007 12:28 pm

Hello, I have a page divided into 4 table cells. 2 of the cells have milonic menus. The style of the menus were shamelessly copied from the frames example. When I click on a table cell containing a menu - but not on the actual menu itself, the menu and manu text change colour (presumably because the table cell is selected?). How can I turn off this behaviour?

thanks
Kristian.

Post by **Ruth** » Fri Feb 09, 2007 6:40 am

Hi,

Sorry, we have to see the page and the files to test this. There's no way for us to figure it out from the description. And, you're welcome to copy the style

Ruth

flobadob · Post by **flobadob** » Fri Feb 09, 2007 10:51 am

I wrote the stuff in perl/mason but here is the resulting html output...

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Offshore Test Site</title>
</head>
<body>
<script language=JavaScript src="/lib/milonic_leftmenu/milonic_src.js" type=text/javascript></script>
<script language=JavaScript>
if(ns4) {
	_d.write("<scr"+"ipt language=JavaScript src=/lib/milonic_leftmenu/mmenuns4.js><\/scr"+"ipt>");
}
else {
	_d.write("<scr"+"ipt language=JavaScript src=/lib/milonic_leftmenu/mmenudom.js><\/scr"+"ipt>");
}
</script>


<script language=JavaScript>
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()){
onbgcolor="#9EE3A9";
oncolor="#1D3B23";
offbgcolor="#61A76D";
offcolor="#F7F9F7";
bordercolor="#367E45";
borderstyle="solid";
borderwidth=1;
separatorcolor="#325235";
separatorsize=2;
padding=4;
fontsize=12;
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
subimage="/share/images/milonic/submenu_arrow_right-off.gif";
onsubimage="/share/images/milonic/submenu_arrow_right-on.gif";
high3dcolor="#FFFFFF";
low3dcolor="#367E45";
swap3d=1;
}
</script>


<table>
<tr>
<td><img src=/share/branding/Aerospace3DLogo.gif alt="AMI logo"></td>
<td><script language=JavaScript>

with(milonic=new menuname("sub1")){
	style=menuStyle;
	aI("text=Europe;target=mainiframe;url=/imageviewer.mas?path=/var/www/data/satpics/europe_color/&regex=\\d{12}\\.jpg;");
	aI("text=Africa;target=mainiframe;url=/imageviewer.mas?path=/var/www/data/satpics/africa_color/&regex=\\d{12}\\.jpg;");
}
drawMenus();

with(milonic=new menuname("Header Menu")){
	alwaysvisible=1;
	orientation="horizontal";
	style=menuStyle;
	aI("text=Home;url=http://milonic.com/;");
	aI("text=sub1test;showmenu=sub1;");
}
drawMenus();

</script>
</td>
</tr>
<tr>
<td>
<script language=JavaScript>
with(milonic=new menuname("satpicsSubmenu")){
style=menuStyle;
	aI("text=Europe;target=mainiframe;url=/imageviewer.mas?path=/var/www/data/satpics/europe_color/&regex=\\d{12}\\.jpg;");
	aI("text=Africa;target=mainiframe;url=/imageviewer.mas?path=/var/www/data/satpics/africa_color/&regex=\\d{12}\\.jpg;");
 }
drawMenus();
with(milonic=new menuname("Main Menu")){
	alwaysvisible=1;
	left=0;
	menuwidth="148";
	menualign="center";
	overflow="scroll";
	style=menuStyle;
	top=100;
	aI("text=Satpics;showmenu=satpicsSubmenu;");
}
drawMenus();
</script>
</td>
<td><iframe name=mainiframe frameborder=0 scrolling=no width=1100 height=1100>
</iframe>
</td>
</tr>
</table>
</body>
</html>

Post by **Ruth** » Fri Feb 09, 2007 10:39 pm

Hi,

OK, I know nothing about perl [aren't they some kind of gem] nor about Mason [brick-layers right

], anyway, since I don't know about that, I'm not sure on how to tell you to set up the menu.

You seem to have the files placed in tables, so assuming you want the menus in the tables, that would be the main alwaysvisible menus, not the submenus. And, those main alwaysvisible menus, when in tables would have no top or left position, but rather they would have position="relative"; as their positions.

Using your page you posted, this would be the resulting page if the menus were placed correctly, both submenus would be up after the style and have a drawmenus at the end, and each main menu would be in its own script tags with a drawMenus(); at the end of each of those. NOTE: the one that is called main menu in that table cell the td has a valign=top tag to make the menu go to the top of the cell. If you want to position it someplace else in the cell you'd need to nest a table in that cell, position the table and then put the menu in that table.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Offshore Test Site</title> 
</head> 
<body> 
<script language=JavaScript src="milonic_src.js" type=text/javascript></script> 
<script language=JavaScript> 
if(ns4) { 
   _d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>"); 
} 
else { 
   _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>"); 
} 
</script> 


<script language=JavaScript> 
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()){ 
onbgcolor="#9EE3A9"; 
oncolor="#1D3B23"; 
offbgcolor="#61A76D"; 
offcolor="#F7F9F7"; 
bordercolor="#367E45"; 
borderstyle="solid"; 
borderwidth=1; 
separatorcolor="#325235"; 
separatorsize=2; 
padding=4; 
fontsize=12; 
fontstyle="normal"; 
fontfamily="Verdana, Tahoma, Arial"; 
subimage="submenu_arrow_right-off.gif"; 
onsubimage="submenu_arrow_right-on.gif"; 
high3dcolor="#FFFFFF"; 
low3dcolor="#367E45"; 
swap3d=1; 
} 



with(milonic=new menuname("sub1")){ 
   style=menuStyle; 
   aI("text=Europe;target=mainiframe;url=/imageviewer.mas?path=/var/www/data/satpics/europe_color/®ex=\\d{12}\\.jpg;"); 
   aI("text=Africa;target=mainiframe;url=/imageviewer.mas?path=/var/www/data/satpics/africa_color/®ex=\\d{12}\\.jpg;"); 
} 

with(milonic=new menuname("satpicsSubmenu")){ 
style=menuStyle; 
   aI("text=Europe;target=mainiframe;url=/imageviewer.mas?path=/var/www/data/satpics/europe_color/®ex=\\d{12}\\.jpg;"); 
   aI("text=Africa;target=mainiframe;url=/imageviewer.mas?path=/var/www/data/satpics/africa_color/®ex=\\d{12}\\.jpg;"); 
 } 
drawMenus(); 
</script> 


<table border=1 bordercolor='red'> 
<tr> 
<td><img src=/Aerospace3DLogo.gif alt="AMI logo"></td> 
<td>
<script language=JavaScript> 
with(milonic=new menuname("Header Menu")){ 
   alwaysvisible=1; 
   orientation="horizontal"; 
   style=menuStyle; 
   position="relative";
   aI("text=Home;url=http://milonic.com/;"); 
   aI("text=sub1test;showmenu=sub1;"); 
} 
drawMenus(); 

</script> 
</td> 
</tr> 
<tr> 
<td valign='top'> 
<script language=JavaScript> 
with(milonic=new menuname("Main Menu")){ 
   alwaysvisible=1; 
   left=0; 
   menuwidth="148"; 
   menualign="center"; 
   overflow="scroll"; 
   style=menuStyle; 
position="relative"; 
   aI("text=Satpics;showmenu=satpicsSubmenu;"); 
} 
drawMenus(); 
</script> 
</td> 
<td><iframe name=mainiframe frameborder=0 scrolling=no width=1100 height=1100> 
</iframe> 
</td> 
</tr> 
</table> 
</body> 
</html>

As I said, not knowing perl or mason and how you did the menus, I can only give you what the result should look like if you view source. Now, so you know, you can put all the submenus into the style file and actually call it like you did the milonic_src.js, mmenudom.js mmenuns4.js. Also, just so you know, you do not need the mmenuns4.js file unless you are coding so that users of Netscape4x can see the menu. I don't have any idea if your site is designed for that browsers functionality. If you decide you don't need to design for Netscape4x usability, then your calls would be

Code: Select all

<script language=JavaScript src="milonic_src.js" type=text/javascript></script> 
<script language=JavaScript> src=mmenudom.js</script>

And, if you put the subs and styles into a file, or into separate files, you'd call them the same way.

Hope this made sense.

Ruth

flobadob · Post by **flobadob** » Mon Feb 12, 2007 12:16 pm

erm, sorry you lost me on line 1. However, I have discovered that putting an <img> inside a table cell was causing the problem and changing this to an inline style such as...

Code: Select all

<td style="background-image: url(/share/branding/Aerospace3DLogo.gif); background-repeat: no-repeat" width = 200 height=200>logo</td>

has fixed the problem.

rgds,
Kristian.

flobadob · Post by **flobadob** » Mon Feb 12, 2007 3:09 pm

Sorry my last reply about the image style thing was complete rubbish. The actual solution lies somewhere in the milonic menu setup. I have copy and pasted different example styles and now it works. I am guessing I had my horizontal and vertical mixed up. Dunno. Anyway it works now. thanks.

Post by **Ruth** » Mon Feb 12, 2007 9:28 pm

Hi,

Please read the information on putting a menu in a table. These are called relatively positioned menus and the same information applies for putting the menu in a div. These type of menus don't just have the call for the files placed in the cell and the submenus don't get put into the table cell at all.

http://milonic.com/tablemenu.php

Ruth