0

I made a background-animation for a website. The animation reacts to the cursor position. It is created with processing. I put it on the site via the canvas-element.

Now I want to put some html-elements above the animation, mostly text and some simple colored div-container. I managed to do this with the attributes position and z-index.

But now of course, the processing-animation within the canvas-element won't react to the cursor anymore, if he is over one of the higher z-index elements.

Is there a way to let every element - regardless of its z-position - react to the cursor?

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
GilbyJazz
  • 21
  • 1
  • 1
    I think you should be able to find an answer to this in here: http://stackoverflow.com/questions/3015422/forwarding-mouse-events-through-layers-divs – Simon Repp Jul 26 '13 at 13:13

1 Answers1

0

I'm sure the last time i looked there was a answer who helped me, but since it is gone, i'll write a answer myself to close this question. Thanks to the maker of the vanished answer!

The previous answer recommended to trigger the desired event by the event from the superior element. This works.

In my particular issue with processing, it was the best solution to change the trigger of the event listeners from the canvas-element which contains the processing file in the processing.js to window.

For example - the mousemove event (usually):

//In the processing.js file, line 8332

attachEventHandler(curElement, "mousemove", function(e) {
  ...
}

changed to the following works just fine:

//In the processing.js file, line 8332

attachEventHandler(window, "mousemove", function(e) {
  ...
}
GilbyJazz
  • 21
  • 1