View Full Version : CSS positioning/javascript problem

08-30-2007, 06: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:


function showRater (e){
e=(e)? e: ((window.event) ? window.event: null);
var rater=document.getElementById("<%=popupPanel.ClientID%>")
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
var tempX = 0;
var tempY = 0;

function inElement(e,el){
e=(e)? e: ((window.event) ? window.event: null);
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;

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;

08-30-2007, 07:19 AM
Perhaps I should add this information:
The body is styled like so:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
width: 800px;
margin: 0px auto auto auto;
position: relative;
border: none;
background-image: url(images/bg-slash.gif);
scrollbar-base-color: #c3d8ed;

#overall{ background-color: #fff; padding-top: 5px; width: 799px; border-right: 1px solid #ccc; border-left: 1px solid #ccc;}

Then the HTML has the form:
<div id="overall">
(All content here)

It is the left position of the 'overall' div that I can't find and that makes it impossible to compare the mouse position with the position of the 'rater' div.

You can see the site itself at www.menslineaus.org.au (http://www.menslineaus.org.au)