JQuery UI स्वत: पूर्ण फ़ायरफ़ॉक्स

Question

में तीर कुंजियों के साथ स्क्रॉल नहीं कर रहा है मैं JQuery 1.6.1 के साथ JQuery UI स्वत: पूर्ण 1.8 के साथ काम कर रहा हूं। (सॉफ्टवेयर के नए संस्करणों हो रही है मेरी कंपनी में बेहद मुश्किल तो मैं इन के साथ फंस कर रहा हूँ।)

मैं स्वत: पूर्ण फलक में रखा तार की एक लंबी सूची है, इसलिए मैं इस

तरह .ui-स्वत: पूर्ण वर्ग स्टाइल

.ui-autocomplete {height:200px; overflow-y:scroll; overflow-x: hidden;} 

अब जब स्वत: पूर्ण ड्रॉपडाउन इसे पॉप अप करता है, तो इसमें वांछित स्क्रॉल बार होता है। हालांकि, जब मैं ड्रॉपडाउन नेविगेट करने के लिए तीर कुंजियों का उपयोग करता हूं, तो पैनल चयन के साथ स्क्रॉल नहीं करता है। चयन अभी भी होता है। आखिर में मैं सूची के नीचे भाग गया और कर्सर शीर्ष पर वापस आ गया है। सबकुछ अपेक्षित व्यवहार करता है सिवाय इसके कि स्क्रॉल फलक स्क्रॉल नहीं करता है।

काम के बाहर परीक्षणों में जहां मेरे पास अन्य ब्राउज़रों तक पहुंच है, मुझे लगता है कि क्रोम स्क्रॉल ठीक से और IE 8 ठीक से स्क्रॉल करता है। क्या यह फ़ायरफ़ॉक्स 3.6 लिनक्स ब्राउज़र के साथ एक बग है या क्या मुझे कुछ याद आ रहा है?

मैं Firefox 3.6 ua को हथकड़ी कर रहा हूँ: (Mozilla/5.0 (X11, यू, लिनक्स i686 (x86_64); en-US; rv1.9.2.12) छिपकली/20,101,026 फ़ायरफ़ॉक्स/3.6.1.2)

क्या यह ब्राउज़र के इस संस्करण के साथ एक बग है या क्या मुझे कुछ याद आ रहा है?

संपादित करें: मैं आई 6 के साथ एक मशीन और फ़ायरफ़ॉक्स 3.5.3 के साथ एक मशीन खोजने में सक्षम था। यानी 6 स्क्रॉल और फ़ायरफ़ॉक्स 3.5.3 नहीं था। ऐसा लगता है कि यह फ़ायरफ़ॉक्स के साथ एक मुद्दा हो सकता है।

Answer 1

मुझे किसी भी ब्राउज़र पर jQuery v1.7.2 और jQuery UI v1.8.11 पर चल रहे हमारे ऐप के साथ समान समस्या थी। हालांकि मुझे पता चला है कि यह jQuery UI v1.8.13 changelog पर तय किया गया था।

तो परिवर्तन में सुधार के अनुसार, मैंने जो कुछ किया है, वह नीचे दिए गए दो कार्यों को ओवरराइड कर रहा था और यह समस्या को हल करता है।

$.widget("ui.menu", $.extend({ }, $.ui.menu.prototype, { 
activate: function (event, item) { 
    this.deactivate(); 
    if (this.hasScroll()) { 
     var offset = item.offset().top - this.element.offset().top, 
      scroll = this.element.scrollTop(), 
      elementHeight = this.element.height(); 
     if (offset < 0) { 
      this.element.scrollTop(scroll + offset); 
     } else if (offset >= elementHeight) { 
      this.element.scrollTop(scroll + offset - elementHeight + item.height()); 
     } 
    } 
    this.active = item.eq(0) 
         .children("a") 
         .addClass("ui-state-hover") 
         .attr("id", "ui-active-menuitem") 
         .end(); 
    this._trigger("focus", event, { item: item }); 
}, 

hasScroll: function() { 
    return this.element.height() < this.element[$.fn.prop ? "prop" : "attr"]("scrollHeight"); 
}})); 

Answer 2

समाधान: jQuery UI 1.8.18 में अपग्रेड करने के लिए यह समस्या मेरे लिए तय की गई।

यह कोई उत्तर नहीं है लेकिन यह इस मुद्दे पर अधिक जानकारी प्रदान कर सकता है। यदि आप मेनू खोलते समय ऊपर या नीचे कुंजी दबाते समय कॉल का पालन करते हैं, तो आप मेनू विजेट की सक्रिय विधि प्राप्त करते हैं जो हैस्क्रोल विधि (v1.8.11 का उपयोग कर लाइन 5487) को कॉल करता है;

hasScroll: function() { 
    return this.element.height() < this.element.attr("scrollHeight"); 
}, 

ऐसा लगता है कि समस्या यह है कि scrollHeight विशेषता मेनू उल तत्व के लिए परिभाषित नहीं है और इस प्रकार यह विधि हमेशा झूठी होती है।

activate: function(event, item) { 
     this.deactivate(); 
     if (this.hasScroll()) { 
      var offset = item.offset().top - this.element.offset().top, 
       scroll = this.element.attr("scrollTop"), 
       elementHeight = this.element.height(); 
      if (offset < 0) { 
       this.element.attr("scrollTop", scroll + offset); 
      } else if (offset >= elementHeight) { 
       this.element.attr("scrollTop", scroll + offset - elementHeight + item.height()); 
      } 
     } 
     this.active = item.eq(0) 
      .children("a") 
       .addClass("ui-state-hover") 
       .attr("id", "ui-active-menuitem") 
      .end(); 
     this._trigger("focus", event, { item: item }); 
    } 

यहां तक ​​कि अगर आप सच लौटने के लिए hasScroll विधि के लिए मजबूर है, तो आप एक और समस्या में के रूप में scrollTop विशेषता या तो निर्धारित नहीं है चलाएँ:

यहाँ सक्रिय तरीका है।

अगर मैं इसका समाधान समझता हूं तो मैं आपको बता दूंगा क्योंकि यह मेरे आवेदन को भी परेशान कर रहा है।

Answer 3

मुझे लगता है कि this.element.attr("scrollHeight")

में

hasScroll: function() { 
     return this.element.height() < this.element.attr("scrollHeight"); 
    }, 

रिटर्न अपरिभाषित देखा। यदि आप this.element.attr("scrollHeight") से this.element.prop("scrollHeight") बदलते हैं, तो आपको स्क्रॉल हाइट मिलेगा।

लेकिन फिर एक ही समस्या activate: function (event, item) { में प्रकट होता है, तो आप भी यह काम करने के लिए और साथ ही है कि समारोह में this.element.prop("scrollTop")

को

this.element.attr("scrollTop") की सभी घटनाओं को बदलने के लिए की आवश्यकता होगी।

आप पढ़ सकते हैं के बारे में .prop() in the jQuery API लेकिन मूल रूप से इस का कारण यह

jQuery 1.6 से पहले

है, .attr() विधि कभी कभी संपत्ति मूल्यों को ध्यान में जब कुछ विशेषताओं, जो असंगत व्यवहार का कारण बन सकता पुन: प्राप्त करने में ले लिया। JQuery 1.6 के रूप में, .prop() विधि संपत्ति मानों को स्पष्ट रूप से पुनर्प्राप्त करने का एक तरीका प्रदान करती है, जबकि .attr() गुण पुनर्प्राप्त करता है।