jQuery UI positioning

Posted on Posted in jQuery

Ok, so I played around a little bit with positioning elements on a screen tonight and I thought I would pass along my thoughts. The official documentation lists the my: at: and of: properties.

It’s actually a pretty powerful tool and the first time you look at it you might go “huh”.

I think it’s because the names are so short for the properties. But basically think of my: more as “My Object” or the element you want to position. The at: is more like the “Where” do you want to position the item on the of: element. The of: is more like the place to position it at.

So the cleanest example I can think of is what if you want to position the top left corner of one block with the top left corner of it’s containing block.

Well, that would look something like:

position: {
    my: 'top left',
    at: 'top left',
    of: '#containing-block'
}

What does that look like?

topLeft

What if for some reason I want the top left of my box to align with the top right of container.

position: {
    my: 'top left',
    at: 'top right',
    my: '#containing-block'
}

topRight

Now the only things I will say is that be careful what you wish for when doing this stuff. Position in jquery UI also takes into account automatic collision detection (for example, when positioning within the window element). There is a lot more to learn with positioning but I thought I would give a quick beginner example.