Manipulating div positions using JQuery and CSS

Question

Manipulating div positions using JQuery and CSS

Whenever I hover over the #HoverMe div, a hidden #hidden div appears, and when I unhover it, the hidden div disappears again. The #hidden div contains a sub-div that functions like a dropdown list. The #hidden div is styled with position: absolute;. How can I ensure that the #hidden div shows up next to the #HoverMe div, with its sub-div (inside the hidden div) appearing underneath?

Current Layout:

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

Desired Layout:

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

Code Snippet: I am using my #HoverMe-div to display the #hidden-div, which contains a list of content I want to show.

<div style="position: relative">
     <div id="HoverMe" >
         This owner owns @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>

javascript jquery css asp.net

Answer 1

Answer №1

To ensure that the popup remains in an absolute position, you can utilize event listeners in JavaScript to accurately position the element. Here is an example of how this can be achieved:

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

Answer 2

To ensure that the popup remains in an absolute position, you can utilize event listeners in JavaScript to accurately position the element. Here is an example of how this can be achieved:

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

Answer 3

Answer №2

What are your thoughts on this creative code snippet: https://jsfiddle.net/Lnw832L3/

Here is the HTML:

<div id="hoverBox">
    <p>
        Hover me!
    </p>
    <div id="hiddenBox">
        This content is hidden.
        <div id="insideHiddenBox">
            Another container inside the hidden box.
        </div>
    </div>
</div>

And here is the corresponding CSS:

#hoverBox p {
    background: red;
    width: 100px;
    float: left;
    margin: 0;
}

#hoverBox:hover #hiddenBox {
    display: block !important;
}

#hiddenBox {
    background: yellow;
    width: 100px;
    float: left;
    display: none;
}

#insideHiddenBox {
    background: orange;
    width: 100px;
}

Answer 4

What are your thoughts on this creative code snippet: https://jsfiddle.net/Lnw832L3/

Here is the HTML:

<div id="hoverBox">
    <p>
        Hover me!
    </p>
    <div id="hiddenBox">
        This content is hidden.
        <div id="insideHiddenBox">
            Another container inside the hidden box.
        </div>
    </div>
</div>

And here is the corresponding CSS:

#hoverBox p {
    background: red;
    width: 100px;
    float: left;
    margin: 0;
}

#hoverBox:hover #hiddenBox {
    display: block !important;
}

#hiddenBox {
    background: yellow;
    width: 100px;
    float: left;
    display: none;
}

#insideHiddenBox {
    background: orange;
    width: 100px;
}

Manipulating div positions using JQuery and CSS

Answer №1

Answer №2

Similar questions

You have encountered an error: [ERR_HTTP_HEADERS_SENT]. This means that you cannot set headers after they have already been sent to the client, even if a return

angular2 ngFor is not functioning properly

Tips for Uploading the Contents from 2 Select Boxes

Can the Automator tool capture a specific section of a website in a screenshot?

Tips for setting default values for named parameters in JavaScript

An error was encountered with Jquery/Ajax when trying to serialize $(var) due to a syntax error: Unrecognized expression for the

The essential guide to creating a top-notch design system with Material UI

Adjust the browser zoom level to default when navigating to a new page

Enhancing Image Quality in Internet Explorer 10

The underscore (_) parameter in HTTP GET requests

Utilizing Javascript / jQuery to eliminate specific CSS styles

Building module dependencies in the Dojo dojo

"Utilize Selenium to navigate and select a menu option with a

Could there be a mistake in the way array combinatorics are implemented in JavaScript?

What are the steps to integrating JavaScript autocomplete into a website?

Error message "Uncaught TypeError: Unable to read property 'defaultView' of undefined" was encountered while using Google Maps

The request for data:image/png;base64,{{image}} could not be processed due to an invalid URL

The size of the image remains as is and does not adjust in

The Bootstrap nav-link class functions perfectly in Firefox, smoothly guiding users to the appropriate section. However, it seems to be experiencing some issues

Limiting client requests on the Azure Translation API