Nyprez Nyprez - 1 year ago 64
CSS Question

JS - Scroll a hover-related div

I've a couple div that allow you to hover over

#HoverMe
in order to see contents in
#hidden
div(that's hidden when un-hovered). If the list is a bit to long, it's scrollable. However, I can't scroll it while I'm hovering
#HoverMe
div. If I want to scroll
#Hidden
div, then I've to move, which result it disappearing again(obviously).

I would like to be able to hover
#HoverMe
and have lke 5 seconds to move to
#hidden
. If you hover
#hidden
before disappearing, it will stop the hide timer and be able to scroll and check the contents.

A possible worse alternative solution:

scroll
#Hidden
div while mouse is at
#HoverMe
?

How it looks like:

------------ --------- _
| #HoverMe | | #hidden |S|
------------ | --------|R|
| car.name|O|
|---------|L|
| car.name|L|
---------|B|
| car.name|A|
|---------|R|
| car.name| |
---------|_|


Code:

<div>
<div id="HoverMe" style="width: 100px; background: green">
Car
</div>
<div id="hidden" style="overflow:auto; height:100px; position: absolute; background-color: red; display: none">

@foreach (var car in Model.Car) { @* Where the #hidden list get its content *@
<div>@car.Name</div>
}

</div>
</div>


<script>
var hoverEle = document.getElementById("HoverMe");
var popupEle = document.getElementById("hidden");

hoverEle.addEventListener('mouseover', function () {
var hoverRect = hoverEle.getBoundingClientRect(); // get the position of the hover element
popupEle.style.left = (hoverRect.right + 16) + "px";
popupEle.style.top = hoverRect.top + "px";
popupEle.style.display = "block";

}, false);

hoverEle.addEventListener('mouseout', function () {
popupEle.style.display = "none";
}, false);
</script>

Answer Source

(BTW, this question is labelled as jQuery but you're actually using just vanilla JS! No problem, of course, just letting you know!)

You're on the right track, for sure. I think you could probably handle it with setting a timeout and clearing it.

<div>
    <div id="HoverMe" style="width: 100px; background: green">
        Car
    </div>
    <div id="hidden" style="overflow:auto; height:100px; position: absolute; background-color: red; display: none">

        @foreach (var car in Model.Car) { @* Where the #hidden list get its content *@
            <div>@car.Name</div>
       }

    </div>
</div>


<script>
    var hoverEle = document.getElementById("HoverMe");
    var popupEle = document.getElementById("hidden");
    var timeoutId;

    function showPopup() {
        var hoverRect = hoverEle.getBoundingClientRect(); // get the position of the hover element
        popupEle.style.left = (hoverRect.right + 16) + "px";
        popupEle.style.top = hoverRect.top + "px";
        popupEle.style.display = "block";
    }

    function hidePopup() {
        popupEle.style.display = "none";
    }

    hoverEle.addEventListener('mouseover', function () {
        showPopup();
    }, false);

    hoverEle.addEventListener('mouseout', function () {
        timeoutId = window.setTimeout(function () {
            hidePopup(); 
        }, 5000);
    }, false);

    popupEle.addEventListener('mouseover', function () {
        if (timeoutId) {
            window.clearTimeout(timeoutId);
        }
    }, false);

    popEle.addEventListener('mouseout', function () {
        hidePopup();
    }, false);

</script>