Position any element to any element, even if they are hidden

This plugin works exactly (at least in our intentions) as position plugin from jQuery UI. The need for this plugin raised from the fact that it doesn't work with hidden elements, and in some cases we prefered to position them before showing. Since we still use jQuery UI where we don't need to position anything hidden or any of the additional options, this plugin is built so that it can use the exact same option input, this way you just need to change your code from $().position({options...}); to $().hiddenPosition({options...});. The inverse is true unless you are using one of the few additional options, like viewport setting. Another big difference is that HiddenPosition works well even with position:relative elements, so take that into account if you need to go back to jQuery UI.

view code
viewport
OF
A
B
Try it
my
at
offset
collision
my
at
offset
collision

License

HiddenPosition is provided AS IS under GPL-3.0

Basically this means this program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You'll find a copy of the license bundled with the plugin or you can find it online here.

Support

support bug report
blog dev blog - rss
discussions forum
watch/fork GitHub

Downloads

date bundle version
25 march 2012 hiddenposition.1.1.zip 1.1 - Fixed a bug with IE
13 march 2012 hiddenposition.1.0.zip 1.0

Options

All options can be specified directly in the plugin call or via metadata (if you don't know it follow jQuery.metadata). If you need to change any default option so you don't have to specify it for every call of HiddenPosition you can use $.fn.hiddenPosition.defaults.

Name type default description
ofselector, element, jQuery objectnullElement to position to.
mystring'center center'A string combining two directions separated by a space and representing which edge of the element being positioned to use. If a direction is not specified it will default to center. Valide input are, following css conventions, 'top', 'bottom', 'center', 'left' and 'right'. Example: 'top left', 'bottom' or 'right top'.
atstring'center center'A string combining two directions separated by a space and representing which edge of the target element to position to. If a direction is not specified it will default to center. Valide input are, following css conventions, 'top', 'bottom', 'center', 'left' and 'right'. Example: 'top left', 'bottom' or 'right top'.
offsetstring'0 0'A string combining two numbers separated by space and representing the left/top offset in px respectively.
collisionstring'flip flip'A string combining two behaviours separated by space. These will be used if the positioning process is placing the element outside the viewport. Valide values are flip/fit/none and they refer to horizontal and vertical respectively. If only one behaviour is found it will be used both for horizontal and vertical adjustment.
viewportselector, element, jQuery objectnullThe element to consider as viewport for this positioning collisions. If set to null window will be used instead.
usingfunctionnullIf specified the plugin will not actually position the element but will delegate to this callback passing as argument an object containing top and left coordinates and the original element to position as separate argument. using:function(coord,element){...}

Methods

HiddenPosition Plugin public functions.

Function description
$.fn.hiddenPosition.getHiddenDimensions(element) Return this element coordinates and dimensions even if it's hidden, in an object structured like this:

    {
        position:       'absolute/relative/...',
        top:            0, /* this refer to actual css property 'top' */
        left:           0, /* this refer to actual css property 'left' */
        offsetTop:      0,
        offsetLeft:     0,
        width:          100, /* outer width */
        height:         100, /* outer height */
        innerWidth:     100,
        innerHeight:    100
    }
                                                
$.fn.hiddenPosition.toggleDebug()Activates/deactivates debug mode.

Thanks

This plugin didn't have any contributor yet, but I feel it's important to thank all the people who provided open source software that made possible this project and this site

jQuery - If you are here you probably already know how it can change your working life
Bootstrap from Twitter - Without which working on this site would have been really painfull. It should have been an industrial secret, and instead is shared open source. This is wonderfull world
Less - I will never work without it
Metadata - The only jQuery plugin I include in any project even if I don't need to use it
Google Code Prettify - Best and simpliest way to style your code examples, even Bootstrap people didn't feel the need to enhance it
jQuery UI - Used for the overview of HiddenPosition, but most of all the main inspiration behind this work