What is the best way to align an HTML block (<ul>) immediately below an <input> using jQuery?

Question

What is the best way to align an HTML block (<ul>) immediately below an <input> using jQuery?

Here is the HTML code snippet:

<html>
    <body>
        <div id="pgContent">
            <div id="studyOverlay">
                <div id="studyContainer">
                    <div id="studyTest">
                        <div id="studyTestContainer">
                            <input class="dropInput">
                            <ul class="inputDrop">
                            <!--some <li>s-->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

I am looking to use jQuery to position the <ul> element directly under the <input>. Although this example only shows one set of input and ul, there could be multiple instances with the same classes.

Here is the jQuery code I have tried:

$('.dropInput').live('click', function() {
var offset = $(this).offset();
var height = $(this).height();
var width = $(this).width();
var top = offset.top + height + "px";
var right = offset.left + width + "px";

$(this).next().show();

$(this).next().css( {
    'position': 'absolute',
    'right': right,
    'top': top
});
});

However, the positioning seems off in my implementation. I suspect it may have to do with the offsets and the nested div elements. Is there a way to correct this?

If you have any CSS solutions, that would be even more preferable!

javascript jquery html css

Answer 1

Answer №1

I found a solution using only CSS in this case:

http://jsfiddle.net/maniator/AfJUG/

Here is the sample CSS code:

div {
    padding: 10px;
    background: blue;
}


#studyTestContainer {
    background: red;
}

It appears to work, unless I am mistaken about the problem.

UPDATE:

JavaScript:

$('.dropInput').focus(function(){
    $(this).next('.inputDrop').slideDown();
}).blur(function(){
    $(this).next('.inputDrop').slideUp();
});

CSS:

div {
    padding: 10px;
    background: blue;
}


#studyTestContainer {
    background: red;
}

.inputDrop {
    display: none;
}

.dropInput {
    display: block;
}

Updated Fiddle: http://jsfiddle.net/maniator/AfJUG/6/

New Fiddle created based on the comments below: http://jsfiddle.net/maniator/AfJUG/7/

Check out another version here: http://jsfiddle.net/maniator/AfJUG/9/

Answer 2

I found a solution using only CSS in this case:

http://jsfiddle.net/maniator/AfJUG/

Here is the sample CSS code:

div {
    padding: 10px;
    background: blue;
}


#studyTestContainer {
    background: red;
}

It appears to work, unless I am mistaken about the problem.

UPDATE:

JavaScript:

$('.dropInput').focus(function(){
    $(this).next('.inputDrop').slideDown();
}).blur(function(){
    $(this).next('.inputDrop').slideUp();
});

CSS:

div {
    padding: 10px;
    background: blue;
}


#studyTestContainer {
    background: red;
}

.inputDrop {
    display: none;
}

.dropInput {
    display: block;
}

Updated Fiddle: http://jsfiddle.net/maniator/AfJUG/6/

New Fiddle created based on the comments below: http://jsfiddle.net/maniator/AfJUG/7/

Check out another version here: http://jsfiddle.net/maniator/AfJUG/9/

Answer 3

Answer №2

Here is an example of how it would appear on JSFiddle:

.dropInput{}
.inputDrop{display:block;}

<script src="//ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
<div id="pgContent">
  <div id="studyOverlay">
    <div id="studyContainer">
      <div id="studyTest">
        <div id="studyTestContainer">
          <input class="dropInput">
          <ul class="inputDrop">
            <!--some <li>s-->
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 4

Here is an example of how it would appear on JSFiddle:

.dropInput{}
.inputDrop{display:block;}

<script src="//ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
<div id="pgContent">
  <div id="studyOverlay">
    <div id="studyContainer">
      <div id="studyTest">
        <div id="studyTestContainer">
          <input class="dropInput">
          <ul class="inputDrop">
            <!--some <li>s-->
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

What is the best way to align an HTML block (<ul>) immediately below an <input> using jQuery?

Answer №1

Answer №2

Similar questions

Is there a way to position a heart-shaped animation element on the top right corner of a Bootstrap card image?

Using JavaScript, what is the best way to retrieve the provided JSON data?

Display the returned view following an AJAX request

Is it possible to integrate HTML pages as sections within an HTML file using AngularJS?

Make the pie charts created by progressbar.js larger by increasing their width and height

Is it possible to control the functionality of the back button?

Events that are loaded using jQuery

A Vue.js trick to modify the element's class within a v-for loop when hovering in and out

Is there a way to position right and left divs within a content div on the same top-level?

Utilize Python (specifically with the Pillow library) to remove transparent backgrounds

Using forEach to iterate through objects presents challenges when attempting to make changes

Splitting HTML content into nodes using PHP XPath (including empty nodes)

Utilize Angular, PHP, and MySQL to add data to database encountering error

The CSS counter fails to increment

What is the reason that .bin/www is recognized as a JavaScript file even though it does not have the .js extension when utilizing express-generator

Creating Elements with Full Screen Width Instead of Parent Width Using CSS

Exploring the Use of 7BitEncodedInt in JavaScript

The specified method is not recognized as a function in the ReactJS library

Transitioning JS/CSS effects when the window is inactive

The relationship between parent and child elements in CSS