JavaScript/JQuery обнаружение столкновений для всплывающих окон

Question

Я пишу веб-приложение, которое должно работать как на iPad, так и на рабочем столе.

У меня есть раздел фильтры с Всплывающее идет сбоку (всплывающий абсолютно позиционирован относительно фильтра <li> тега):

Все выглядит красиво и денди на рабочем столе, а на Ipad в ландшафтном режиме, снизу всплывающего окна вырезано, так как оно выходит за пределы области просмотра.

Я попытался решить ее с помощью queryUI position:

$('.capbIpadPopupAutoComplete').position({ 
    "my": "left center" ,  // Horizontal then vertical, missing values default to center 
    "at": "left top",  // Horizontal then vertical, missing values default to center 
    "of": $(this).closest('li'),  // Element to position against 
    // "offset": "20 30" ,  // Pixel values for offset, Horizontal then vertical, negative values OK 
    "collision": "fit flip" // What to do in case of 
}); 

но это работает только тогда, когда всплывающее окно сталкивается с левой стороны экрана, а не внизу.

Мне также необходимо убедиться, что треугольник движется соответственно, так как он всегда должен указывать на правильный фильтр.

Я использую JqueryUI положение неправильно? Есть ли лучшее решение?

Here is a very simplified fiddle

Answer 1

Хорошо, это выглядит как самая большая проблема в том, что "flip fit" в действительности не является допустимым значением для collision. (Я думаю, что это рассматривается как "flip".) Вероятно, вы ищете "flipfit" (без пробела) или, может быть, только "fit". Вы также должны убедиться, что выровняете справа сторону всплывающего окна с левой стороной li - выравнивание слева с левой стороны перекрывает их, а затем перевернуло, потому что не хватало места. Я изменил ваш код и улучшил его работу (но все же не совсем, вам придется его настроить).

$('.capbIpadPopupAutoComplete').position({ 
    "my": "right top" ,  // Horizontal then vertical, missing values default to center 
    "at": "left top",  // Horizontal then vertical, missing values default to center 
    "of": $('.capbStrategicPlan'),  // Element to position against 
    // "offset": "20 30" ,  // Pixel values for offset, Horizontal then vertical, negative values OK 
    "collision": "fit" // What to do in case of 
}); 

кажутся

$(this) не будет работать в of аргумента, поэтому я заменил его.

Вам также не нужно указывать значение всплывающего окна right, так как .position устанавливает left, и установка обоих сжимает всплывающее окно.

Что касается стрелки, почему бы вам просто не разместить их отдельно? Если всплывающее окно должно немного перемещаться, оно будет перекрывать стрелку, но это просто уменьшит стрелку.