2013-12-17 10 views
5

का उपयोग कर व्यूपोर्ट में कोई div दिखाई दे रहा है, तो मैं यह देखने के लिए jquery का उपयोग करने की कोशिश कर रहा हूं कि क्या Div RED व्यूपोर्ट के भीतर है, और यदि नहीं, तो जांच करें कि क्या Div ORANGE व्यूपोर्ट में है या नहीं। यदि मैं केवल एक IF कथन है तो मैं जिस फ़ंक्शन का उपयोग कर रहा हूं, वह बहुत अच्छा काम करता है, लेकिन जब मैं एक और IF ELSE कथन जोड़ता हूं, तो यह काम नहीं करेगा।जांच कर रहा है कि jquery

यहाँ समारोह है:

$.fn.isOnScreen = function(){ 

    var win = $(window); 

    var viewport = { 
     top : win.scrollTop(), 
     left : win.scrollLeft() 
    }; 
    viewport.right = viewport.left + win.width(); 
    viewport.bottom = viewport.top + win.height(); 

    var bounds = this.offset(); 
    bounds.right = bounds.left + this.outerWidth(); 
    bounds.bottom = bounds.top + this.outerHeight(); 

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); 

}; 

यहाँ कोड मैं जाँच करें और देखें कि div लाल या div नारंगी व्यूपोर्ट

$(window).scroll(function() { 
    if ($('.red').isOnScreen() === true) { 
     $('.red').remove(); 
    } else if ($('.orange').isOnScreen() === true) { 
     $('.orange').remove(); 

    } 
}); 
यहाँ

के भीतर है करने के लिए जोड़ा है एक jfiddle http://jsfiddle.net/wN7ah/453/

है
+0

क्यों आप एक अपनी साइट पर दिए गए का उपयोग नहीं करते: http://jsfiddle.net/moagrius/wN7ah/ – Ani

+0

मैं अच्छी तरह से यह जांचना चाहते हैं कि जब उपयोगकर्ता स्क्रॉल करता है और उपयोगकर्ता क्लिक करता है तो स्क्रीन पर कौन सा div स्क्रीन पर होता है। –

+0

आपने क्लिक फ़ंक्शन के बारे में कहां से उल्लेख किया? आप इसे विंडो स्क्रॉल पर कर रहे हैं ... क्या आप इसे क्लिक करना चाहते हैं? – Ani

उत्तर

11

यहां काम कर रहे संस्करण हैं: http://jsfiddle.net/wN7ah/455/

समारोह कि जादू करता है:

$.fn.isOnScreen = function(){ 

    var win = $(window); 

    var viewport = { 
     top : win.scrollTop(), 
     left : win.scrollLeft() 
    }; 
    viewport.right = viewport.left + win.width(); 
    viewport.bottom = viewport.top + win.height(); 

    var bounds = this.offset(); 
    bounds.right = bounds.left + this.outerWidth(); 
    bounds.bottom = bounds.top + this.outerHeight(); 

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); 

}; 

उपयोग:

$(window).scroll(function() { 
    if ($('.orange').isOnScreen() == true) { 
    //alert("removing orange"); 
    $('.orange').remove(); 
    } 
    if ($('.red').isOnScreen() == true) { 
    //alert("removing red"); 
    $('.red').remove(); 
    } 

}); 

किसी भी नारंगी या लाल परदे पर में मौजूद न हो तो उन्हें निकाल देंगे।

आप जब इसे हटा दिया है की जांच करने के हटाने से पहले सूचना जोड़ने चाहते हैं: http://jsfiddle.net/wN7ah/457/

+4

कृपया jsfiddle के बजाय उत्तर में "isOnScreen" एक्सटेंशन जोड़ने पर विचार करें। धन्यवाद। –

संबंधित मुद्दे