CODEWITHSUNDEEP
javascripthtmlcssdom
mechalynx
mechalynx

Reputation: 1302

Peculiar behavior on the far right side of <body>

I'm trying to implement a custom context menu and this means I have to take care of the edges of the container (so that the menu doesn't appear outside of visible boundaries).

So far, my simple proof-of-concept works but there's some weird interaction between the conditionals for checking if the menu will be outside the bottom edge and outside the right edge.

 if((context.clientHeight + e.pageY) > (body.clientHeight)){
    context.style.top = (e.pageY - context.clientHeight) + "px";
 }

 if((context.clientWidth + e.pageX) > (body.clientWidth)){
    context.style.left = (e.pageX - context.clientWidth) + "px";
 }

Alone, each of these conditionals produces exactly the intended behavior, except the one that checks for the right boundary somehow is off by about 16 pixels, which I can't explain. The really weird part however is that when I leave both conditionals there, on the far right and bottom corner there is a square area that will cause the context menu to always appear outside it, regardless of the click's distance to the edge. It's as if with both conditions, the menu refuses to appear within that square, even though it is happy to do so with only one of the two conditions.

Here's a fiddle. I'm stumped by this since the occasional console logging of coordinates seems to produce the expected numbers.

Upvotes: 0

Views: 53

Answers (1)

Lain
Lain

Reputation: 3726

I am not sure if that is related to your problem in FireFox yet in Chrome you encounter two problems:

One is the textflow with makes your conditions wrong, since the context.clientWidth changes (from 52 to 40) if you reach the right edge due to text and padding breaks. Therefore add:

white-space: nowrap;

to .menu-item{}

Also you are going to encounter problems when facing scrollbars. In my experience it is better to just change side instead of the far right corner from the middle of the page. I forked you an example here: http://jsfiddle.net/ncstjbyq/

Upvotes: 1

Related Questions