Question

i have a link which is placed ontop of a site. when it is clicked , a DIV will be shown. the div will sit just below the LINK. if the link position from left is 215px , the DIV position from left will also be 215px. How can i track the position of the link to determine the position of the DIV so it could stick to it.

<a href="link" id="link">Link</a>
<div id="float" style="display:none;">Some text</div>

jQuery:

$('#link').click(function(){
    $('#float').css('display','block');
});

Thanks.

Answer 1

JQuery has built in functions for getting positions of elements.

See Offset for position related to document, or Position for position related to element’s parent

Example to get the position of the link element…

    $('#link').click(function () {
        var link = $(this);
        var linkOffset = link.offset();
        var xPos = linkOffset.left;
        var yPos = linkOffset.top;
        $('#float').css('display', 'block');
    });