Cross Frame DHTML Menu

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Actually, you need to re-write the menu to use inline frames instead of pure tables or CSS. Inline frames (<iframe>) are allwais displayed over the form elements (like <select> <textarea> or <input>).

I have just used the following code to show the iframe menu capabilities:

<html>
<head>
<title>Menu example</title>
<script>

itemHeight=20;

function addMenu(name, width, x, y, values, submenus, visible)
{
h=(itemHeight+1)*values.length+1;
w=width+2;
d=document;
d.write('<div id="'+name+'d" style="position: absolute; top: '+y+'; left: '+x+';">');
d.write('<iframe id="'+name+'i" scrolling="no" frameborder="0" width="'+w+'" height="'+h+'"> </iframe></div>');
d=document.frames[name+'i'].document;
d.write('<html><head><style>');
d.write('body { margin: 0; }');
d.write('td { background-color: #C0C0FF; }');
d.write('table { background-color: #8080FF; }');
d.write('</style><scr'+'ipt> function over(id) { document.all.item(id,0).style.backgroundColor = \'#A0A0FF\'; }');
d.write('function out(id) { document.all.item(id,0).style.backgroundColor = \'#C0C0FF\'; }');
d.write('function show(id) { parent.document.all.item(id,0).style.visibility=\'\'; }');
d.write('function hide(id) { parent.document.all.item(id,0).style.visibility=\'hidden\'; } </scr'+'ipt>');
d.write('</head><body><table width="100%" cellspacing="1" cellpadding="0">');
for (i = 0; i < values.length; i++)
{
tid=name+'n'+i;
d.write('<tr><td id="'+tid+'" onMouseOver="over(\''+tid+'\');');
if (submenus[i] != '')
{
d.write('show(\''+submenus[i]+'d\');');
}
d.write('" onMouseOut="out(\''+tid+'\');');
if (submenus[i] != '')
{
d.write('hide(\''+submenus[i]+'d\');');
}
d.write('" align="center" height="'+itemHeight+'">'+values[i]+'</td></tr>');
}
d.write('</table></body></html>');
if (!visible)
{
document.all.item(name+'d',0).style.visibility = 'hidden';
}
}

</script>
</head>
<body bgcolor="#FFFFC0">
<h1>Submenu draft demo</h1>
<table><tr><td width="140"> </td>
<td><select>
<option value="1">option1
<option value="2">option2
</select></td>
</tr></table>
<script>
addMenu('m1',100,10,55,['item 1','item 2'],['s1','s2'],true);
addMenu('s1',100,111,55,['subitem 1.1','subitem 1.2','subitem 1.3'],['','',''],false);
addMenu('s2',100,111,76,['subitem 2.1','subitem 2.2','subitem 2.3'],['','',''],false);
</script>
</body>
</html>

This is not to be the complete solution, but I could finish it if you'll need it.

Best regards
Serge

SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

COBOLdinosaur

Using an iframe is a valid approach, but if you are going to do that you should be using DOM1 compliant code. What you have there is IE only. Mozilla based browsers like Netscrap6+ do not support document.all

Cd&

> but if you are going to do that you should be using DOM1 compliant code. What you have there is IE only. Mozilla
>based browsers like Netscrap6+ do not support document.all

I know that. Thanks. I have already written the cross-browser (tested with Opera 7, NN6/7/Mozilla, IE5.5+) code to manage iframe floating windows (used it in my custom combo box), but still didn't implement it in the menu script. Let's say I'm too laisy. But I am ready to do so. The text below is just an illustration of how to create iframe menus.

Best regards
Serge

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

how about a comment from the author, or did he forget about the question?

desk

ASKER

Thanks for the variety of solutions posted for the problem. They are all good solutions to the problem but,
I'm leaning towards the iframe implementation because I feel it would be easier to maintain.

Stucco - I like the look and feel of your selection box. The author did not abandoned the question he has
been on vacation, unfortunately golfing in the rain.

- Michael

COBOLdinosaur

Glad we could help. Thanks for the A. :^)

Cd&

:-) Glad you got your question answered.
Thx for the assist points,

Stucco