1

I am having issues with my event handlers as they interact with a canvas. essentially what happens is the canvas UNDERNEATH the canvas with the event handler is somehow affecting the canvas above it, and breaking the event sometimes.

I am using an onmouseover event to hide the upper canvas and onmouseout to reshow the element. note that i get the same effect with onmousemove.

I have transposed my code into a jsfiddle: http://jsfiddle.net/morgaman/zPuH8/ ...but frustratingly it doesn't run. So, the working version -per se- is hosted live here: http://chrismorga.com/rainnav/rbowtester.html.

I have heard of "jCanvas" ( http://calebevans.me/projects/jcanvas/index.php ) being the jQuery answer to my problems, but I don't know how to program it or make a recursive animation work. Help?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
chris
  • 65
  • 1
  • 2
  • 8

2 Answers2

2

Give your div that holds myCanvasL2 the same height and width as the canvas. Otherwise it will adjust its size to the canvas, and when its set to not display, it will call mouseout since its height will essentially be 0.

Working Version

<div style="z-index:1; position: absolute; left: 18%; top:50px;width:800px;height:50px;" 
    onmouseover="document.getElementById('myCanvasL2').style.display = 'none';"
    onmouseout="document.getElementById('myCanvasL2').style.display = 'block';">
        <canvas id="myCanvasL2" width="800" height="50"></canvas>
</div>​
Loktar
  • 34,764
  • 7
  • 90
  • 104
2

Loktar's got a great answer here, but I'm really curious as to exactly what you're doing.

Life would be a lot easier for you going forward if you kept the two canvases always the same size and always in the same order and only ever put event handlers on the top canvas.

If you need to "hide" one of the two canvases, do so by clearing it completely (clearRect, yada yada).

When that canvas is cleared if you need to interact with the canvas below it, keep a flag topCanvasCleared or something, and while it is true any events you get on the top canvas you can pass on to a function that acts on the second canvas as if the event originated from it. Since they are the same size it ought to work perfectly.

...but do you really need two canvases here? What's the end goal? Why can't you have one canvas that displays two very distinct states at different times instead? Life would be reeeally much easier if you just had one DOM element to worry about from the get-go. It's certainly not hard to have all the functionality you've got so far in just one canvas.

I think the solution here is a reorganization of what you've got so far to be just one canvas or at most two canvases that never change shape or size or visibility, with event handlers only on the topmost one. I urge you to give those two ideas some thought.

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
  • essentially i want to recreate this: http://labs.dragoninteractive.com/panel/demo/ but use it as an on hover menu bar instead of a login. i don't have the jquery know-how to dssect this code, or use jCanvas – chris Jun 19 '12 at 16:20
  • also, if you have looked at my target example.. the only way i can picture the menu buttons working is with another div or something on top of my canvases. (sorry if that made you cringe) im a little over my head here but i'll try to reduse the number of dom elements. Thanks for the input! – chris Jun 19 '12 at 16:35
  • 1
    Ah yeah that's a great point actually. Sometimes I get too caught up in fixing the immediate problem rather than looking at the whole picture. +1 – Loktar Jun 19 '12 at 17:18
  • 1
    I upvoted you too ole' Loke. A big plus of SO is that multiple answers stay after a question has been resolved, because you never know if a person searching the archives will come across a question and want a very technical answer to a technical problem, or another way of defining the problem, etc. If you ever see only one type of answer on an ambiguous question, its always worth offering the other! A good example is a question like this: http://stackoverflow.com/q/7918803/154112 where both answers have a lot of value – Simon Sarris Jun 19 '12 at 17:55