Click event with context != window

48 views
Skip to first unread message

Doidel

unread,
Oct 14, 2012, 9:09:22 AM10/14/12
to mootool...@googlegroups.com
Hello guys

I'd like to change
$('map_bg').addEvent('mousedown', function(ev) { ... });
to have its context as the element $('map_bg'). The goal is so that I can access ev.client.x / ev.client.y, i.e. get the click position relative to this element.

http://mootools.net/docs/core/Types/DOMEvent let's me think that there is a way to change the context, but I couldn't figure it out yet...
Thanks in advance for your help!

Philip Thompson

unread,
Oct 15, 2012, 11:06:54 AM10/15/12
to mootool...@googlegroups.com
I don't know if the event is affected by this, but it may depend on the "display" property of the (parent) element being clicked. Try setting it to relative or absolute and see if that gives you the numbers you want. Also, a fiddle (jsfiddle.net) would allow us to play along as well. =D

Happy coding,
~Philip

Arian Stolwijk

unread,
Oct 15, 2012, 11:15:53 AM10/15/12
to mootool...@googlegroups.com
Can't you just do something like:

$('map_bg').addEvent('mousedown', function(ev) { 
    var pos = this.getPosition();
    var rel = {x: ev.page.x - pos.x, y: ev.page.y - pos.y}
});

Doidel

unread,
Oct 15, 2012, 1:23:28 PM10/15/12
to mootool...@googlegroups.com
Greetings good Sirs

Unfortunately that won't do this time (explanation below)
A jsfiddle would take too much time. If we desperately need an example I could maybe grant guest access to the dev server.
Let me try to explain conceptually:

We have:
<body>
  <div id="viewport">
    <div id="map">
    </div>
  </div>
</body>

- The body has (naturally, through window) a variable width and height
- The div inside is adjusted in % to the body size
- The most inner div represents a draggable, zoomable map (browser zoom)
So the map has a variable position (top, left), a variable zoom and a variable viewport
The viewport has variable size and variable position
The body has variable size

Attention: zoom != size

Calculating that consumes enough time to make asking here about an existing solution worth it...

Thanks for your input!

Sanford Whiteman

unread,
Oct 15, 2012, 1:28:18 PM10/15/12
to Doidel
What do you mean by "browser zoom"? You haven't adequately described
(IMO) how your situation departs from that solved by the usual
event.offsetX polyfill like Arian's.

Try a jsFiddle. It really helps (you might find the solution just by
refactoring/simplifying).

-- S.

Doidel

unread,
Oct 15, 2012, 3:50:12 PM10/15/12
to mootool...@googlegroups.com
I've created two temporary guest accounts on the dev server. If you log in a panel with information is displayed.
acc1: "GuestOne"  "guest"
acc2: "GuestTwo"  "guest"

There are two accounts because not more than 1 user can log in into an account the same time.

Don't hesitate to ask questions, I'll try to answer them as well as I can.

Doidel

unread,
Oct 16, 2012, 11:23:25 AM10/16/12
to mootool...@googlegroups.com
I talked to arian in IRC, there is no support from mootools for browser zoom anything alike, one has to calculate the position manually.
By now I found a working solution on my own, therefore I'll close the two guest accounts again.

Thanks for all the help,
Kind regards,
Doidel

Rolf Langenhuijzen

unread,
Oct 31, 2012, 4:32:07 PM10/31/12
to mootool...@googlegroups.com
Maybe post the solution here would help others in the future with a similar problem. You don't have to go into detail if that is not possible, but then describe the idea..
Reply all
Reply to author
Forward
0 new messages