अजाक्स लोड सामग्री के साथ अनंत स्क्रॉल करने योग्य Div?

मैं GWT में स्क्रॉल करने योग्य div नामक एक तकनीक को कार्यान्वित करना चाहता हूं। मैं जो करने की कोशिश कर रहा हूं वह निम्नलिखित है। यदि कोई उपयोगकर्ता मेरे पृष्ठ पर है तो वह केवल व्यूपोर्ट (छवि में हरे रंग का बॉक्स) देख सकता है। इस व्यूपोर्ट में मौजूद सभी DOM तत्व उपयोगकर्ता लोड पेज पर दिखाई दे रहे हैं। व्यूपोर्ट पर नहीं होने वाले एले डॉम तत्वों को पृष्ठ लोड (छवि में नीले रंग के बक्से) पर लोड होने के बाद लोड नहीं किया गया है।अजाक्स लोड सामग्री के साथ अनंत स्क्रॉल करने योग्य Div?

यदि उपयोगकर्ता व्यूपोर्ट को खींच और स्थानांतरित करता है, तो सभी डोम तत्व दृश्यमान होते हैं जो व्यूपोर्ट पर आते हैं। अगर वे व्यूपोर्ट पर हैं तो वे AJAX के माध्यम से लोड हो जाएंगे।

उपयोगकर्ता इसे बड़ा और छोटा बनाने के लिए व्यूपोर्ट ज़ूम इन और आउट कर सकता है। साथ ही, यदि तत्व जो उपयोगकर्ता के लिए अदृश्य हैं और इस प्रकार लोड नहीं किए गए हैं, वे अभी भी दिखाई दे रहे हैं, उन्हें AJAX के माध्यम से लोड किया जाना चाहिए और व्यूपोर्ट पर प्रदर्शित होना चाहिए।

मुझे इसे जीडब्ल्यूटी के साथ कैसे कार्यान्वित करना है?

उपयोगकर्ता पेज यह निम्न छवि की तरह लग रहा लोड करता है, तो:

enter image description here

उपयोगकर्ता खींचें और 8 निर्देशों के व्यूपोर्ट स्थानांतरित कर सकते हैं। ये शीर्ष, ऊपरी दाएं, दाएं, दाएं नीचे, नीचे, नीचे बाएं, बाएं और ऊपर बाईं ओर हैं। निम्नलिखित छवि बाईं ओर एक आंदोलन दिखाती है। जब व्यूपोर्ट नई सामग्री को ले जाता है तो उसे AJAX से लोड किया जाना चाहिए।

enter image description here

व्यूपोर्ट भी में ज़ूम इन किया जा सकता है। इस मामले में भी नई सामग्री लोड किया जाना चाहिए।

enter image description here

व्यूपोर्ट भी ज़ूम आउट किया गया जा सकता है। ध्यान दें कि व्यूपोर्ट निश्चित आयामों का होना चाहिए। केवल सामग्री ज़ूम करने योग्य होना चाहिए।

enter image description here

स्रोत

2013-10-14 Anonymous

क्या मेरा उत्तर आपके लिए काम करता है? –

@ dr.dimitru नहीं यह बहुत याद करता है। –

वैसे भी करने के बाद - कृपया, यहां एक लिंक छोड़ दिया है, हम परिणाम –

युपीडी: jsfiddle उदाहरण: http://jsfiddle.net/hv57s/9/

युपीडी: http://jsfiddle.net/hv57s/11/

उत्तर इस उदाहरण के आधार पर: Indira.js Inifinite Scroll

/बाहर बटन एक कार्यक्षमता में ज़ूम के साथ jsfiddle

<div id="scrollableDiv" data-scroll-callback="$('#load_button').trigger('click')"> 
<table> 
    ... 
    <tbody id="scrollable_tbody"> 
    <tr> 
    ... 
    </tr> 
    </tbody> 
    <button id="load_button" onclick="load_more(page_number)">Show more</button> 
