Wykrywanie kolizji JavaScript/Jquery dla wyskakujących okienek

Question

Piszę aplikację internetową, która ma działać zarówno na iPadzie, jak i na przeglądarce internetowej.

mam sekcję filtrów z popup pochodzących z boku (popup jest całkowicie umieszczona w stosunku do znacznika filtr <li>):

to wszystko wygląda ładnie i dandys na pulpicie, lecz na Ipad w trybie poziomym, dół popup jest wycięty, ponieważ wykracza poza obszar wyświetlania.

próbowałem go rozwiązać za pomocą 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 
}); 

ale to działa tylko wtedy, gdy okienko zderza się z lewej strony ekranu, a nie na dole.

Muszę również upewnić się, że trójkąt porusza się odpowiednio, ponieważ powinien zawsze wskazywać na właściwy filtr.

Czy używam niewłaściwej pozycji JqueryUI? czy istnieje lepsze rozwiązanie?

Here is a very simplified fiddle

Answer 1

Dobra, wygląda na to, największym problemem jest to, że "flip fit" rzeczywistości nie jest prawidłową wartością dla collision. (Myślę, że jest traktowany jako "flip".) Prawdopodobnie szukasz "flipfit" (bez spacji), a może po prostu "fit". Powinieneś również upewnić się, że wyrównałeś stronę po lewej stronie li - wyrównanie lewej strony do lewej powoduje ich nakładanie się, a następnie odwrócenie, ponieważ nie było wystarczająco dużo miejsca. Poprawiłem twój kod i sprawiłem, że działał on lepiej (ale nadal nie jest idealnie, musisz go poprawić).

$('.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) nie wydają się działać w of argumentu, więc zastąpił go.

Nie trzeba również ustawiać wartości wyskakującego okienka, ponieważ .position ustawia wartość left, a ustawienie obydwu rozszerzeń wyskakuje.

Co do strzałki, dlaczego nie umieścisz ich oddzielnie? Jeśli wyskakujące okienko musi się trochę poruszyć, spowoduje to nałożenie kilku strzałek, ale spowoduje to, że strzałka będzie wyglądać na mniejszą.