Skip to:
Content
Pages
Categories
Search
Top
Bottom

Auto ”load more” activity stream items when scroll reaches the bottom of the page


  • juanmaguerrero
    Participant

    @juanmaguerrero

    Hi! I’m trying to emulate facebook “auto-load-more” activity, that when the user scroll down to almost the bottom of the activity stream page, more items are automatically added at the bottom of all and so on.
    Below is another comment of mine with the code for you to apply on your site. I’ve accomplished the feature but yet didn’t have the time to make it a plugin, so, you’ll have to copy/paste the code on your site for now…

Viewing 25 replies - 1 through 25 (of 53 total)

  • Prince Abiola Ogundipe
    Participant

    @naijaping

    @juanmaguerrero, please let me know if this works well as i will be interested in this aswell.

    regards


    abysshorror
    Member

    @abysshorror

    Cool ! I’ve tried it but it didn’t work :(

    Where should I add that code ?


    Prince Abiola Ogundipe
    Participant

    @naijaping

    @juanmaguerrero, i am not a coder, but i can place code in my function.php. you can please paste the complete code with a bit of explanation because of many nobe like me.

    i know many will be so grateful if this function did work. auto load more function rocks

    regards


    abysshorror
    Member

    @abysshorror

    @juanmaguerrero por favor, I’d also need the tutorial :)

    Thanks !


    admin25
    Participant

    @admin25

    take this:

    function ajax_auto_load_activity(){
    …code goes here…
    };

    and this:

    jq(“#content li.load-more”).addClass(‘loading’);
    
    if ( null == jq.cookie(‘bp-activity-oldestpage’) )
    jq.cookie(‘bp-activity-oldestpage’, 1, {path: ‘/’} );
    
    var oldest_page = ( jq.cookie(‘bp-activity-oldestpage’) * 1 ) + 1;
    
    jq.post( ajaxurl, {
    action: ‘activity_get_older_updates’,
    ‘cookie': encodeURIComponent(document.cookie),
    ‘page': oldest_page
    },
    function(response)
    {
    jq(“#content li.load-more”).removeClass(‘loading’);
    jq.cookie( ‘bp-activity-oldestpage’, oldest_page, {path: ‘/’} );
    jq(“#content ul.activity-list”).append(response.contents);
    
    target.parent().hide();
    }, ‘json’ );
    
    and go like this:
    function ajax_auto_load_activity(){
    jq(“#content li.load-more”).addClass(‘loading’);
    
    if ( null == jq.cookie(‘bp-activity-oldestpage’) )
    jq.cookie(‘bp-activity-oldestpage’, 1, {path: ‘/’} );
    
    var oldest_page = ( jq.cookie(‘bp-activity-oldestpage’) * 1 ) + 1;
    
    jq.post( ajaxurl, {
    action: ‘activity_get_older_updates’,
    ‘cookie': encodeURIComponent(document.cookie),
    ‘page': oldest_page
    },
    function(response)
    {
    jq(“#content li.load-more”).removeClass(‘loading’);
    jq.cookie( ‘bp-activity-oldestpage’, oldest_page, {path: ‘/’} );
    jq(“#content ul.activity-list”).append(response.contents);
    
    target.parent().hide();
    }, ‘json’ );
    };

    I do not know if it works but that is what was said to do.


    juanmaguerrero
    Participant

    @juanmaguerrero

    Hi everyone, sorry for the delay, I was on holidays. Tonight or tomorrow I’ll be adding the script and a tutorial. Regards!


    Prince Abiola Ogundipe
    Participant

    @naijaping

    @juanmaguerrero, thanks so much, will be waiting….

    Regards


    funmi omoba
    Participant

    @funmi-omoba

    @juanmaguerrero, how far about the tutorial, i have been following your thread for a while. i am interested in this code aswell.

    thanks


    juanmaguerrero
    Participant

    @juanmaguerrero

    Sorry everyone for the delay… major force personal issues… hope soon (before next week) will post here the tutorial and the code. regards!


    funmi omoba
    Participant

    @funmi-omoba

    @juanmaguerrero,any update on the tutorial.

    Thanks


    juanmaguerrero
    Participant

    @juanmaguerrero

    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    IMPORTANT UPDATE: Since a few pals here have tested and found some things to correct, I have addeded this correction (so now it works OK, yay!):

    Below this:

    
    <div id="message" class="info">
    
    </div>
    

    Add this:

    
    
    jq('.pixelMonitor').remove();
    jq(document).unbind('scroll');
    
    

    :::::::::::::::::::::::::::::::::: END OF THE UPDATE ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

    Hi, all, @naijaping @abysshorror @funmi-omoba

    I finally found the time to work on this. I’ll post a detailed explanation on my blog later but here it goes for you to be able to use it right away. I’ll maybe make a plugin of all this, and some code you’ll have to tweak will be overridden if you update your buddypress theme but by that time I hope this will be improved and I’ll post to you back with the updates.

    So:

    
    1) Edit the file: /wp-content/plugins/buddypress/bp-themes/bp-default/activity/activity-loop.php (around line 38) This assumes you're using the default theme, if not, do it in your other theme file.
    
    // Change:
    
    <li class="load-more">
    <a href="#more"></a>
    </li>
    
    // For this:
    
    jq('.pixelMonitor').remove();
    jq(document).unbind('scroll');
    
    // 2) Add this at the bottom of that file:
    
    <div class="pixelMonitor" style="width: 1px;height: 1px">
    <div id="loadingActivityMessage" style="background-color: white;float: right;height: 16px;padding: 4px 2px 4px 39px;width: 100px">Loading...</div>
    </div>
    
    /* Auto load more updates at the end of the page when reaching the bottom of the page */
    
    jq(document).ready( function() {
    
    iterationAllowed = true;
    
    function loadActivityOnScroll(){
    
    jq("#loadingActivityMessage").show();
    
    if ( null == jq.cookie('bp-activity-oldestpage') )
    jq.cookie('bp-activity-oldestpage', 1, {path: '/'} );
    
    var oldest_page = ( jq.cookie('bp-activity-oldestpage') * 1 ) + 1;
    
    jq.post( ajaxurl, {
    action: 'activity_get_older_updates',
    'cookie': encodeURIComponent(document.cookie),
    'page': oldest_page
    },
    function(response){
    jq("#loadingActivityMessage").hide();
    jq.cookie( 'bp-activity-oldestpage', oldest_page, {path: '/'} );
    jq("#content ul.activity-list").append(response.contents);
    
    }, 'json' );
    
    return false;
    
    };
    
    jq(document).scroll(function(){
    
    if ( Math.round(jq('.pixelMonitor').last().offset().top) > ( jq(document).height() -500 ) && iterationAllowed === true ) {
    loadActivityOnScroll();
    iterationAllowed = false;
    setTimeout('iterationAllowed = true', 3000);
    };
    
    });
    
    }); /* Auto load more activity block ending here */
    
    

    Hope you enjoy it. In near future I hope I’ll have it as a plugin and I’ll post it here to let you know.

    Some demo: http://www.horizontea.com/ (scroll to the bottom to see in action).

    PS: I’m not saying this is bug free, but will not affect any data on your db or installation, it just tweaks the interface ;) Cheers!

    PS 2: As soon as I check the “WP/BP” way to add this code to the file “automatically” (as a plugin) I’ll update it.


    9087877
    Inactive

    @juanmaguerrero Works great until it hits a dead end and there is no more activities. Then if you keep trying to scroll down it repeats over and over “Sorry, there was no activity found. Please try a different filter.” Is there a way you can tweak the code to make it only display that message one time when it reaches the end of activities? It works great, but it would just look cleaner if it did not repeat that message over, and over as a user attempts to scroll when there is no more activities to display. Also, how do you get that neat loader like you have on your site while more activities is loading? What does it involve? Can you share how to accomplish this? Thanks, and great job! :-)


    juanmaguerrero
    Participant

    @juanmaguerrero

    Hi, @shawn38 I have updated the code in the previous comment I made with that bug fixed. Please copy/paste it now and it’ll work fine. As you mention, my “example” has an image (loading bar gif) included, that you can easily add by adding some style and the image. In my example, I used:

    
    <div id="loadingActivityMessage">Loading...</div>
    

    James
    Participant

    @janismo

    hi @juanmaguerrero, great tutorial!
    unfortunately, bug that @shawn38 has mentioned partly is still there. Go to site wide activities, switch to “updates” as drop down filter – everything still will work fine, but now refresh page and bug is back again. If you have custom bp_has_members loop on separate page, bug is always there. Have to say that for those, who really needs this functionality, it is not so terrible. thanks again!


    juanmaguerrero
    Participant

    @juanmaguerrero

    hi, @janismo I cannot reproduce the bug you mention. It currently does not support the dropdown list change, but no “error” is visibly shown. Maybe you are using some tweaked code that I don’t know… could you provide more details about the bp_has_members loop customization you made? thanks!


    James
    Participant

    @janismo

    hi again @juanmaguerrero, I do not have any customizations, just child theme of bp-default (local at the moment) and your 2 steps. When I switch to “updates” in drop-down of site wide activity directory, I see my 3 activity updates. Now I press page refresh, 3 activities are still there, but every move of scroll bar returns “Sorry, there was no activity found. Please try a different filter.”

    If you won’t be able to recreate it again, will send you some video from my test site in approx. 10 hours, it’s already night here. Drop me some email. thanks!


    juanmaguerrero
    Participant

    @juanmaguerrero

    Hi, @James I could not reproduce the error. The string “Sorry, there was no activity found. Please try a different filter.” Is not able to be shown unless you’ve made the changes in the template wrong or something I cannot see. You’re welcome to post a video but there’s no way I can send you an email through here. Regards


    James
    Participant

    @janismo

    hi @juanmaguerrero, no need in video. after deeper testing I understood the issue. Bug remains in every activity list, where you do not have enough of updates to see “load more” button. Create a group with few updates and scroll to the bottom. Script will keep adding more and more “Sorry, there was no activity found. Please try a different filter.” even without refresh.


    juanmaguerrero
    Participant

    @juanmaguerrero

    @janismo (James) now i’ve got it! :D Thanks for your help, man! Now I was finally able to reproduce it. The bug is caused in activity streams were no “load more” button was intended to be shown. I have to Tweak it again, will post it tonight/tomorrow morning but with help from people like you I think we’ll have a pretty “bullet-proof” snippet :D !

    Thanks a lot, again, will update as soon as I fixed this altogether with the dropdown filter change support. :)


    landwire
    Participant

    @landwire

    Hi Juan,
    that is such a cool solution! Cannot wait until you had time to update the snippet and then I will try it out on my new install.

    Thanks for this,
    Sascha

    BTW: Do you know where I can find a snippet that auto loads more WP posts?


    juanmaguerrero
    Participant

    @juanmaguerrero

    Hi, @landwire, thanks for you comments, I’ll update the snippet within this week. I don’t want to go off topic a lot but you could accomplish that task by AJAX: http://tomsbigbox.com/wordpress-load-more-posts-on-page-scroll/ Hope it helps! Regards


    juanmaguerrero
    Participant

    @juanmaguerrero

    Hi, all, all fixed now. Below this:

    
    <div id="message" class="info">
    </div>
    

    Add this:

    
    
    jq('.pixelMonitor').remove();
    jq(document).unbind('scroll');
    
    

    That’s it! You can change the text “Sorry, there was no activity found. Please try a different filter.” for something more customized for the purposes of this feature… cheers! :)


    9087877
    Inactive

    @juanmaguerrero Hi! I was just curious if you have had any luck packaging your “auto load more” code snippet as a plugin? It would be an awesome contribution to the buddypress community. Thanks and best regards!


    juanmaguerrero
    Participant

    @juanmaguerrero

    Hi, @shawn38 Glad to see someone found this useful :D

    I have actually optimized the code to work flawless and best performing. I could make a plugin with it just have to learn how to replace some code that is already given with BuddyPress, I will investigate that today and hopefully upload the plugin really soon. Will let you know with another message here. Thanks a lot for your encouraging words! :)


    StudioManager
    Member

    @studiomanager

    Juan, I would so donate to that plugin. Before something broke in 1.6.1 (not your code) it was awesome for smoothness. To have it as a plugin so i didn’t have to re-add it everytime soemthing else changed would be a life-saver!!!!

Viewing 25 replies - 1 through 25 (of 53 total)
  • The topic ‘Auto ”load more” activity stream items when scroll reaches the bottom of the page’ is closed to new replies.
Skip to toolbar