position a div to bottom-right of button in JQuery

Question

I can set a div to top and left position of a button using following code:

var p = $("#tag-add");
var offset = p.offset();
$("#TagModal").offset({ top: offset.top, left: offset.left})

Output:

But I want to set the div to bottom right of button:

How to do this?

use the link may help you http://stackoverflow.com/questions/3043102/how-to-get-right-offset-of-an-element-jquery][1] — Anubhav pun, Dec 14 '15 at 14:25

score 2 · Answer 1 · answered Dec 14 '15 at 14:13

2

Use this:

$("#TagModal").offset({
  top: offset.top + p.outerHeight(),
  right: offset.left + p.outerWidth()
});

answered Dec 14 '15 at 14:13

Praveen Kumar Purushothaman

164,888
24
203
252

try before posting solution.. it's setting div to right – GorvGoyl Dec 14 '15 at 14:15
@JerryGoyal Post the code! I was just assuming and helping you. Please give a way to test out. Don't just ask us to set up stuff. – Praveen Kumar Purushothaman Dec 14 '15 at 14:16
1

@JerryGoyal Can you please show us a working fiddle, so that I can prove this works? Or may be I should do some fiddling around. – Praveen Kumar Purushothaman Dec 14 '15 at 14:17
@JerryGoyal A fiddle, please? – Praveen Kumar Purushothaman Dec 14 '15 at 14:18
I'm new to UI developing but I'll create one if u want – GorvGoyl Dec 14 '15 at 14:18
@JerryGoyal It is **really needed**. Please do it. – Praveen Kumar Purushothaman Dec 14 '15 at 14:19

Arg0n · Accepted Answer · 2015-12-14T14:26:53.370

2

Try with this:

var p = $("#tag-add");
var offset = p.offset();

var $modal = $("#TagModal");
$modal.offset({
  top: offset.top + p.outerHeight(),
  left: offset.left + p.outerWidth() - $modal.outerWidth()
});

(Subtract width of the modal from @PraveenKumar's example)

See this JSFiddle.

edited Dec 14 '15 at 14:26

answered Dec 14 '15 at 14:19

Arg0n

8,283
2
21
38

@JerryGoyal See update, you were setting `right` instead of `left`. Accutally, @PraveenKumar had changed it to `right` and i took the first template from his answer. – Arg0n Dec 14 '15 at 14:27

position a div to bottom-right of button in JQuery

2 Answers2