This post is a continuation of one started on the javascript forum. I have placed it here following my conclusion that the core issue is not javascript, but in fact something to do with z-index and objects and positioning. If I should not have posted here, I apologize in advance.:
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.
Code Follows:
=============================
<html>
<head>
<style type="text/css">
<!--
.skin0 {
position: absolute;
width: 200px;
border: 2px solid black;
background-color: menu;
font-family: Verdana;
line-height: 20px;
cursor: default;
visibility: hidden;
z-index:3;
}
.skin1 {
cursor: default;
font: menutext;
position: absolute;
width: 165px;
background-color: menu;
border: 1px solid buttonface;
visibility: hidden;
border: 2px outset buttonhighlight;
z-index:3;
}
.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
document.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 = event.button;
if (s == 2){
showmenuie5();
}
else {
hidemenuie5();
}
}
//-->
</SCRIPT>
<br>
<br>
<br>
<br>
<div id="TextEntry" style="z-index:1;" onmousedown="CheckButton()">
<OBJECT id="Microsoft_Licensed_Class_Manager_1_0" classid="clsid:5220cb21-c88d-11cf-b347-00aa00a28331" VIEWASTEXT>
</OBJECT>
<!--TX Text Control -->
<!--Text Control-->
<OBJECT id="objTX" codeBase="Tx.cab#Version=9,0,120,501" classid="clsid:3D6D5D2F-B9F2-101C-AED5-00608CF525A5" width="400" height="250" style="top:0px; left:0px; z-index:1;" VIEWASTEXT>
<PARAM NAME="_Version" VALUE="65540">
</OBJECT>
</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>
Originally posted by lexusrb
I have placed it here following my conclusion that the core issue is not javascript, but in fact something to do with z-index and objects and positioning. If I should not have posted here, I apologize in advance.:
Don't worry, I often think about 10-20% of the threads in the JavaScript section as well as DHTML and HTML sections would actually fit better in the CSS section from the start
But of cource people that have probems/questions usually don't know the best solution before they ask (or they wouldn't need to ask
).
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.
I'm afraid I have a less good answer for you.
Correct usage of z-index should place your menu above your <object>, sadly virtually all browsers in exsistance today are buggy in this regard.
In short there is no real fix for what you want, other then the workaround to have your menu not be presented ontop of your object.
There was a discussion about this a bit back here
<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=498&highlight=zindex">http://forums.webdeveloper.com/showthre ... ght=zindex</a><!-- m -->
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.
Code Follows:
=============================
<html>
<head>
<style type="text/css">
<!--
.skin0 {
position: absolute;
width: 200px;
border: 2px solid black;
background-color: menu;
font-family: Verdana;
line-height: 20px;
cursor: default;
visibility: hidden;
z-index:3;
}
.skin1 {
cursor: default;
font: menutext;
position: absolute;
width: 165px;
background-color: menu;
border: 1px solid buttonface;
visibility: hidden;
border: 2px outset buttonhighlight;
z-index:3;
}
.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
document.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 = event.button;
if (s == 2){
showmenuie5();
}
else {
hidemenuie5();
}
}
//-->
</SCRIPT>
<br>
<br>
<br>
<br>
<div id="TextEntry" style="z-index:1;" onmousedown="CheckButton()">
<OBJECT id="Microsoft_Licensed_Class_Manager_1_0" classid="clsid:5220cb21-c88d-11cf-b347-00aa00a28331" VIEWASTEXT>
</OBJECT>
<!--TX Text Control -->
<!--Text Control-->
<OBJECT id="objTX" codeBase="Tx.cab#Version=9,0,120,501" classid="clsid:3D6D5D2F-B9F2-101C-AED5-00608CF525A5" width="400" height="250" style="top:0px; left:0px; z-index:1;" VIEWASTEXT>
<PARAM NAME="_Version" VALUE="65540">
</OBJECT>
</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>
Originally posted by lexusrb I have placed it here following my conclusion that the core issue is not javascript, but in fact something to do with z-index and objects and positioning. If I should not have posted here, I apologize in advance.:
Don't worry, I often think about 10-20% of the threads in the JavaScript section as well as DHTML and HTML sections would actually fit better in the CSS section from the start
But of cource people that have probems/questions usually don't know the best solution before they ask (or they wouldn't need to ask
).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.
I'm afraid I have a less good answer for you.
Correct usage of z-index should place your menu above your <object>, sadly virtually all browsers in exsistance today are buggy in this regard.
In short there is no real fix for what you want, other then the workaround to have your menu not be presented ontop of your object.
There was a discussion about this a bit back here
<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=498&highlight=zindex">http://forums.webdeveloper.com/showthre ... ght=zindex</a><!-- m -->