Back To Top
Login
Register
Visit Us At TwitterVisit Us At YouTubeVisit Us At Facebook
KandiChat is in Beta Release. Try It Out
HomeHome  
  • UpdatesUpdates  
  • SearchSearch  
  • RegisterRegister  
  • Log inLog in  
  • July 2017
    MonTueWedThuFriSatSun
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31      

    Calendar Calendar

    Search
     
     

    Display results as :
     


    Rechercher Advanced Search

    Shopmotion


    Who is online?
    In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest

    None

    Most users ever online was 22 on June 26th 2013, 6:10 am
    RSS feeds


    Poll
    Top posting users this week


    Go to page : Previous  1, 2

    View previous topic View next topic Go down  Message [Page 2 of 2]

    avatar

    Infinite Scrollers

    Mr.EasyBB
    06/04/2013
    So far I have finished the Clickable Infinite Load Post code. I will be working on the scrollable now. So please enjoy this as this has taken me some thinking of how to go about all of this Nerdy


    Create a new Javascript page and mark it In The Topics.
    Code:

    $(function() {
    //Copyright 2013 EasyBB Tutorals Dot Com
    //Any reference to this code, you must keep the copyright in tact. 
    //EasyBB (C) 2013
     if(!/p\d+/.test(window.location.pathname)) {
    var main =$('.post').last(),
    infiniBody= '<div class="newInfini"></div>';
    main.after(infiniBody);
    var infini =$('.newInfini');
    newInfiniHTML = '<center><span>Show More Post</span></center>',
    noInfiniHTML ='<center><span>No More Post</span></center>',
    hrefArray = [],//array global
    pager = $('.paging'),
    hrefs = $('.paging').first().find('a[href*="/t"]'),
    imgUrl = "http://i79.servimg.com/u/f79/17/83/35/07/loadin10.gif";
    for(var i=0;i<hrefs.length;i++) {
     var hreflink = $(hrefs[i]).attr('href');
      hrefArray.push(hreflink);
    }
    if(hrefArray.length  == 0) {
       infini.html(noInfiniHTML);
      } else {
       infini.html(newInfiniHTML);
    }
    hrefArray.pop();
    var hrefLength = hrefArray.length,
    imgS = $('.loadingImg');

       function infiniteScroll(){
               var url = hrefArray.shift();
                     setTimeout(function() {
                                imgS.remove();
                                infini.load(url+" .post",function() {
                                infini.removeClass('newInfini').addClass('oldInfini');
                                hrefLength = hrefArray.length;
                                main=$('.post').last();
                                main.after(infiniBody);
                                infini =$('.newInfini');
                                 if(hrefArray.length == 0) {
                                     infini.html(noInfiniHTML);
                                   } else {
                                     infini.html(newInfiniHTML);
                                 }
                                });
                         },1500);
                       }

      $(document).on('click',infini,function() {
         if(hrefArray.length > 0) {
       infini.html('<center><img  class="loadingImg" src="'+imgUrl+'"/></center>');
       infiniteScroll();
    }

       });
        } else {
           if(pager !== undefined) {pager.show();}
           }
    });

    CSS needed to keep it clean
    Code:
    .paging{display:none}

    This may not be usable for each forum, if it doesn't work for your forum please let me know. And I will change the code accordingly.
    Share this post on: Excite BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahooSmarking

    avatar
    I can't see the topic as you have to log in. Any way you can give me a test account?

    Post on June 15th 2013, 11:02 pm by Mr.EasyBB

    avatar
    I sent you by PM

    Post on June 16th 2013, 9:23 am by elii01

    avatar
    Try changing lines 14 and 15 to this-




    Code:
    pager = $('.gensmall .browse-arrows'),
    hrefs = pager.first().find('a[href*="/t"]'),

    Post on June 16th 2013, 10:59 am by Mr.EasyBB

    avatar
    Thats my code:

    Code:
    $(function() {
    //Copyright 2013 EasyBB Tutorals Dot Com
    //Any reference to this code, you must keep the copyright in tact. 
    //EasyBB (C) 2013
     if(!/p\d+/.test(window.location.pathname)) {
    var main =$('.infinitebox').last(),
    infiniBody= '<div class="newInfini"></div>';
    main.after(infiniBody);
    var infini =$('.newInfini');
    newInfiniHTML = '<center><span>Show More Post</span></center>',
    noInfiniHTML ='<center><span>No More Post</span></center>';
    hrefArray = [],//array global
    pager = $('.pagination'),
    hrefs = pager.first().find('a[href*="/t"]'),                                  
    imgUrl = "http://i79.servimg.com/u/f79/17/83/35/07/loadin10.gif";
    for(var i=0;i<hrefs.length;i++) {
     var hreflink = $(hrefs[i]).attr('href');
      hrefArray.push(hreflink);
    }
    if(hrefArray.length  == 0) {
       infini.html(noInfiniHTML);
      } else {
       infini.html(newInfiniHTML);
    }
    hrefArray.pop();
    var hrefLength = hrefArray.length,
    imgS = $('.loadingImg');
       function infiniteScroll(){
               var url = hrefArray.shift();
                     setTimeout(function() {
                                imgS.remove();
                                infini.load(url+" .infinitebox",function() {
                                infini.removeClass('newInfini').addClass('oldInfini');
                                hrefLength = hrefArray.length;
                                main=$('.infinitebox').last();
                                main.after(infiniBody);
                                infini =$('.newInfini');
                                 if(hrefArray.length == 0) {
                                     infini.html(noInfiniHTML);
                                   } else {
                                     infini.html(newInfiniHTML);
                                 }
                                });
                         },1500);
                       }
      $(document).on('click',infini,function() {
         if(hrefArray.length > 0) {
       infini.html('<center><img  class="loadingImg" src="'+imgUrl+'"/></center>');
       infiniteScroll();
    }
       });
        } else {
           document.getElementsByClassName('pagination').style.display="block";
           }
    });

    I created a table (class="infinitebox") to contain all the blog´s list, but dont contain the pagination... and the code dont work :/

    Post on June 16th 2013, 11:51 am by elii01

    Post  by Sponsored content

    View previous topic View next topic Back to top  Message [Page 2 of 2]

    Go to page : Previous  1, 2