pedroponting
08-30-2007, 05:56 AM
I'm having a nightmare from which I cannot wake up. to try to keep things really simple, here's the problem:
I want to determine if a mouse click is outside of a certain div. Is use a function to get the corners of the div and compare this to the mouse position registered inside the click event object. So far so good. But my function to get the position of the div returns the x position of the div relative to the positioned content div (the same value as it is assigned in the stylesheet), not to the left of the page. Whereas the function that returns the mouse position, returns it relative to the left of the whole page. I had assumed by using offsetParent, I could get to the true page position of the div, but it doesn't work.
Here's the code:
document.onclick=hideRater;
function showRater (e){
e=(e)? e: ((window.event) ? window.event: null);
var rater=document.getElementById("<%=popupPanel.ClientID%>")
rater.style.visibility="visible";
}
function hideRater(e) {
var rater=document.getElementById("<%=popupPanel.ClientID%>")
if(!inElement(e,rater)){ //I want to hide the rater div if the user clicks outside it
alert("click was outside rater: hiding it now"); //this is a debug message
rater.style.visibility="hidden";
}
}
var tempX = 0;
var tempY = 0;
function inElement(e,el){
e=(e)? e: ((window.event) ? window.event: null);
if(e){
getMouseXY(e);
}
var pos= new Position(el);
if(tempX <= pos.right && tempX >= pos.left && tempY >= pos.top && tempY <= pos.bottom){
return true;
} else return false;
}
function Position(elt){
var x = 0;
var y = 0;
var offsetPointer=elt;
while (offsetPointer) {//loop through parent elements to add offsets. x and y end up being position of elt
x += offsetPointer.offsetLeft;
y += offsetPointer.offsetTop;
offsetPointer = offsetPointer.offsetParent;
}
// correct for MacIE body margin factors
if (navigator.userAgent.indexOf("Mac") != -1 &&
typeof document.body.leftMargin != "undefined") {
x += document.body.leftMargin;
y += document.body.topMargin;
}
this.left=x;
this.top=y;
this.height=elt.offsetHeight;
this.width=elt.offsetWidth;
this.right=x+this.width;
this.bottom=y+this.height;
}
function getMouseXY(e) {
if (e.pageX || e.pageY) {
tempX = e.pageX;
tempY = e.pageY;
}
else if (e.clientX || e.clientY) {
tempX = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
tempY = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
return true;
}
I want to determine if a mouse click is outside of a certain div. Is use a function to get the corners of the div and compare this to the mouse position registered inside the click event object. So far so good. But my function to get the position of the div returns the x position of the div relative to the positioned content div (the same value as it is assigned in the stylesheet), not to the left of the page. Whereas the function that returns the mouse position, returns it relative to the left of the whole page. I had assumed by using offsetParent, I could get to the true page position of the div, but it doesn't work.
Here's the code:
document.onclick=hideRater;
function showRater (e){
e=(e)? e: ((window.event) ? window.event: null);
var rater=document.getElementById("<%=popupPanel.ClientID%>")
rater.style.visibility="visible";
}
function hideRater(e) {
var rater=document.getElementById("<%=popupPanel.ClientID%>")
if(!inElement(e,rater)){ //I want to hide the rater div if the user clicks outside it
alert("click was outside rater: hiding it now"); //this is a debug message
rater.style.visibility="hidden";
}
}
var tempX = 0;
var tempY = 0;
function inElement(e,el){
e=(e)? e: ((window.event) ? window.event: null);
if(e){
getMouseXY(e);
}
var pos= new Position(el);
if(tempX <= pos.right && tempX >= pos.left && tempY >= pos.top && tempY <= pos.bottom){
return true;
} else return false;
}
function Position(elt){
var x = 0;
var y = 0;
var offsetPointer=elt;
while (offsetPointer) {//loop through parent elements to add offsets. x and y end up being position of elt
x += offsetPointer.offsetLeft;
y += offsetPointer.offsetTop;
offsetPointer = offsetPointer.offsetParent;
}
// correct for MacIE body margin factors
if (navigator.userAgent.indexOf("Mac") != -1 &&
typeof document.body.leftMargin != "undefined") {
x += document.body.leftMargin;
y += document.body.topMargin;
}
this.left=x;
this.top=y;
this.height=elt.offsetHeight;
this.width=elt.offsetWidth;
this.right=x+this.width;
this.bottom=y+this.height;
}
function getMouseXY(e) {
if (e.pageX || e.pageY) {
tempX = e.pageX;
tempY = e.pageY;
}
else if (e.clientX || e.clientY) {
tempX = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
tempY = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
return true;
}