jquery position with collision. add class when collision detected

Question

I am using jquery-ui's autocomplete box with collision to display the autocomplete either above or below the input. What I would like is to add a class to the autocomplete element if a collision is detected so i can customize the css a bit if it is above vs below. This seems like it should be simple enough to do, but I can't seem to figure out any way to make it happen.

Answer 1

A better solution is to make use of second argument in callback. From jQueryUi documentation:

The second provides feedback about the position and dimensions of both elements, as well as calculations to their relative position. Both target and element have these properties: element, left, top, width, height. In addition, there's horizontal, vertical and important, giving you twelve potential directions like { horizontal: "center", vertical: "left", important: "horizontal" }.

As it says, there is a horizontal and a vertical attribute inside second argument, which you can use to find out whether the element is flipped or not. So you may write something like this:

$("#someId").dialog({
      position: {
      my: 'left top',
      at: 'right top',
      collision: 'flip flip',
      of: $('#' + someElementID),
      using: function (obj,info) {
          if (info.vertical != "top") {
              $(this).addClass("flipped");
          } else {
              $(this).removeClass("flipped");
          }
          if (info.horizontal != "left") {
              $(this).addClass("flipped");
          } else {
              $(this).removeClass("flipped");
          }
          $(this).css({
            left: obj.left + 'px',
            top: obj.top + 'px'
          });
      }
},