trigger methods from other dom elements

[lupos]

This may already be achievable but I'm not quite sure how to do it so pardon if this is the wrong place for this. I am using this for a background effect very similar to the space.add demo. However I have some other dom elements positioned over the canvas which prevents the effect from occurring when the mouse passes over them.

I would like to make the onMouseAction work with a window even instead of just the canvas elements mouse event.

Hopefully that makes sense and sorry again if this is the wrong place for this.

[williamngan]

Hi @lupos, if I understand correctly, you have a canvas with pt.js in a background div, and then on top there're other DOM elements which is blocking the mouse events, correct?

I think that's the default behaviors for DOM elements. One simple way I can think of is to apply CSS "pointer-events: none" on the top element, then the mouse events should pass through and go to the background element.

Alternatively, I think you can also listen for the mouse events in a parent element (that contains both bg and the top elements), and then dispatch the mouse events into the pt.js element. Something like this:
http://stackoverflow.com/questions/6157929/how-to-simulate-a-mouse-click-using-javascript

Hope this helps. Feel free to ask if you have other questions. Cheers!

[lupos]

Thanks for the reply. Yes your second suggestion will work but I was just hoping there would be a API way to just call the methods of PT directly rather than faking/passing an event. Thanks again for the help and for the great library!

[williamngan]

I see. There's no direct API yet, since onMouseAction callbacks are based on events. It's a good idea to have these also as a function call though, since dispatching events are a bit of a pain :)