I have an Web page in ASP and Java with a third party object reflected on the page. I have incorporated Javascript Menuing code to try to expose a "Right Mouse Context Menu"
which would be "On Top" of all other items on the web page.
When I execute the rightclick, the menu displays nicely, but it is behind the "third party object". I have tried "z-index" but it does not seem to resolve the problem with this object. Shrunken example of the page is below. If I change the classid of the object so it is invalid, the context menu shows perfectly, but if the object is valid and displayed, the menu is rendered behind the object. Any ideas would be greatly appreciated. Code follows with reference to the actual third party object. I thnk the same prob would exist with a different third party object.
=====================
<html>
<head>
<style>
<!---
.skin0{
position:absolute;
width:200px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
visibility:hidden;
z-index: 500;
}
.skin1{
cursor: default;
font: menutext;
position: absolute;
width: 165px;
background-color: menu;
border: 1 solid buttonface;
visibility:hidden;
border: 2 outset buttonhighlight;
z-index: 500;
}
.contextmenuitems{
padding-left:15px;
padding-right:10px;
}
-->
</style>
<script language="JavaScript1.2">
<!---
//set the skin of the menu (0 or 1, with 1 rendering a default Windows menu like skin)
var menuskin=1
//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar
var display_url=0
function showmenuie5(){
//Find out how close the mouse is to the corner of the window
var rightedge=document.body.clientWidth-event.clientX
var bottomedge=document.body.clientHeight-event.clientY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<ie5menu.offsetWidth){
//move the horizontal position of the menu to the left by it's width
ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth;
}
else
{
//position the horizontal position of the menu where the mouse was clicked
ie5menu.style.left=document.body.scrollLeft+event.clientX;
}
//same concept with the vertical position
if (bottomedge<ie5menu.offsetHeight){
ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight;
}
else
{
ie5menu.style.top=document.body.scrollTop+event.clientY;
ie5menu.style.visibility="visible";
//alert("LEFT " + ie5menu.style.left);
//alert("TOP " + ie5menu.style.top);
}
return false
}
function hidemenuie5(){
ie5menu.style.visibility="hidden"
}
function highlightie5(){
if (event.srcElement.className=="contextmenuitems"){
event.srcElement.style.backgroundColor="highlight"
event.srcElement.style.color="white"
if (display_url==1)
window.status=event.srcElement.url
}
}
function lowlightie5(){
if (event.srcElement.className=="contextmenuitems"){
event.srcElement.style.backgroundColor=""
event.srcElement.style.color="black"
window.status=''
}
}
function jumptoie5(){
if (event.srcElement.className=="contextmenuitems"){
if (event.srcElement.getAttribute("target")!=null)
window.open(event.srcElement.url,event.srcElement.getAttribute("target"))
else
window.location=event.srcElement.url
}
}
-->
</script>
</head>
<body>
<SCRIPT language="JavaScript1.2">
<!---
function CheckButton(){
var s
s=event.button;
if (s==2){
showmenuie5();
}
else
{
hidemenuie5();
}
}
-->
</SCRIPT>
<DIV valign="top" align=center><span style="POSITION: relative; TOP: 0px">
<h3>Test1</h3> </span></DIV>
<div onmousedown=CheckButton() ID=TextEntry STYLE ="Z-INDEX: -500; WIDTH: 600px">
<OBJECT id=Microsoft_Licensed_Class_Manager_1_0 style="Z-INDEX: -500"
classid=clsid:5220cb21-c88d-11cf-b347-00aa00a28331 VIEWASTEXT></OBJECT>
<!--TX Text Control --><!--Button Bar--><!--TX Text Control --><!--Text Control-->
<OBJECT id=objTX style="Z-INDEX: -300; LEFT: 0px; TOP: 0px"
codeBase=Tx.cab#Version=9,0,120,501
classid=clsid:3D6D5D2F-B9F2-101C-AED5-00608CF525A5 width=400 height=250
VIEWASTEXT>
<PARAM NAME="_Version" VALUE=http://www.webdeveloper.com/forum/archive/index.php/"65540">
</OBJECT>
</div></TD></TR></TABLE></SPAN>
<DIV></DIV>
<div id='ie5menu' class='skin0' onMouseover='highlightie5()' onMouseout='lowlightie5()' onClick='jumptoie5()' >
<div class='contextmenuitems' >Copy</div>
<div class='contextmenuitems' >Paste</div>
<hr>
<div class='contextmenuitems' >Email Me</div>
</div>
<script language="JavaScript1.2">
<!---
if (document.all&&window.print){
if (menuskin==0){
ie5menu.className="skin0";
}
else
{
ie5menu.className="skin1";
}
document.oncontextmenu=showmenuie5;
document.body.onclick=hidemenuie5;
}
-->
</script>
</body>
</html
which would be "On Top" of all other items on the web page.
When I execute the rightclick, the menu displays nicely, but it is behind the "third party object". I have tried "z-index" but it does not seem to resolve the problem with this object. Shrunken example of the page is below. If I change the classid of the object so it is invalid, the context menu shows perfectly, but if the object is valid and displayed, the menu is rendered behind the object. Any ideas would be greatly appreciated. Code follows with reference to the actual third party object. I thnk the same prob would exist with a different third party object.
=====================
<html>
<head>
<style>
<!---
.skin0{
position:absolute;
width:200px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
visibility:hidden;
z-index: 500;
}
.skin1{
cursor: default;
font: menutext;
position: absolute;
width: 165px;
background-color: menu;
border: 1 solid buttonface;
visibility:hidden;
border: 2 outset buttonhighlight;
z-index: 500;
}
.contextmenuitems{
padding-left:15px;
padding-right:10px;
}
-->
</style>
<script language="JavaScript1.2">
<!---
//set the skin of the menu (0 or 1, with 1 rendering a default Windows menu like skin)
var menuskin=1
//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar
var display_url=0
function showmenuie5(){
//Find out how close the mouse is to the corner of the window
var rightedge=document.body.clientWidth-event.clientX
var bottomedge=document.body.clientHeight-event.clientY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<ie5menu.offsetWidth){
//move the horizontal position of the menu to the left by it's width
ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth;
}
else
{
//position the horizontal position of the menu where the mouse was clicked
ie5menu.style.left=document.body.scrollLeft+event.clientX;
}
//same concept with the vertical position
if (bottomedge<ie5menu.offsetHeight){
ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight;
}
else
{
ie5menu.style.top=document.body.scrollTop+event.clientY;
ie5menu.style.visibility="visible";
//alert("LEFT " + ie5menu.style.left);
//alert("TOP " + ie5menu.style.top);
}
return false
}
function hidemenuie5(){
ie5menu.style.visibility="hidden"
}
function highlightie5(){
if (event.srcElement.className=="contextmenuitems"){
event.srcElement.style.backgroundColor="highlight"
event.srcElement.style.color="white"
if (display_url==1)
window.status=event.srcElement.url
}
}
function lowlightie5(){
if (event.srcElement.className=="contextmenuitems"){
event.srcElement.style.backgroundColor=""
event.srcElement.style.color="black"
window.status=''
}
}
function jumptoie5(){
if (event.srcElement.className=="contextmenuitems"){
if (event.srcElement.getAttribute("target")!=null)
window.open(event.srcElement.url,event.srcElement.getAttribute("target"))
else
window.location=event.srcElement.url
}
}
-->
</script>
</head>
<body>
<SCRIPT language="JavaScript1.2">
<!---
function CheckButton(){
var s
s=event.button;
if (s==2){
showmenuie5();
}
else
{
hidemenuie5();
}
}
-->
</SCRIPT>
<DIV valign="top" align=center><span style="POSITION: relative; TOP: 0px">
<h3>Test1</h3> </span></DIV>
<div onmousedown=CheckButton() ID=TextEntry STYLE ="Z-INDEX: -500; WIDTH: 600px">
<OBJECT id=Microsoft_Licensed_Class_Manager_1_0 style="Z-INDEX: -500"
classid=clsid:5220cb21-c88d-11cf-b347-00aa00a28331 VIEWASTEXT></OBJECT>
<!--TX Text Control --><!--Button Bar--><!--TX Text Control --><!--Text Control-->
<OBJECT id=objTX style="Z-INDEX: -300; LEFT: 0px; TOP: 0px"
codeBase=Tx.cab#Version=9,0,120,501
classid=clsid:3D6D5D2F-B9F2-101C-AED5-00608CF525A5 width=400 height=250
VIEWASTEXT>
<PARAM NAME="_Version" VALUE=http://www.webdeveloper.com/forum/archive/index.php/"65540">
</OBJECT>
</div></TD></TR></TABLE></SPAN>
<DIV></DIV>
<div id='ie5menu' class='skin0' onMouseover='highlightie5()' onMouseout='lowlightie5()' onClick='jumptoie5()' >
<div class='contextmenuitems' >Copy</div>
<div class='contextmenuitems' >Paste</div>
<hr>
<div class='contextmenuitems' >Email Me</div>
</div>
<script language="JavaScript1.2">
<!---
if (document.all&&window.print){
if (menuskin==0){
ie5menu.className="skin0";
}
else
{
ie5menu.className="skin1";
}
document.oncontextmenu=showmenuie5;
document.body.onclick=hidemenuie5;
}
-->
</script>
</body>
</html