2010-09-29 12 views
9

में jScrollPane 2.0 ऊंचाई समस्या मैं एक पूर्ण स्थान div में कक्षा स्क्रॉल-फलक (ऊंचाई 100%) के साथ एक div का उपयोग कर रहा हूं। स्क्रॉल-फलक div में पहले कुछ टेक्स्ट होता है, उसके बाद एक छवि होती है और उसके बाद कुछ पाठ फिर से होता है। छवि ऊंचाई 200px पर सेट है। समस्या है! यदि मैं क्रोम में स्क्रॉलपैन (नवीनतम संस्करण) देखता हूं तो कभी-कभी ब्राउज़र में साइट को रीफ्रेश करने के बाद, कभी-कभी पूर्ण सामग्री को स्क्रॉल कर सकता हूं और नहीं। इसका मतलब यह नहीं है कि मैं केवल दूसरे पाठ का हिस्सा देख सकता हूं और अधिक नहीं। तो वास्तविक स्क्रॉलिंग ऊंचाई कम हो जाती है। अगर मैं फिर से ताज़ा करता हूं तो मैं इसे फिर से पूरा करने में सक्षम हो सकता हूं। हर बार जब मैं ब्राउजर रीफ्रेश करता हूं तो यह बदल जाता है। यह केवल क्रोम में होता है।क्रोम

कोई विचार है कि मैं उस व्यवहार से बचने के लिए क्या कर सकता हूं? धन्यवाद .....

अद्यतन यह वास्तव में कुछ करने के लिए मिला है कि आयात (जेएस और सीएसएस) शीर्षलेख में कैसे रेखांकित होते हैं। आप सही हैं, सीएसएस को jscrollPane जेएस से पहले आयात किया जाना है, लेकिन इसका मतलब यह भी है कि छवि ऊंचाई को सीएसएस स्टाइलशीट में से एक से आने की आवश्यकता है। आप अपने मार्कअप में छवि टैग के भीतर ऊंचाई को सही ढंग से परिभाषित नहीं कर सकते हैं। मेरा समाधान एक वर्ग बनाने के लिए था, i.e. img200 (200px की ऊंचाई का प्रतिनिधित्व) मेरी स्टाइलशीट में और जिसने चाल बनाई। तो फिर इसे क्रोम या बेहतर वेबकिट में काम करने के लिए क्या करने की आवश्यकता है सामान्य रूप से ब्राउज़र: स्क्रॉलपैन के भीतर उपयोग की जाने वाली छवियों के लिए अपनी स्टाइलशीट में एक छवि ऊंचाई वर्ग सेट करें। इससे पहले अपनी स्टाइलशीट शामिल करें !!!!! jScrollPane के लिए जावास्क्रिप्ट। जेएसक्रॉलपेन में शामिल सभी चित्रों के लिए विशेष ऊंचाई वर्ग जोड़ें। आपके तेज़ उत्तर के लिए फिर से धन्यवाद। बहुत ही शांत।

अंतिम समाधान अद्यतन !!!!!!!!!
यदि आपके पास jScrollPane क्षेत्र के भीतर चित्र हैं तो आपको क्रोम या सफारी जैसे वेबकिट ब्राउज़र में सभी को अच्छी तरह से प्रदर्शित करने के लिए निम्नलिखित सुनिश्चित करना होगा। अन्यथा यह ऊंचाई की समस्याएं पैदा करेगा और आपकी सामग्री का केवल एक हिस्सा दिखाई देगा।
अपने सीएसएस स्टाइलशीट और jScrollPane जावास्क्रिप्ट फ़ाइल सही है की यकीन है कि लाइन बनाओ:
यह आपको क्या करना है है। JScrollPane जावास्क्रिप्ट फ़ाइल को आपके सीएसएस स्टाइलशीट का पालन करने की आवश्यकता है, न कि दूसरी तरफ! इसके अलावा आपको jScrollPane क्षेत्र में शामिल प्रत्येक छवि में ऊंचाई जोड़नी होगी। आप इसे एक सीएसएस वर्ग बनाकर कर सकते हैं या आप आयाम को सीधे अपने एचटीएमएल मार्कअप में आईएमजी में एक विशेषता के रूप में जोड़ सकते हैं।
यदि आप इसे ध्यान में रखते हैं तो यह चाल चल जाएगा।

