CODEWITHSUNDEEP
javascriptcanvasdraw2d
Doctor
Doctor

Reputation: 7966

Menu position appearing way off when the canvas it not positionned as top element on the page

Using Draw2d and the menu selection code from the demo but I don't get the expected result...

In the demo, the menu appears on the right side of the clicked element. In my version the menu appears way off to the top.

This seems to be caused by the fact that I have some HTML directly above the canvas (header, etc...). On the contrary if the canvas is at the very top of the page it works well.

Upvotes: 0

Views: 34

Answers (1)

Doctor
Doctor

Reputation: 7966

Found a way to fix this.

It's all about where you append the menu's HTML and relative positionning

In the demo there isn't any HTML above the canvas (on the website it's an iframe so what you see above is not really there from the canvas perspective) so it works.

The demo is misleading because in the code they add the HTML menu in the body tag. They can do that simply because their page is composed of only two elements : the body and the canvas.

In my case and probably yours too, doing this results in adding the HTML menu far far far far away from the canvas itself resulting in a position that is wayoff !

What they do is :

$("body").append(this.overlay);

What you should do is append the HTML menu (this.overlay) as a sibling of the canvas. Do NOT add it in the canvas itself. If you do, you won't catch click events anymore.

Your HTML should look like this :

<div id="some-parent">
  <div id="gfx_holder">THE CANVAS</div>
</div>

And the code updated to

$("#some-parent").append(this.overlay);

But it's not finished yet. As the menu is added using position: absolute you'll need your parent containers set to position: relative so the the child's absolute position would become relative to the parent and not web page. It's CSS... You know...
Also, the parent should be the exact same size as the child canvas !

So the HTML should evolve to this :

<div id="some-parent" style="position: relative; height: 800px">
  <div id="gfx_holder" style="height: 800px">THE CANVAS</div>
</div>

And when the menu's HTML is added it should look like that at runtime :

<div id="some-parent" style="position: relative; height: 800px">
  <div id="gfx_holder" style="height: 800px">THE CANVAS</div>
  <div class="overlayMenu" style="top: 230px; left: 197.391px;">⊕</div>
</div>

See ? The overlayMenu has position: absolute which allows it to be rendered at a correct position...

hf

Upvotes: 0

Related Questions