Menu appear on frame

[buckbeak]

Can someone help me to modify this javascript code so that the menu can appear on another frame.


var linkset=new Array()

linkset[0]='<div class="menuitems"><a href="../../catalog/members/login_mem.cfm?target=history" target="main">Transaction History</a></div>'
linkset[0]+='<div class="menuitems"><a href="../../catalog/members/login_mem.cfm?target=update" target="main">Member Account</a></div>'


var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var ns6=document.getElementById&&!document.all
var ns4=document.layers

function showmenu(e,which){

if (!document.all&&!document.getElementById&&!document.layers)
return

clearhidemenu()

menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""
menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj

if (ie4||ns6)
menuobj.innerHTML=which
else{
menuobj.document.write('<layer name=gui bgColor=white width=165 onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+which+'</layer>')
menuobj.document.close()
}

menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height
eventX=ie4? event.clientX : ns6? e.clientX : e.x
eventY=ie4? event.clientY : ns6? e.clientY : e.y

//Find out how close the mouse is to the corner of the window
var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX

//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight
else
menuobj.thestyle.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY
menuobj.thestyle.visibility="visible"
return false
}

function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"
}

function dynamichide(e){
if (ie4&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
if (ie4||ns6||ns4)
delayhide=setTimeout("hidemenu()",500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

function highlightmenu(e,state){
if (document.all)
source_el=event.srcElement
else if (document.getElementById)
source_el=e.target
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
else{
while(source_el.id!="popmenu"){
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
}
}
}

if (ie4||ns6)
document.onclick=hidemenu

This is the table where the sub menu appear below it.

<table height="100%" width="100%" border="0" cellspacing="0" cellpadding="0">
<div id="popmenu" class="menuskin" onMouseOver="clearhidemenu();highlightmenu(event,'on')" onMouseOut="highlightmenu(event,'off');dynamichide(event)">
</div>
<tr ID="menbar1" STYLE="visibility:hide;" align="center">
<td><a href="../../catalog/catalog.cfm" target="main" onMouseOver="showmenu(event,linkset[0])" onMouseOut="delayhidemenu()"><font class="mmenu">Market Place</font></a></td>
</tr>
</table>

[ShriekForth]

To get the page with the Market Place link to call another frame you need to use the following syntax

onMouseOver="parent.YOUR_FRAME_NAME.showmenu(event,linkset[0])"

This means that you can move most of that script to the "menu" frame. Although the way this is written now, the linkset Array will have to stay in the Market Place "content" window. You could set it up so that this does not need to happen by just passing the index, in this case 0 to the function, and allow the menu frame to containt he array and read from it.

ShriekForth

[buckbeak]

Hi!

Thanks for replying!

I tried your method. I put this code in -
onMouseOver="parent.main.showmenu(event,linkset[0])"

I got this error : Object doesn't support this property or method.

main is the frame name which i want the market place submenu to be appeared on while the frame name for the market place is leftFrame.

If I put parent.leftFrame.showmenu(...) then there are no errors.

Please help!

[ShriekForth]

Did you move the linkset array over as well? if you try to reference linkset[0] and it does not exist on that page you could receive that warning.

ShriekForth

[piglet]

Hi buckbeak,

I don't know whether you've invesigated this method - but I use a script to keep all the code on one frame - and dynamically create the menu on the target frame when required..easier to see than to explain: Try this link (http://homepage.ntlworld.com/thepiglet/stephen/xfmenu.html)

ps. I know the link back to my site from that page is broken!

[buckbeak]

Hi ShriekForth,

I tried your method but still the same error....:(

So I tried piglet code....and it's working...thanks piglet!

[piglet]

Great! - What's the site you're thinking of using it on?

[buckbeak]

it's a website that I'm developing for my company.:)

[piglet]

Ok - but if you use any code from my script please could you check with me first (as requested on the demo page)


Thanks