CODEWITHSUNDEEP
javascriptjqueryhtmlcss
chromedude
chromedude

Reputation: 4302

How do you position a html block (<ul>) directly under a <input> with jQuery?

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!

Upvotes: 1

Views: 838

Answers (2)

tcnarss
tcnarss

Reputation: 595

It would look like this (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>

Upvotes: 0

Naftali
Naftali

Reputation: 146302

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/

Upvotes: 3

Related Questions