P
pamelafluente
I am still working on my context menu.
This opens up on click on an element and launch a function
when a menuitem is clicked.
I am having some problems:
1. When I click on the body not always the menu closes:
sometimes it does, sometimes it doesn't. Why? and how do
I correct that.
2. When the menu opens has a strange position, like centered
on the element. How can I reposition it appropriately? And do I have
to worry about page scroll?
Thanks
-Pam
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>MyMenu</title>
</head>
<body onclick="HideMenu(document.getElementById('ContextMenu'))" >
<script language="javascript" src="MyLib.js"></script>
<div id="SomeElementWhereMenuAppears" style="top:500px; left:100px"
onclick = "MoveAndShowMenu(event,
document.getElementById('ContextMenu'), this)" >
<a>Click here</a></div>
<br />
<br />
<div id="ContextMenu" style="position:absolute;display:none;font:menu"
<div id="MenuItem1" style="width: 100px; height: 20px;
background-color:#eeeeff"
onmouseover = "MenuItemOver(this)" onmouseout =
"MenuItemOut(this)"
onclick = "MenuItemClik(this)" > MenuItem 1 </div>
<div id="MenuItem2" style="width: 100px; height: 20px;
background-color:#eeeeff"
onmouseover = "MenuItemOver(this)" onmouseout =
"MenuItemOut(this)"
onclick = "MenuItemClik(this)" > MenuItem 2 </div>
</div>
</body>
</html>
--------------------------------------------
// JScript File: MyLib.js
function MenuItemOver(MyDiv)
{
PreviousStyle = MyDiv.style.borderStyle;
MyDiv.style.borderStyle = "double";
}
function MenuItemOut(MyDiv)
{
MyDiv.style.borderStyle = "none";
}
var ClickHandledByMenu;
function MenuItemClik(MyDiv)
{
ClickHandledByMenu = true;
alert("Clicked " + MyDiv.id );
}
function MoveAndShowMenu(event, MyMenu, MyDiv)
{
if (event==null) event=window.event; // Event args
MyMenu.style.top = event.clientY + 'px';
MyMenu.style.left = event.clientX + 'px';
MyMenu.style.display = "block";
ClickHandledByMenu = true;
}
function HideMenu(MyMenu)
{
if (ClickHandledByMenu == true)
{
ClickHandledByMenu = false; //reset flag
}
else
{
MyMenu.style.display = "none"; //hide menu
}
}
This opens up on click on an element and launch a function
when a menuitem is clicked.
I am having some problems:
1. When I click on the body not always the menu closes:
sometimes it does, sometimes it doesn't. Why? and how do
I correct that.
2. When the menu opens has a strange position, like centered
on the element. How can I reposition it appropriately? And do I have
to worry about page scroll?
Thanks
-Pam
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>MyMenu</title>
</head>
<body onclick="HideMenu(document.getElementById('ContextMenu'))" >
<script language="javascript" src="MyLib.js"></script>
<div id="SomeElementWhereMenuAppears" style="top:500px; left:100px"
onclick = "MoveAndShowMenu(event,
document.getElementById('ContextMenu'), this)" >
<a>Click here</a></div>
<br />
<br />
<div id="ContextMenu" style="position:absolute;display:none;font:menu"
<div id="MenuItem1" style="width: 100px; height: 20px;
background-color:#eeeeff"
onmouseover = "MenuItemOver(this)" onmouseout =
"MenuItemOut(this)"
onclick = "MenuItemClik(this)" > MenuItem 1 </div>
<div id="MenuItem2" style="width: 100px; height: 20px;
background-color:#eeeeff"
onmouseover = "MenuItemOver(this)" onmouseout =
"MenuItemOut(this)"
onclick = "MenuItemClik(this)" > MenuItem 2 </div>
</div>
</body>
</html>
--------------------------------------------
// JScript File: MyLib.js
function MenuItemOver(MyDiv)
{
PreviousStyle = MyDiv.style.borderStyle;
MyDiv.style.borderStyle = "double";
}
function MenuItemOut(MyDiv)
{
MyDiv.style.borderStyle = "none";
}
var ClickHandledByMenu;
function MenuItemClik(MyDiv)
{
ClickHandledByMenu = true;
alert("Clicked " + MyDiv.id );
}
function MoveAndShowMenu(event, MyMenu, MyDiv)
{
if (event==null) event=window.event; // Event args
MyMenu.style.top = event.clientY + 'px';
MyMenu.style.left = event.clientX + 'px';
MyMenu.style.display = "block";
ClickHandledByMenu = true;
}
function HideMenu(MyMenu)
{
if (ClickHandledByMenu == true)
{
ClickHandledByMenu = false; //reset flag
}
else
{
MyMenu.style.display = "none"; //hide menu
}
}