Tuesday 15 June 2010

javascript - Check if element is visible in div -


मेरे पास कई ली के अंदर एक div है।

  & lt; div & gt; & Lt; li & gt; & lt; / li & gt; & Lt; li & gt; & lt; / li & gt; & Lt; li & gt; & lt; / li & gt; & Lt; li & gt; & lt; / li & gt; & Lt; li & gt; & lt; / li & gt; ... & lt; / div & gt;   

आमतौर पर जब उपयोगकर्ता खिड़की के अंदर स्क्रॉल कर रहा है, तो कुछ & lt; li & gt; अतिप्रवाह में आ जाता है और छिपा होगा मुझे पता है मैं देख सकता हूँ कि एक तत्व इस jQuery प्लगइन के साथ स्क्रीन के व्यूपोर्ट में है या नहीं: मुझे केवल इस कार्यक्षमता की आवश्यकता होती है, लेकिन पूरी स्क्रीन के लिए नहीं, बल्कि केवल एक ही डिवा पर।

कुछ मदद की ज़रूरत है, धन्यवाद अग्रिम!

एक बहुत अच्छा जवाब है, लेकिन यहां आपके द्वारा उल्लिखित व्यूपोर्ट प्लग इन का एक संशोधित संस्करण है।

  (function ($) {$ .belowfold = function (lookIn, elements , सेटिंग) {var fold = $ (lookIn)। हल्का () + $ (lookIn) .scrollTop (); वापसी $ (तत्व) .filter (function () {return fold & lt; = $ (this) .offset () .top - settings.threshold;});}; $ .abovethetop = फ़ंक्शन (लुक इन, एलीमेंट्स, सेटिंग्स) {var टॉप = $ (लुक इन) .scrollTop (); वापसी $ (तत्व) .फ़िल्टर (फ़ंक्शन () {वापसी शीर्ष & gt; = $ (यह) .ऑफ़सेट ()। शीर्ष + $ (यह) .इट () - सेटिंग्स। थ्रेडहोल्ड;});}; $। राइटस्क्रीन = फ़ंक्शन (देखिए, तत्व, सेटिंग्स) {var गुना = $ (देखें इन)। विथथ () + $ (देखें इन) .scrollLeft (); वापसी $ (तत्व) .फ़िल्टर (फ़ंक्शन () {वापसी गुना & lt; = $ (this) .offset ()। Left-settings.threshold;} );}; $। Leftofscreen = फ़ंक्शन (देखिए, तत्व, सेटिंग्स) {var left = $ (lo Okin) .scrollLeft (); वापसी $ (तत्व)। फ़िलटर (फ़ंक्शन () {वापसी बायीं & gt; = $ (this) .ऑफ़सेट ()। बाएं + $ (यह) .विड्थ () - सेटिंग्स। थ्रेसहोल्ड;}); }; }) (JQuery);   

इस तरह HTML के साथ:

  & lt; div id = "lookInMe" & gt; & Lt; div वर्ग = "झांकना" & gt; & lt; / div & gt; & Lt; div वर्ग = "झांकना" & gt; & lt; / div & gt; [...] & lt; / div & gt;   

इसे इस तरह कॉल करें:

  $। नीचे दिए गए ("# दिखने में", ".peek", {threshold: 0})। पाठ (" नीचे"); $ .बावेटेटॉप ("# लुक इएम", ".पीक", {थ्रेसहोल्ड: 0})। पाठ ("ऊपर"); $। Leftofscreen ("# दिखने में एमई", ".peek", {threshold: 0})। पाठ ("वाम"); $। राइटस्क्रीन ("# लुक इएम", ".पीक", {थ्रेसहोल्ड: 0})। पाठ ("अधिकार");   



No comments:

Post a Comment