Jquery Plugin: get_percentage_position

This is a plugin, that builds on JQuery, to give the position/size of a div (or any DOM item) relative to another. Intended usage is to get the size and position of a magnifier/annotator/selector_aspect (see each of those plugins), relative to the image they are on top of. But it is quite generic, so is a standalone plugin.

The class is well-documented inline, so refer to that for full details.

Usage Example

Here is a simple artificial example:

<div style="width:20px;height:30px;background:red;" id="one"></div>
<div style="width:60px;height:60px;background:blue;" id="two"></div>

And then you can do:

var info=$('#one').dcookorg_get_percentage_position($('#two'));
This will return an object with 4 elements: width and height which tell the relative dimensions (where 1 means the same size, 0.5 means half the size, 2 means twice the size, etc.), and left and top which describe the difference in absolute position of the upper-left corner of each div, in proportion to the width and height of the second named object ('two' in this example). So, in this case, the returned object is {left:0,top:-0.5,width:0.3333333333333333,height:0.5}.

You can also do:

var csv=$('#two').dcookorg_get_percentage_position($('#one'),'csv')
This returns a 4-element csv string: left, top, width, height. In this case it returns: 0,1,3,2 (same left-coord, and 'two' is positioned exactly 1.0 'one' height's below 'one'; two is 3 times as wide and 2 times as high).

The plugin also allows you specify whether to use the inner or outer dimensions of each div. By default it uses the inner dimension of 'this' (i.e. excluding borders) and the outer dimension of 'parent' (i.e. including borders).


MIT license, meaning you are free to use it in both private and commercial projects, and free to adapt it however you wish.


Please download and host on your own server.


Released: 2010-06-04, 2.4 Kb

The plugin comes in a single file, documented fairly well with a comment block at the top of the file: dcookorg_get_percentage_position.js. It should reduce quite a lot if minimized. It is beta-quality (fairly well tested on all of FF3 (linux), FF3.6 (win), IE6, IE7, IE8 and Safari(win)).

Other required files: jQuery (tested with jQuery 1.4, but should be fine with at least JQuery 1.3, and probably much earlier).

Bug Reports, Future Development And Helping Out

Contact me at darren at dcook.org. Putting "dcookorg_get_percentage_position" in the subject should help get you past my spam filters.

If you find a problem please let me know a URL where I can try it out; also let me know your browser and which version of jquery and jqueryUI you are using. If you can let me know if your browser works fine with the above demo, that will also help troubleshooting.

Let me know of any cool sites or demos you make using this plugin!