Nyprez Nyprez - 1 month ago 15
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

(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>
Comments