+0

आपको बहुत बहुत धन्यवाद! यही वही है जो मैं खोज रहा था! बहुत बढ़िया जवाब! यह मुझे लंबे समय तक परेशान कर रहा था। बस समस्या को पकड़ने के लिए कभी नहीं। 'छवियां' शैलियों ...: | खैर मैं अब किसी भी छवि की सभी शैलियों को पकड़ने के लिए एक jQuery बनाने जा रहा हूं और उन्हें प्रत्येक आईएमजी 'शैली' संपत्ति में अलग से जोड़ता हूं। सीआईओओ –

उत्तर

5

क्या आपने सफारी में भी परीक्षण किया था? यह एक ऐसा मुद्दा है वेबकिट में तब होता है जब जावास्क्रिप्ट दस्तावेज़ के शीर्ष में सीएसएस पहले शामिल होना की तरह लगता है: http://jscrollpane.kelvinluck.com/faqs.html#webkit-broken

हैं कि कारण तथ्य यह है कि आप एक है कि करने के लिए संबंधित कुछ नहीं है तो यह हो सकता है आपके स्क्रोलपैन में छवि। आपको छवि की चौड़ाई और ऊंचाई को शामिल करने की आवश्यकता है (http://jscrollpane.kelvinluck.com/image2.html देखें) या स्वत: पुनर्नवीनीकरण करें (http://jscrollpane.kelvinluck.com/image.html देखें)।

आशा है कि यह मदद करता है :)

+0

हाय.मैं उस त्वरित सहायता से बहुत प्रभावित हूं क्योंकि यह मेरा पहला सवाल था। असल में आप सही हैं और मुझे पता चला कि मैंने अपना प्रश्न पोस्ट करने के बाद। – markimark

+0

मुझे autoReinitialize विकल्प पसंद है लेकिन मुझे इससे दूर रहना पड़ा क्योंकि यह मेरी पूरी स्क्रॉल कर रहा था ताकि संक्रमण बहुत कमजोर हो। मुझे इसे ठीक करने का कोई तरीका नहीं मिला। – markimark

+0

यह आईई में केवल shaky था (आईई 8 के साथ काम)। शायद किसी के लिए भी इसका समाधान मिला। – markimark

1

आप अपने jScrollPane div क्षेत्र के अंदर छवि है तो बस अपने चौड़ाई और ऊंचाई परिभाषित करते हैं।

<div class="scroll-pane"> 
<img src="image.jpg" alt="" width="300" height="50" /> 
</div> 

जो जेएसक्रॉलपेन की वेबकिट बग को ठीक करेगा।ओह और निश्चित रूप से जे एस

2

से पहले CSS लोड कॉल $(document).ready

2

मैं भी पता चला है कि एक सीएसएस नियम जोड़ने .scroll फलक line-height के लिए मेरी ऊंचाई मुद्दों को हल करती है के लिए के बजाय $(window).load में jScrollPane को दे।

उदाहरण के लिए:

.scroll-pane {line-height: 1;} 

या जो कुछ भी लाइन ऊंचाई अपनी सामग्री पड़ सकता है।

मैंने यह भी पाया कि यदि आप @ फ़ॉन्ट-चेहरे का उपयोग करते हैं, तो jscrollpane आपके फ़ॉन्ट को ठीक से लोड करने से पहले ऊंचाई गणना कर सकता है, और इसलिए गलत अनुमान लगाएं। मैंने सेटिंग जोड़कर इसे ठीक किया:

autoReinitialise: true 

यह टाइमर पर चलता है हालांकि विचारपूर्वक उपयोग करें।