1

Following is the code for setting possition of Info Box on my Jvector map.

$(".region-info-box").css({ 'top': mouseY, 'left': mouseX, "display": "block" });

Following is the output i get..

enter image description here

Problem is when i click there on the black round, the info box appears below below the mouse click and slightly right from actual mouse click. Can anyone please suggest me where should i change my code to get info box appeared on the click of the mouse???

Thank you

leppie
  • 115,091
  • 17
  • 196
  • 297
  • This won't completely solve your problem, but do you want to set the `top` property to mouseY? Or do you want the bottom of the info box to be where you click? – j.f. Aug 26 '14 at 20:08
  • Yes, exactly. Actually i have modified my code to following, and its working properly. it will work for now...... $(".region-info-box").css({ 'top': mouseY - 195, 'left': mouseX - 21.5, "display": "block" }); Thank you. by the way –  Aug 28 '14 at 08:39
  • $("#info-box").show().css({ position:"absolute", top: event.pageY - $("#info-box").height(), left: event.pageX }); – Maharshi Dec 05 '16 at 07:04

2 Answers2

0

I know you have a something that works currently, but I wasn't sure how well that scaled, so here is another solution that may work for you. It places the bottom left of the div at the point of the mouse click. It takes into account any height of the info-box div.

$("#info-box").show().css({ 
    position:"absolute",
    top: event.pageY - $("#info-box").height(),
    left: event.pageX
});

Here is a jsFiddle demonstrating it.

j.f.
  • 3,908
  • 2
  • 29
  • 42
0

$("#info-box").show().css({ position:"absolute", top: event.pageY - $("#info-box").height(), left: event.pageX });

Maharshi
  • 1,178
  • 1
  • 14
  • 37