Detect click inside div mozilla

[Simon Pedersen]

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

[Fred Oz]

Re: Detect click inside div mozilla

Simon Pedersen wrote:[color=blue]
> 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[/color]

event.x and event.y are IE only.
[color=blue]
> the correct y corrdinate of the click inside the div no matter the
> position of the div on the page -[/color]

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.
[color=blue]
>
> 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.)[/color]

Have a look here:

<URL:http://www.quirksmode. org/viewport/compatibility.h tml>

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.offsetPare nt) {
while (obj.offsetPare nt) {
curleft += obj.offsetLeft
obj = obj.offsetParen t;
}
} else if (obj.x) {
curleft += obj.x;
}
return curleft;
}

function findPosY(obj) {
var curtop = 0;
if (obj.offsetPare nt) {
while (obj.offsetPare nt) {
curtop += obj.offsetTop
obj = obj.offsetParen t;
}
} else if (obj.y) {
curtop += obj.y;
}
return curtop;
}

function getPXoffset(){
if (self.pageXOffs et) { // all except Explorer
return self.pageXOffse t;
} else if (document.docum entElement
&& document.docume ntElement.scrol lTop) {// Explorer 6 Strict
return document.docume ntElement.scrol lLeft;
} else if (document.body) { // all other Explorers
return document.body.s crollLeft;
}
}

function getPYoffset(){
if (self.pageYOffs et) { // all except Explorer
return self.pageYOffse t;
} else if (document.docum entElement
&& document.docume ntElement.scrol lTop) {// Explorer 6 Strict
return document.docume ntElement.scrol lTop;
} else if (document.body) { // all other Explorers
return document.body.s crollTop;
}
}
</script>

<div onclick="sayLoc (event);"></div>

[nitech@gmail.com]

Re: Detect click inside div mozilla

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

[Fred Oz]

Re: Detect click inside div mozilla

nitech@gmail.co m wrote:[color=blue]
> 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
>[/color]

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">Mo n</div>
<div style="top: 2em;" id="Tue" class="aDay">Tu e</div>
<div style="top: 4em;" id="Wed" class="aDay">We d</div>
<div style="top: 6em;" id="Thu" class="aDay">Th u</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

[nitech@gmail.com]

Re: Detect click inside div mozilla

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