Menu
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
951
Answer: Use the jQuery hover() method By default, to open or display the dropdown menu in Bootstrap you have to click on the trigger element. However, if you want to show the dropdown on mouseover instead of click you can do it with little customization using the CSS and jQuery.
To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.
Wrap a <div> element around the elements to position the dropdown content correctly with CSS. CSS) The . dropdown class uses position:relative , which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute ).
To right-align a menu, use . dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .
It seems like on event wasn't called
This works :
Bootply : http://www.bootply.com/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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
