팝업을위한 JavaScript/Jquery 충돌 감지

Question

iPad와 데스크톱 브라우저에서 모두 실행해야하는 웹 앱을 작성하고 있습니다.

그것은 모두가 좋은 바탕 화면에 멋쟁이 보이지만, 온 :

나는 팝업 (팝업이 절대적으로 필터 <li> 태그에 상대적 위치) 측면에서 오는와 필터 섹션이 가로 모드의 Ipad는 뷰포트를 벗어나기 때문에 팝업의 맨 아래가 잘립니다.

$('.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 
}); 

을하지만, 팝업 왼쪽 화면의 측면이 아니라 바닥과 충돌하면 것을에만 작동 :

나는 queryUI position 사용하여 해결했습니다.

또한 삼각형이 항상 올바른 필터를 가리켜 야하므로 그에 따라 삼각형이 움직이는 지 확인해야합니다.

JqueryUI 위치를 잘못 사용하고 있습니까? 더 나은 해결책이 있습니까? 가장 큰 문제는 "flip fit" 실제로 collision에 대한 올바른 값이되지 않는 것입니다처럼 좋아

Here is a very simplified fiddle

Answer 1

, 그것은 보인다. (나는 그것이 "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 인수에 작동하는 것 같지 않았다, 그래서 그것을 대체했다.

.position이 left으로 설정되고 두 개의 팝업이 모두 팝업으로 설정되므로 팝업의 값을 right으로 설정하지 않아야합니다.

화살표는 별도로 배치해야합니다. 팝업이 조금 움직여야한다면 화살표가 일부 겹칠 것입니다.하지만 화살표가 더 작아 보이게 만듭니다.