</div> 
<script> 
var scroll_el_id = 'scrollableDiv'; 
var element = $('#scrollableDiv'); 

$(window).unbind('scroll.' + scroll_el_id).bind('scroll.' + scroll_el_id, function(event){ 

    var scrollBottom = $(window).scrollTop() + $(window).height(); 
    var elementBottom = element[0].scrollHeight + element.offset().top; 

    if(scrollBottom >= elementBottom){ 
    eval($(element).attr('data-scroll-callback')); 
    $(window).unbind('scroll.' + scroll_el_id); 
    } 
}); 
</script>

इसके बाद आप सिर्फ #scrollable_tbody AJAX-प्रतिक्रिया को संलग्न, जैसे:

function load_more(page){ 

    $.ajax({type: "GET", url: 'some/url/load_more.php?page='+page,}) 
     .done(function(html) { 

      $('#scrollable_tbody').append(html); 
     }); 
}

युपीडी: मुझे लगता है कि आप html,body तरह के लिए बड़ा आकार निर्धारित करना चाहिए:

html, body{ 
    min-width: 8192px; 
    width: 8192px; 
    min-height: 8192px; 
    height: 8192px; 
}

और इच्छित आकार में व्यूपोर्ट सेट करें।

लेकिन शायद यह अधिक होगा आसान आप सही

div.wrap{ 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
/*Do not forget to change your_viewport_* to actual size, also you can do this via jQuery on the fly*/ 
    max-height: your_viewport_height; 
    min-height:your_viewport_height; 
    height:your_viewport_height; 
    max-width: your_viewport_width; 
    min-height:your_viewport_width; 
    height:your_viewport_width; 
}

साथ body टैग के बाद और इस तत्व बड़ा div जो स्क्रॉल हो जाएगा के अंदर कुछ रैप div सेट होगा।

div.huge{ 
    min-width: 8192px; 
    width: 8192px; 
    min-height: 8192px; 
    height: 8192px; 
}

HTML:

<html> 
<head> 
... 
</head> 
<body> 
    <div class="wrap"> 
    <div class="huge"> 
     ... 
    </div> 
    </div> 
</body> 
</html>

इसके अलावा स्क्रॉल तत्वों के सभी पक्षों के लिए नियंत्रण स्थापित करने के लिए मत भूलना, उदाहरण में मैं केवल नीचे लाइन नियंत्रण, की तरह कुछ है:

var scrollBottom = $(window).scrollTop() + $(window).height(); 
    var elementBottom = element[0].scrollHeight + element.offset().top; 

    var scrollTop = $(window).scrollTop(); 
    var elementTop = element.offset().top; 

    var scrollRight = $(window).scrollLeft() + $(window).width(); 
    var elementRight = element[0].scrollWidth - element.offset().left; 

    var scrollLeft = $(window).scrollLeft(); 
    var elementLeft = element.offset().left; 

    if(scrollBottom >= elementBottom && scrollTop <= elementTop && scrollRight >= elementRight && scrollLeft <= elementLeft){ 
    eval($(element).attr('data-scroll-callback')); 
    $(window).unbind('scroll.' + scroll_el_id); 
    }

मैंने इसका परीक्षण नहीं किया, और वैसे भी आपको इसके साथ खेलना होगा। उम्मीद है कि मैं आपको सही दिशा में इंगित कर रहा हूं।

स्रोत

2013-10-15 01:08:02

सभी दिशाओं में अपना आकार अनंत बनाने के लिए मुझे पृष्ठभूमि div आयामों को कैसे सेट करना है? –

मुझे लगता है कि आपको एचटीएमएल के लिए बड़ा आकार निर्धारित करना चाहिए, शरीर: –

@ stephan1001 कृपया मेरा उत्तर अपडेट देखें –

अजाक्स लोड सामग्री के साथ अनंत स्क्रॉल करने योग्य Div?

उत्तर

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