How to detect JQuery UI collision position

JQuery UI Logo

Some may not know, but you can use the JQuery method position to pass an object with a lot of functionality. This properties of the position object can control where the item sits in the HTML, plus also the collision. This is where it collides with another DOM or the window of the page and then reacts to it. The question is how do you know what it hits and how it reacts.

First lets talk about the default functionality you can use. There are 6 properties that come with this object and they can all help control what happens with the element you are controlling.

 


my: (TypeOf String , Default ‘center’)

Defines which position on the element being positioned to align with the target element: “horizontal vertical” alignment. You can use any of these values ‘right’, ‘left’, ‘top’, ‘bottom’ or the default ‘center’. These act use like the position attribute in CSS. You can also use two the same time to affect the vertical and horizontal elements of the DOM item. Additionally you can add pixels to this as well to add padding, for example ‘right+20 top+10’. This is handy if you are doing a tool tip that has a speech arrow on the side. You don’t want the item to be flush, so this can give it padding on the side.


at: (TypeOf String , Default ‘center’)

Defines which position on the target element to align the positioned element against: “horizontal vertical” alignment. The values for this properties is the same as above,  ‘right’, ‘left’, ‘top’, ‘bottom’ or the default ‘center’. Which you can also use in tandem together with pixels added on.


of: (TypeOf Selector, Element, jQuery or Event , Default null)

You can pass into this an element to position next to. This can work well for the tool tip example as you can the position it right next to the element you wish the tool tip to be on. If you provide an elements ID or Class that there is multiple of, it will choose the first it comes across to affect.


collision: (TypeOf String, Default ‘flip’)

When the element hits the boundaries of the window, or the element given in the below, it will then react according to the value put in. These are the accepted values “flip”, “fit”, “fit flip”, “fit none”.


within: (TypeOf String, Default window)

Pass into this the ID or Class of the containing boundaries. If you want the selected element to collide with the boundaries of it containing element instead of the window.


using: (TypeOf function(), Default null)

When specified, the actual property setting is delegated to this callback. You will get given two parameters, the first is a hash of top and left values for the position. The second is the information about the position and dimension of the elements, plus their relative positions.

For more information about these parameters, you can read more on the JQuery UI.


But How…

Now for how you detect the position of the element on it collision. I have create the example below to add a class to tell which side it is on.

The second parameter ‘info’ gives you the information on which side the element is, you need just query the parameters properties ‘vertical’ and ‘horizontal’ to find out. However I also found that they were opposite for my tool tip. I think because the element hung down it was detecting the top was in the top and when it switched the top was in the bottom. Therefore it seemed on the opposite sides. You will have to play about to see which yours is.
$( "#tooltip" ).position({

my: "left top",

at: "right top",

of: context,

collision: "flip",

within: 'int-container',

using: function(obj, info){

 

//if top side add class item_top and remove class item_bottom, then visa versa

var item_top = (info.vertical!= "top"? "top" : "bottom");

$(this).addClass("item_" +  item_top);

$(this).removeClass("item_" + (item_top == "top"? "bottom" : "top"));

 

//if left side add class item_left and remove class item_right, then visa versa

var item_side = (info.horizontal != "left"? "left" : "right");

$(this).addClass("tooltip_" + tooltip_side);

$(this).removeClass("tooltip_" + (tooltip_side == "left"? "right" : "left"));

 

}

});

Advertisements

Leave a message please

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s