epsco: مارس 2013

عنواين الرئيسيه

كشف حقيقة التربح غير المشروع لجمعيات الاسكان التعاونى وتوظيف الاموال ؟ جمع الاموال لمشروع بناء وهمى على ارض محل نزاع قضائى على الملكيه ؟-رسالة من أحد ضحايا كشف الفساد المالى والإدارى -فراد أسرة النائب العام متوغلون في إدارة شركات مكتظة بالفساد المالي -المهندس شريف سوسة رئيسا لشركة بدر الدين للبترول. -إهدار4 ملايين جنيه بشركة بدر الدين للبترول -فساد بـ4 ملايين جنيه بشركات البترول بمطروح-مذكره التي اثارت غضب بعض الافراد من شركه بدر الدين...

الاثنين، 11 مارس 2013

Simplex Design blog : Infinite scrolling or load more effect for Blogger - part 3

Link to SimplexDesign - free premium blogspot template

Infinite scrolling or load more effect for Blogger - part 3

Posted: 10 Mar 2013 08:49 PM PDT

This is the last past of series Infinite scrolling for Blogger. I will show you how to combine Infinite Ajax Scroll with other Jquery Plugin or scripts in your page.
Because it too long, so I divide this post into 3 parts with detail as bellow:
- Part 1: Basic usage of Jquery Ajax Scrolling and apply it to default Blogger template
- Part 2: How to apply Infinite Scrolling technique to all Blogger templates.
- Part 3: Combine this Jquery plugin with other plugin ( layout plugins such as Masonry, Isotape, or Disqus comment system, Google Analytics)

Live Demo

Part 3: How to combine Infinite Ajax Scroll plugin with other Jquer plugin or scripts.

To understand what mentioned in this post, I recommend you all to read part 1 and part 2 of this series first. If you are familiar with Ajax scrolling plugin, you can skip to this part.

When this script work, user scroll down page 1, it will load page 2. In this process, we have states as bellow:
- User scroll down the page 1;
- User scroll down to the end of page 1, start loading page 2;
- Loading page 2;
- Display page 2.

According to these states, we have functions to handle each step as bellow:
- beforePageChange: Is called when a user scrolls to next page, but before the new page is loaded. Returning false and cancel the load if not the end of page 1; any return value other than false will allow the pagination to proceed as normal.
- onPageChange: Is called each time the user scrolls to an other page.
- onLoadItems: Is called each time new page are loaded.
- onRenderComplete: Is called each time new page complete loading and show the result in browser.

Any script inserted in each page (page 1, page 2... ) must be put inside these functions. Why? Because scripts which inserted in your page are designed to execute when a page load in browser. But using Infinite Ajax Scroll, you don't refresh or click any button in browser to navigate to next page. Scripts on your page are not triggered. So it's the reason we need to put your scripts inside these functions to make them execute at the moment new page loaded.

If you want your script start at the time user scroll down to the end of page, put it inside beforePageChange
If you want your script start at the time scrolled to the end of page and start loading page 2, insert your script inside onPageChange
If you want your script start at the time a page loaded, put it inside onLoadItems
If you want your script start at the time a page fully loading and show the result, put it inside onRenderComplete

How to put a script inside funtions above

You can refer to this:

jQuery.ias({
    container : '#entry-listing',
    item: '.entry',
    pagination: '#blog-pager',
    next: '#blog-pager-older-link a',
    loader: 'images/loader.gif',
    onLoadItems: function(items) {
       Copy and paste your script here
    }

});

- Disqus script which showing comment number.

jQuery.ias({
    container : '#entry-listing',
    item: '.entry',
    pagination: '#blog-pager',
    next: '#blog-pager-older-link a',
    loader: 'images/loader.gif',
    onLoadItems: function(items) {
        var disqus_shortname = 'xxxxx';
       (function () {
             var s = document.createElement('script'); s.async = true;
           s.type = 'text/javascript';
           s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
           (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
       }());

       }

});

Script that marked in red is Disqus script.

- Masonry script

jQuery.ias({
    container : '#entry-listing',
    item: '.entry',
    pagination: '#blog-pager',
    next: '#blog-pager-older-link a',
    loader: 'images/loader.gif',
    onLoadItems: function(items) {
        var $newElems = jQuery(items).show().css({ opacity: 0 });
        $newElems.imagesLoaded(function(){
             $newElems.animate({ opacity: 1 });
           jQuery('#entry-listing').masonry( 'appended', $newElems, true );
        });
        return true
    }

});

- Google Analytics is a bit more difficult to integrate:

jQuery.ias({
    container : '#entry-listing',
    item: '.entry',
    pagination: '#blog-pager',
    next: '#blog-pager-older-link a',
    loader: 'images/loader.gif',
    onPageChange: function(pageNum, pageUrl, scrollOffset) {
        // This will track a pageview every time the user
        // scrolls up or down the screen to a different page.
        path = jQuery('<a/>').attr('href',pageUrl)[0].pathname.replace(/^[^/]/,'/');
        _gaq.push(['_trackPageview', path]);
    }

});

Conclusion

This post is general instruction with not go into detail. Because there are many scripts that you can use for blog, I can't list all them. I hope with this post, you can have a clue where to start. It's not so hard to integrate a script with Infinite Ajax Scroll, but you must understand your script first, base on this, you can put them inside Infinite Ajax Scroll Plugin's functions above.