Relative Positioning of DIV

Question

Hi there,

There is div named "dvUsers". there is an anchor tag "lnkUsers".

When one clicks on anchortag, the div must open like a popup div just below it.

Also the divs relative position should be maintained at window resize and all. How to do that using javascript/jquery?

Answer 1

$(document).ready(function(){ $("#lnkUsers").click(function(){ $("#dvUser").show("slow"); });

style="display: none" should be applied to dvUser at the first place to make it invisible.

Answer 2

i div is positioned dynamically. there are say a hundred linkd and a div. the div should popup on the link which one clicks. also it should maintain position on window resize.

Answer 3

Perhaps you should look for a premade script like overLIB: http://www.bosrup.com/web/overlib/ !-)

Answer 4

My preference is to place both of these inside of a parent div as follows:

<div id="container">
    <a id="lnkUsers" href="#">Users</a>
    <div id="dvUsers" style="display: none;">
        <!-- user content... -->
    </div>
</div>

The CSS for these elements would be:

#container{
    /* ensure that #dvUsers is positioned relatively to this element */
    position: relative;
}
#dvUsers{
    position: absolute;
    /* this value should be based on the font-size of #lnkUsers */
    top: 30px;
    left: -10px;
}

This ensures that the div is positioned correctly relative to the link. (For the sake of this question I am assuming the parent div is either "text-align: left" or floated)

The javascript would look something like this:

$(function(){
    $('#lnkUsers').click(function(){
        $('#dvUsers').slideToggle();
    });
});