Home/ Questions/Q 6026493
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T04:27:10+00:00

I have this HTML: <html> <body> <div id=pgContent> <div id=studyOverlay> <div id=studyContainer> <div id=studyTest>

  • 0

I have this HTML:

<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 want to use jQuery to position the <ul> directly underneath the <input>. This HTML shows only one input and ul, but there can be multiple with the same classes.

I tried this jQuery:

$('.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
});
});

but it positions it very strangely. My guess is that there is something with the offset and there being so many divs. Is there any way to fix this?

Or if you know a CSS way that would be even better!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I seemed to be able to do it with just css here:

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

    Sample css:

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


#studyTestContainer {
    background: red;
}

    That seems to do it, unless I am misunderstanding the issue at hand.

    UPDATE:

    JS:

    $('.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;
}

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

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

    And another: http://jsfiddle.net/maniator/AfJUG/9/

    • 0