I want my bootstrap dropdown meny to be positioned at the mouse position. For some reason the pageX and pageY is wrong. In order to correct the position i have to add or subtract from x and y. BUT, if I then zoom in or out, the X and Y are incorrect again. I've tried everything out there. This is one of them..

Html:

<div class="dropdown">
   <div id="menuitems" onclick="setposition(event)" class="dropdown-toggle" data-toggle="dropdown">
   Menu
   </div>

   <ul class="dropdown-menu" id="xxx" role="menu" aria-labelledby="menuitems">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#"</i>Link 1</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#"</i>Link 2</a></li>
   </ul>
</div>

Script

function setposition(e) {
    var bodyOffsets = document.body.getBoundingClientRect();
    tempX = e.pageX - bodyOffsets.left;
    tempY = e.pageY;

    $("#xxx").css({ 'top': tempY, 'left': tempX });
}

What do I need to do in order to get correct X and Y position with different resolutions?

Thank you

I want my bootstrap dropdown meny to be positioned at the mouse position. For some reason the pageX and pageY is wrong. In order to correct the position i have to add or subtract from x and y. BUT, if I then zoom in or out, the X and Y are incorrect again. I've tried everything out there. This is one of them..

Html:

<div class="dropdown">
   <div id="menuitems" onclick="setposition(event)" class="dropdown-toggle" data-toggle="dropdown">
   Menu
   </div>

   <ul class="dropdown-menu" id="xxx" role="menu" aria-labelledby="menuitems">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#"</i>Link 1</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#"</i>Link 2</a></li>
   </ul>
</div>

Script

function setposition(e) {
    var bodyOffsets = document.body.getBoundingClientRect();
    tempX = e.pageX - bodyOffsets.left;
    tempY = e.pageY;

    $("#xxx").css({ 'top': tempY, 'left': tempX });
}

What do I need to do in order to get correct X and Y position with different resolutions?

Thank you

• javascript
• asp-mvc
• twitter-bootstrap

1 Answer 1

It seems like on event wasn't called

This works :

Bootply : http://www.bootply./pEFhaLWTht

JS:

function setposition(e) {
    var bodyOffsets = document.body.getBoundingClientRect();
    tempX = e.pageX - bodyOffsets.left;
    tempY = e.pageY;
  console.log(tempX);

    $("#xxx").css({ 'top': tempY, 'left': tempX });
}

$('#menuitems').on('click', function(e){
    setposition(e);
});

HTML:

<div class="dropdown">
   <div id="menuitems" class="dropdown-toggle" data-toggle="dropdown">
   Menu
   </div>

   <ul class="dropdown-menu" id="xxx" role="menu" aria-labelledby="menuitems">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#" <="" i="">Link 1</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#" <="" i="">Link 2</a></li>
   </ul>
</div>