By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,853 Members | 2,144 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,853 IT Pros & Developers. It's quick & easy.

Detect click inside div mozilla

P: n/a
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
the correct y corrdinate of the click inside the div no matter the
position of the div on the page -

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.)

Thanks in advance-
Simon
Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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>
Jul 23 '05 #2

P: n/a
Thanks-

although at first somewhat confusing (i had been fiddling with this
code earlier) - it turned out quite all right. Now the solution works
both in Firefox and IE.

Kind Regards,
Simon

Jul 23 '05 #3

P: n/a
ni****@gmail.com wrote:
Thanks-

although at first somewhat confusing (i had been fiddling with this
code earlier) - it turned out quite all right. Now the solution works
both in Firefox and IE.

Kind Regards,
Simon


I was suggesting that you do something like this:

<style type="text/css">
..aDay {border: 1px solid red; width: 2em; height: 2em;
position: absolute; left: 0em;}
</style>

<script type="text/javascript">
function sayID(e){
e = e || window.event;
var tgt = e.target || e.srcElement;
alert('You clicked on ' + tgt.id);
}
</script>

<div style="position:relative;" onclick="
sayID(event);">
<div style="top: 0em;" id="Mon" class="aDay">Mon</div>
<div style="top: 2em;" id="Tue" class="aDay">Tue</div>
<div style="top: 4em;" id="Wed" class="aDay">Wed</div>
<div style="top: 6em;" id="Thu" class="aDay">Thu</div>
</div>
That's very rough, but you can see it's vastly simpler and more
reliable than trying to guess what was clicked on by the x,y
coordinates. It works in IE & Firefox of course.

It also allows the user to specify any font size and everything still
works (try setting your browser to larger/smaller fonts).

--
Fred
Jul 23 '05 #4

P: n/a
Hi Fred,

I understand your point. If you check out the code of the component
however, I think you will see the logic in which makes the present
solution work - also would work when font sizes are larger.

However- I am quite a newbie when it comes to dhtml, so there might be
aspects I didn't totally understand.

Thanks for your time,

- Simon

Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.