Nyprez Nyprez - 1 month ago 5
ASP.NET (C#) Question

JQuery/CSS: div positions

I've a

#hidden
div appears when you hover a
#HoverMe div
, unhover it and it hides again. The
#hidden
have its sub-div which act like a dropdownlist.
#hidden
uses
position: absolute;
.How do I force
#hidden
div to appear next to
#HowerMe
, and let its sub-div(inside
#hidden
div) appear under?

how it's like now:

------------
| #HoverMe |
------------
---------
| #hidden |
| --------|
| car.name|
|---------|
| car.name|
---------


How I want

------------ ---------
| #HoverMe | | #hidden |
------------ | --------|
| car.name|
|---------|
| car.name|
---------


My code:
I use my
#HoverMe
-div to show
#hidden
-div that have a list of content I want to show.

<div style="position: relative">
<div id="HoverMe" >
This owner own @Html.DisplayFor(model => model.TotCar) cars in total
</div>

<div id="hidden" style="position: absolute; background-color: black"> //<------- hidden
@foreach (var car in Model.Car) {
<div>@car.Name</div>
}
</div>
</div>

Answer

If the position of the popup has to be absolute, you could add eventlisteners in javascript to position the element. Something like:

<div>
    <div id="HoverMe" style="width: 100px; background: green">
        Car
    </div>
    <div id="hidden" style="position: absolute; background-color: lightgray; display: none">
        <div>Car Info 1</div>
        <div>Car Info 2</div>
        <div>Car Info 3</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>
Comments