Know when position collision has fired in jQuery UI

Question

I am trying to extend the jQuery UI dialog() to use arrow pointers to point to what was clicked. The issue I've run into is knowing when the collision method runs so I can change to pointers from the left side to the right side.

Is it possible to know when the position.collision method is triggered?

$('#myElem').dialog({
    position:{
        collision:'flip'
    }
});

Solution:

As it turns out you can pass more than they say in the documentation. Here is what I ended up using that solved my problem:

position:
{
    my: 'left top',
    at: 'right center',
    of: $trigger,
    offset: '20 -55',
    collision: 'flip',
    using: function(obj) {

        var $modal = $(this),
            trigger_l = $trigger.position().left,
            modal_l = obj.left,
            top;

        // Check IE's top position
        top = ( isIE ) ? obj.top - 48 : top = obj.top;

        $(this).css({
            left: obj.left + 'px',
            top: top + 'px'
        });

    }
}

I used the using method inside the position object to do the majority of the work. I then did a quick check to see if it's IE, done earlier in the document, and set my CSS accordingly.

I did this a while ago so let me know if you run into problems. :)

Hutson

Sounds like you need a tooltip plugin instead of a dialog plugin. A lot of these will have the arrow pointers that you are talking about built in. Then you can just sprinkle a little more css on it and have it appear that there is a dialog inside the tooltip. – Gopher

Where did you get the idea that you can pass collision information to dialog? According to dialog documentation position can be either string ( 'center', 'left', 'right', 'top', 'bottom') or an array. jqueryui.com/demos/dialog/#option-position – Canossa

So I actually tried it and you can also pass an object to the position which overrides the existing preset position object. I was able to use that and pass a function to on of the parameters to accomplish my goal. – Hutson

You're right - it seems that it's undocumented feature of jQuery UI. I'm halfway there with creating plugin that would emit proper events when collision is triggered. – Canossa

Seth: can you elaborate how you solved this problem. i have the same issue as you had. – Frank

I've updated my question with the solution. – Hutson

Answer 1

Don`t know how your solution could help, but this is actually close to the real solution. We need use the same "using" function, which recieves two arguments. The first one is actual coords of the positioned object, and we will need to manually set this coords to the positioned object, like you did in your solution. But to determine the direction of the flip-collision we need to use second argument. This argument provides feedback about the position and dimensions of both elements, as well as calculations to their relative position. You can read about this here.

If you have horizontal pointing arrow and you need to switch it direction from left to right and vice versa according to the current collision, you can get the value of "horizontal" property from the second argument to the "using" function. The "left" value of this property means that positioned object positioned to the right of the target, and vice versa. So you can change classes on the positioned element accordingly to current collision. Here is example:

position: 
{
    my: 'left top',
    at: 'right center',
    of: $trigger,
    offset: '20 -55',
    collision: 'flip',
    using: function(coords, feedback) {
            var $modal = $(this),
                top = ( isIE ) ? coords.top - 48 : coords.top,
                className = 'switch-' + feedback.horizontal;

            $modal.css({
                left: coords.left + 'px',
                top: top + 'px'
            }).removeClass(function (index, css) {
                   return (css.match (/\bswitch-\w+/g) || []).join(' ');
               }).addClass(className);

        }
    }

Note that in example above we removed from the $modal any 'switch-' classes added earlied. And then added current 'switch-' class. So any time you will be position your modal, it will have 'switch-left' or 'switch-right' class depending on current collision.

Baskin

The using function does not support the feedback parameter in jQuery UI 1.8.7. – Fatness

Answer 2

Use qTip instead.

Rhodolite