Simon Pedersen wrote:
Hi,
I have a site here: http://www.atom.no/christiane/defaul...&RESOURCE_ID=2
which uses divs to create a outlook like calendar interface. When you
click at a specific day, a specific hour, it will suggest to create a
booking at the clicked day.
I was having a load of troubble trying to find exactly where inside
the div element the mouse was clicked - untill I found out that ie
supported a property called simply event.y - that one seems to return
event.x and event.y are IE only.
the correct y corrdinate of the click inside the div no matter the
position of the div on the page -
You can do what you are trying to far more reliably if you create an
element (say a div or span) for each day, then put an onclick on it
that tells you what 'day' was clicked on.
I would like the calendar to work on firefox aswell, and that's why I
am asking you for help - I simply wonder how I can get the y position
of the mouse inside each weekday div (from 0 to the height of the
div.)
Have a look here:
<URL:http://www.quirksmode.org/viewport/compatibility.html>
or a quick 'n dirty implementation of the above:
<style type="text/css">
div {border: 1px solid red; color: black; background-color: #9999DD;
width: 20em; height: 40em;}
</style>
<script type="text/javascript">
function sayLoc(e) {
e = e || window.event;
var tgt = e.target || e.srcElement;
// Get top lef co-ords of div
var divX = findPosX(tgt);
var divY = findPosY(tgt);
// Workout if page has been scrolled
var pXo = getPXoffset();
var pYo = getPYoffset();
// Subtract div co-ords from event co-ords
var clickX = e.clientX - divX + pXo;
var clickY = e.clientY - divY + pYo;
alert('Co-ords within div (x, y): '
+ clickX + ', ' + clickY);
}
function findPosX(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
} else if (obj.x) {
curleft += obj.x;
}
return curleft;
}
function findPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop
obj = obj.offsetParent;
}
} else if (obj.y) {
curtop += obj.y;
}
return curtop;
}
function getPXoffset(){
if (self.pageXOffset) { // all except Explorer
return self.pageXOffset;
} else if (document.documentElement
&& document.documentElement.scrollTop) {// Explorer 6 Strict
return document.documentElement.scrollLeft;
} else if (document.body) { // all other Explorers
return document.body.scrollLeft;
}
}
function getPYoffset(){
if (self.pageYOffset) { // all except Explorer
return self.pageYOffset;
} else if (document.documentElement
&& document.documentElement.scrollTop) {// Explorer 6 Strict
return document.documentElement.scrollTop;
} else if (document.body) { // all other Explorers
return document.body.scrollTop;
}
}
</script>
<div onclick="sayLoc(event);"></div>
