पॉपअप

Question

के लिए जावास्क्रिप्ट/Jquery टकराव का पता लगाने मैं एक वेब ऐप लिख रहा हूं जो आईपैड और डेस्कटॉप ब्राउज़र दोनों पर चलाना चाहिए।

यह सब अच्छा और डेस्कटॉप पर dandy दिखता है, लेकिन एक पर:

मैं पॉपअप तरफ से आ रही (पॉपअप बिल्कुल फिल्टर <li> टैग करने के लिए किस स्थिति में है) के साथ एक फिल्टर अनुभाग है लैंडस्केप मोड में आईपैड, पॉपअप के नीचे कटौती की जाती है क्योंकि यह व्यूपोर्ट से बाहर जाती है।

मैं 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 मान को भी सेट करने की आवश्यकता नहीं है, क्योंकि .positionleft सेट करता है, और दोनों पॉपअप को निचोड़ते हैं।

तीर के लिए, आप उन्हें अलग से क्यों नहीं रखते हैं? यदि पॉपअप को थोड़ा सा स्थानांतरित करना है, तो यह तीर को ओवरलैप कर देगा, लेकिन यह तीर को छोटा दिखता है।