Do you have any comments on this!

We are facing problem for javascript context menu placed inside the
webpart. When you rightclick, the menu will be displayed some other
places. as we dont know the webpart  zones coordinates we can not make
it relative. but this goes wrong only if we set the custom property
height and width. If we do not set the
height, the context menu works fine.

How can we read the custom property height and width value after setting it
during runtime?. may be if we get the value based on that we can
generate/move the contextmenu  also. please give your tip that how do I
pass the the varialble to javascript height and width.

You should be able to dynamically create the Javascript and assign the javascript variables with the value of the webpart  height and width the same as you would with any ASP.NET code (RegisterStartupScript() and RegisterClientScriptBlock()). There is a good example here:

msdn.microsoft.com/.../...t-injectclientsidesc.asp

It is great that if you can just tell us how can assign the js
variable with the webpart  height and width.

Something like this (untested code)

string myScript;
myScript = "<script>";
myScript += "var myHeight = " + this.Height + ";";
myScript += "var myWidth =" + this.Width + ";";
myScript += "</script>";
this.Page.RegisterClientScriptBlock("MyScript", myScript)

I have used the height and width of the code which you have
sent. After that when we drop the webpart  on the SPS page, still for
calculationg the co-ordinate, it takes the window height and width
only. and not webpart height and width.
Can you just tell me the reason or clue to modify? Here is my code:
if you save as an html and rightclick mouse on body should display the
contextmenu exactly on mouse pointer. but when we add these code on a
webpart the contextmenu  displays someother places because it uses
window coordinates.

<style>
<!--
.skin0{
position:absolute; width:165px; border:2px solid black;
background-color:menu; font-family:Verdana; line-height:20px;
cursor:default; font-size:14px; z-index:100; visibility:hidden; }

.menuitems{ padding-left:10px; padding-right:10px;}
-->
</style>
<div id="ie5menu" class="skin0" onMouseover="highlightie5(event)"
onMouseout="lowlightie5(event)" onClick="jumptoie5(event)"
display:none>
<div class="menuitems" url="http://testing.com">testing.com</div>
<div class="menuitems" url="http://www.Microsoft.com">Microsoft.com</div>
</div>
<script language="JavaScript1.2">
var display_url=0
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
if (ie5||ns6) var menuobj=document.getElementById("ie5menu")
function showmenuie5(e)
{
//Find out how close the mouse is to the corner of the window, here
I assigned webpart height and width eg: rightedge=500px
bottomedge=400px.
var rightedge=ie5? document.body.clientWidth-event.clientX :
window.innerWidth-e.clientX
var bottomedge=ie5? document.body.clientHeight-event.clientY :
window.innerHeight-e.clientY

//if the horizontal distance isn't enough to accomodate the width of
the context menu
if (rightedge<menuobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5?
document.body.scrollLeft+event.clientX-menuobj.offsetWidth :
window.pageXOffset+e.clientX-menuobj.offsetWidth
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX :
window.pageXOffset+e.clientX

//same concept with the vertical position
if (bottomedge<menuobj.offsetHeight)
menuobj.style.top=ie5?
document.body.scrollTop+event.clientY-menuobj.offsetHeight :
window.pageYOffset+e.clientY-menuobj.offsetHeight
else
menuobj.style.top=ie5? document.body.scrollTop+event.clientY :
window.pageYOffset+e.clientY

menuobj.style.visibility="visible"
return false
}

function hidemenuie5(e)
{
menuobj.style.visibility="hidden"
}

function highlightie5(e)
{
var firingobj=ie5? event.srcElement : e.target
if
(firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuite\
ms")
{
if (ns6&&firingobj.parentNode.className=="menuitems")
firingobj=firingobj.parentNode //up one node
firingobj.style.backgroundColor="highlight"
firingobj.style.color="white"
if (display_url==1)
window.status=event.srcElement.url
}
}

function lowlightie5(e)
{
var firingobj=ie5? event.srcElement : e.target
if
(firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuite\
ms")
{
if (ns6&&firingobj.parentNode.className=="menuitems")
firingobj=firingobj.parentNode //up one node
firingobj.style.backgroundColor=""
firingobj.style.color="black"
window.status=''
}
}

function jumptoie5(e)
{
var firingobj=ie5? event.srcElement : e.target
if
(firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuite\
ms")
{
if (ns6&&firingobj.parentNode.className=="menuitems")
firingobj=firingobj.parentNode
if (firingobj.getAttribute("target"))
window.open(firingobj.getAttribute("url"),firingobj.getAttribute("target"))
else
window.location=firingobj.getAttribute("url")
}
}

if (ie5||ns6)
{
menuobj.style.display=''
document.oncontextmenu=showmenuie5
document.onclick=hidemenuie5
}

</script>

You'll need to do a bit more work figuring out exactly where your web part limits are if you are going to keep the context menu inside that frame. Just getting the width and height of the Web Part does not tell you where it is actually located on the screen. I would point you in the direction of offsetParent and offsetLeft / offsetTop to get the coordinates of the webpart  on the screen and then add the clientWidth and clientHeight to those offsets to figure out all 4 coordinates. From there you should be able to confine your context menu within those coordinates.

I think it may also be helpful to use the ClientID property of the WebPart, which is the ID that your javascript can use..

string myScript;
myScript = "<script>";
myScript += "var webpartID = " + this.ClientID + ";";
myScript += "</script>";
this.Page.RegisterClientScriptBlock("MyScript", myScript);

Then your javascript can just use that variable to define your webpart something like this (pseudocode only - you'll need to get the element itself to get these properties from it.

var rightedge = webpartID.offsetLeft + webpartID.ClientWidth
var bottomedge = webpartID.offsetTop + webpartID.ClientHeight

For time being I hardcoded the
var rightedge = 500
var bottomedge = 300

I was on other work. now started. still it is not comming under the
webpart area.