I have multiple elements in a page where hovering over an element will show another div. Example code is in the jsfiddle. The problem is when the cursor goes on the right, this div will cover up the content beneath the cursor. What are ways to make it so the div is out of the way? In this case, the div should be in the lower half or the left side.
Do I test for cursor position and redefine the position of the hidden div based on where the cursor is? Or is there something built-in that can do it? Thanks.
<div class="container">
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="flyout hidden"></div>
</div>
You can use JavaScript to track the mouse movement and apply positioning classes on the flyout. This is pretty inefficient, but it works:
https://jsfiddle.net/p89ag5zu/3/
var $container = $('.container');
// This would be much faster if you throttle calls to the handler.
// Google "JavaScript event throttling" for examples.
$container.on('mousemove', function (e) {
// This would be much faster if you store the container offset values.
// Note that you might need to re-calculate when the screen size changes.
if ((e.clientX - $container.offset().left) < $container.width() / 2) {
$flyout.removeClass('left');
$flyout.addClass('right');
}
else {
$flyout.removeClass('right');
$flyout.addClass('left');
}
if ((e.clientY - $container.offset().top) < $container.height() / 2) {
$flyout.removeClass('top');
$flyout.addClass('bottom');
}
else {
$flyout.removeClass('bottom');
$flyout.addClass('top');
}
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments