jquery: position?

Question

I am trying to use jquery Position to position an element relative to another.

Basically the trigger element is 15px * 15px.

The target element is 200px*200px

I want to have,

when I click the trigger element, have the target element positioned so the top of it matches the top of the trigger,

and have the left of the target element be 5px from the right of the trigger element.

How should I do this?

(note: $('#target'), $('#trigger');)

Answer 1

Use offset in jQuery UI Position (as you say you are trying to use), like this:

$("#trigger").click(function() {
    $("#target").position({
      my: "left top",
      at: "right top",
      of: "#trigger",
      offset: "5 0"
    });
});

Answer 2

jquery offset has top and left property's you can use them

http://api.jquery.com/offset/

get the trigger elements offset ,

var triggerPostion=$('#triggerPostion').offset();

var targetLeft=triggerPostion.left// manipulate the values
var targetTop=triggerPostion.top

$('#targetDivID').css('position','absolute');
$('#targetDivID').css('top',targetLeft);
$('#targetDivID').css('left',targetTop);