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  
  • November 2017
    MonTueWedThuFriSatSun
      12345
    6789101112
    13141516171819
    20212223242526
    27282930   

    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 : 1, 2  Next

    View previous topic View next topic Go down  Message [Page 1 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
    Liked
    It works on mine and loads quickly, but there's a bug on blogs using this code. Basically it shows the first post on every single page. Neutral

    Post on June 4th 2013, 8:25 pm by Rukiafan

    avatar
    Liked
    The code makes the codes on the page not work! When I load post none of the codes I have on those post load. It doesn't load lightbox effects or the like button I have on my forum. My forums is punbb.

    Post on June 4th 2013, 9:19 pm by Puppycheese889

    avatar
    Same thing happens on my PunBB forum. Neutral

    Post on June 4th 2013, 9:23 pm by Rukiafan

    avatar
    That is because your elements are now dynamically created. You will have to change any .click() events to this

    Code:
    $(document).on('click','.class',function() {
    //your code
    });

    Also as of jQuery 1.9.1 .hover() is deprecated you will have to use .on('mouseenter'  

    If anyone needs help changing their elements to dynamic elements please let me know. This is what will happen with any dynamically created elements.

    Post on June 4th 2013, 9:37 pm by Mr.EasyBB

    avatar
    Doing what you say breaks the code to where no new messages are displayed. Neutral

    Post on June 4th 2013, 9:54 pm by Rukiafan

    avatar
    NO no. Anything you have for your Post. Say you have a hover effect. Well you have to backtrack those codes and change them now. This is the price you get for dynamically loading ANY element. So say you have a hover ok

    Code:
    $('.avatar').hover(function() {
     $(this).hide();
    });

    Well that now needs to be changed to this-


    Code:
    $(document).on('mouseenter','.avatar',function() {
     $(this).hide();
    });
    $(document).on('mouseleave','.avatar',function() {
    $(this).show();
    });

    Good Golly

    Post on June 4th 2013, 10:03 pm by Mr.EasyBB

    avatar
    Is there any easier way to do this? I have lots of active codes.  Sad I have a few codes like the like button and the reply button. 

    Post on June 5th 2013, 12:53 am by Puppycheese889

    avatar
    Nope, it's quite easy to fix these, you don't have to change all the scripts. Just the ones dealing with the js. And if you are saying that the items are not being appended to the new post that you load that is because they aren't technically there until you actually visit the page. I could probably make something that would be easier. That is why codes are sometimes tricky as you need to know what you are doing with JavaScript and understanding what is technically going on in the background. Without this knowledge things can get easily confusing.

    Post on June 5th 2013, 8:47 am by Mr.EasyBB

    avatar
    for all versions?

    Post on June 5th 2013, 2:37 pm by pedrox

    avatar
    It can be made to be for all versions, you just need to make sure for one that your navigation for pages class name. Punbb is .paging , phpbb2 is .pagination and phpbb3 I don't know nor invision yet. Once I know these I will add them to the tutorial as a note. Anyone will to figure these out is more than welcome and will earn some points.

    Post on June 5th 2013, 5:08 pm by Mr.EasyBB

    avatar
    Ok. Can you teach me how to make it so the reply button found here http://www.easybbtutorials.com/t224-reply-box-in-each-post and I have the like system found here http://www.avacweb.com/t195-9-a-new-like-vote-system?highlight=like+system I also have the youtube light box script and I have the script for shortening links and adding picture bb code automatically found here http://www.avacweb.com/t593-15-shorten-local-urls-and-automatic-image-tags?highlight=shorten+links Please help me with this I really want to use this feature! It is really cool! I like the idea of it! 

    Post on June 5th 2013, 5:36 pm by Puppycheese889

    avatar
    Yeah I can see what I can do with them.

    Post on June 5th 2013, 5:47 pm by Mr.EasyBB

    avatar
    Wink Thanks man your the best! 

    Post on June 5th 2013, 5:49 pm by Puppycheese889

    avatar
    Here is the code you can add to the reply from us, there are some tips so follow them ok.

    Code:

    function createButton() {
    var items = document.getElementsByClassName('entry-content'), replyDiv;
    for (var i = 0; i < items.length; i++) {
       replyDiv = document.createElement('div');
       replyDiv.className='replyButton';
       replyDiv.innerHTML = 'Reply';
       items[i].appendChild(replyDiv);
    }

    createButton();
    $(document).on('click','.replyButton',function() {
        var reply = document.getElementById('pun-qpost'),
        seeIf = $(this).parent('.entry-content').children('#pun-qpost'),
        seeIfcheck = seeIf.css('display');
    if(seeIf.length == 1 && seeIfcheck ==="block") {
        document.getElementById("pun-qpost").style.display= 'none';
       } else if (seeIfcheck ==="none" && seeIf.length == 1){
          document.getElementById("pun-qpost").style.display= 'block';}else{ $(this).parent().append(reply);
          document.getElementById("pun-qpost").style.display= 'block';
       }
    });

    Add that to the Reply JavaScript you already have (find the bottom of it and replace it with this.

    Then go to this script, find the .load(...,function() { and at the bottom of the load add createButton();

    Post on June 5th 2013, 6:38 pm by Mr.EasyBB

    avatar
    I was a little bit confused by this. I tried it but it didn't work.  Sad

    Post on June 6th 2013, 1:01 am by Puppycheese889

    avatar
    Find in the original Reply Code, this line
    var items = document.getElementsByClassName('entry-content'), replyDiv;

    And replace everything past that with the code I provided except the VERY last }); in the reply code. Then go to the infiniteScroller function on this script and add createButton();

    So find this

    Code:
       if(hrefArray.length == 0) {
                                     infini.html(noInfiniHTML);
                                   } else {
                                     infini.html(newInfiniHTML);
                                 }

    and make it this

    Code:
       if(hrefArray.length == 0) {
                                     infini.html(noInfiniHTML);
                                   } else {
                                     infini.html(newInfiniHTML);
                                 }
    createButton();

    Post on June 6th 2013, 1:05 am by Mr.EasyBB

    avatar
    Just to let you guys know, if you only want to use this feature in blogs don't add this CSS code to your Stylesheet.




    Code:
    .paging {display:none}




    Also to change the loading animation add your own animated gif to this line of the Javascript code!




    Code:
    imgUrl = "http://i79.servimg.com/u/f79/17/83/35/07/loadin10.gif";




    I hope you enjoyed this mini tut on this @Mr.Easybb code! Wink

    Post on June 7th 2013, 2:44 pm by Rukiafan

    avatar
    RukiaFan that CSS won't make it work only in Blogs Wink What that CSS does is if it has the element .paging it won't show up. If a member clicks on a link leading to the second or third page it will display it and the scroller won't work as the data it gets is not correct. Though you are correct about the loading screen part I totally forgot to tell users how to use some of the variables I added Wink I will be adding more to this to make it work a bit better in a sense

    Post on June 7th 2013, 4:14 pm by Mr.EasyBB

    avatar
    The .paging still appears on blogs without the CSS, but not on forums. Wink

    Post on June 7th 2013, 4:47 pm by Rukiafan

    avatar
    Well it should as it is a light CSS. I think you need to check this again as anything dealing outside of the first page of the topic (p15 p30 p45) the script WILL NOT work. If you take a direct link to the first page it will work perfectly fine.

    Post on June 7th 2013, 4:49 pm by Mr.EasyBB

    avatar
    I see. Smile

    Post on June 7th 2013, 4:57 pm by Rukiafan

    avatar
    Don't work for phpbb2 Sad

    Post on June 15th 2013, 3:09 pm by elii01

    avatar
    elii01 that is because this is specific to punBB I need some forums to see what the actual classes are for phpbb2 so if you provide a link I'll help you

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

    avatar
    That's a link of my forum > http://purplerose1.activoforo.com/f12-presentate :$

    Post on June 15th 2013, 9:43 pm by elii01

    Post  by Sponsored content

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

    Go to page : 1, 2  Next