CODEWITHSUNDEEP
jquerypopup
ipkiss
ipkiss

Reputation: 13651

The jQuery popup does not show at the desired position

I have a text box and a hidden div which will be shown as a popup. I want when user click on the textbox, the hidden div popup will be displayed at the textbox's position. So, I use the code:

var p = $("#listCats");
var position = p.offset();
$('#category').css({"left" : position.left, "top" : position.top});

listCats: the id of the textbox

category: the id of the hidden div, and it is also the css

#category {
        width: 508px;
        min-height: 135px;
        padding: 0.4em;
        position: absolute;
        border: 2px solid rgb(124, 113, 113);
        background: #fff
}

However, the hidden div popup does not show as I expected, rather:

enter image description here

Was I doing something wrong?

Edited: The complete hidded div as follows:

<div id="category" style="display:none;">
        <s:iterator value="categoryMapList">
            <div class="cat_label_title parentCat" id="<s:property value="key.id" />">
                <s:property value="key.name" />
                <div class="subCat">
                    <s:iterator value="value" var="category">
                        <label >
                            <a  href="#" class="cat_label_item catItem" name="catItem:<s:property value="key.name" />, <s:property value="#category.name" />"
                                id="catItem:<s:property value="#category.id" />">
                                <s:property value="#category.name" />
                            </a>
                        </label>
                    </s:iterator>
                </div>
            </div>
        </s:iterator>
    </div>

Upvotes: 0

Views: 272

Answers (3)

darshanags
darshanags

Reputation: 2519

HTML:

<input type="text" name="txt" id="listCats">

<div id="category"><p>Hello</p></div>

CSS:

#category {
  width: 508px;
  min-height: 135px;
  padding: 0.4em;
  position: absolute;
  border: 2px solid rgb(124, 113, 113);
  background: #fff;
  display: none;
}

jQuery:

var $inp = $("#listCats"),
$msg = $("#category"),
pos = $inp.offset();

$inp.bind("click", function () {
  $msg.css({
    "left": pos.left,
    "top": pos.top + $inp.height()
  }).show();
});

Working fiddle: http://jsfiddle.net/darshanags/MEgrp/12/

Upvotes: 0

mattdlockyer
mattdlockyer

Reputation: 7314

You might want to check to see if the category container is absolutely positioned inside another div that has relative positioning.

This would mean the top, left is relative to the parent.

So by taking the page offset of the parent, and then setting that to the child, you would push it away from the parent instead of under.

Check this out as well: https://stackoverflow.com/a/3202038/1060487

Upvotes: 1

daniatic
daniatic

Reputation: 532

jquery.css needs a string with px at the end. In your case: 

$('#category').css({"left" : position.left + 'px', "top" : position.top + 'px'});

Upvotes: 0

Related Questions