4

I'm trying to learn to code Tumblr themes (I have no money for Wordpress), and I'd like to figure out how to implement "infinite/endless scroll" (as opposed to pagination) of posts; I'd rather not use either of the 2 main infinite scroll scripts because infinite-scroll-js (by Paul Irish) is fairly well-documented (I was able to get it working) but I would like more control over the way the posts are loaded, so to speak, and Cody Sherman's infinite scroll code is not documented at all, and I have no idea how it should be used (the widely varying instructions are distributed by several noncoders who less of a grasp on Javascript than I do, and that's saying something).

I don't know any Ajax, but I am willing to read as much JS documentation as needed. Could I possibly use the following sequence when adding posts out of the blue, or do I need to understand Ajax like Paul Irish?

Onload: (of body)

  1. Get all of the .post elements (with children), remove them from the DOM whilst adding them to a var that's basically just a list (array? JS term?) of posts

  2. Load some computed # of posts (there would be an algorithm for this, probably based off post height or something, or perhaps dynamically measuring them as they come)/add them to the Masonry container, animated, when the user scrolls to the bottom of either the page, body, or Masonry container (haven't decided which yet)

Is this plausible or would I be wasting my time?

mikedidthis
  • 4,899
  • 3
  • 28
  • 43
ksoo
  • 434
  • 1
  • 3
  • 15
  • From your vague *requirements* this is more than plausible. To get a more helpful answer, it would be great if you shared your code. – mikedidthis Feb 08 '14 at 19:46
  • @mikedidthis Haha yeah I see what you mean... I'll try to put something up later, but so far what I've been writing hasn't been working, so I've concluded that either I need to use something other than JQuery (base lib) and Masonry, or I'm too ignorant to pull this off – ksoo Feb 08 '14 at 19:51
  • There are some good answers here http://stackoverflow.com/questions/15630049/how-do-i-add-infinite-scroll-with-jquery-masonry – panpsychist Feb 09 '14 at 03:11
  • @panpsychist Thanks, but I'd rather not use Paul Irish's if I can avoid it --nothing against him or against you but I have my reasons (stated in question, I believe, if I remembered to include that part) – ksoo Feb 09 '14 at 14:22

2 Answers2

2

Yes you need to use Ajax. Here's how I did it using JQuery and Masonry on Wordpress, it should be pretty similar on any other site though. I'm using the Masonry function Append to add the new pictures. You can see it in action in the gallery on jorarts.org 

jQuery.ajax({
    type:"POST",
    url: "/wp-admin/admin-ajax.php",
    data: myData,
    success:function(response){
        jQuery("#LoadingImage").hide();

        if(response){
            var $newPics=jQuery(response).css({ opacity: 0 });;

            $newPics.imagesLoaded(function(){
                jQuery("#galleryPlaceholder").append($newPics).masonry( 'appended', $newPics, true );
                $newPics.animate({ opacity: 1 });
                jQuery("#galleryPlaceholder a").colorbox({rel:currCat, 
                    scalePhotos:true,
                    maxWidth:"90%",
                    maxHeight:"90%"});
            });
        }
    }
});

Here is the JQuery Ajax documentation https://api.jquery.com/jQuery.ajax/

jeff_kile
  • 1,805
  • 16
  • 21
  • Thank you for clearing that up before I wasted more time trying to get it to work without Ajax. Do you know how I'd figure out what .php url to use? – ksoo Feb 10 '14 at 01:48
  • 1
    It will be whatever endpoint on your server returns the images it could be php or js or python or RoR or asp or html, something that serves the content. – jeff_kile Feb 10 '14 at 03:58
  • Wait what if I am not using `imagesLoaded`? (Separate library, right?) Also if I were testing this outside of Tumblr's code editor (let's face it, trying to deal with an entire theme with no code folding is a headache...and their assets system is kinda difficult to work with if you make a lot of changes to the assets), then could I retrieve posts this way without having to get an application key thingy? Can I add and remove basic test elements to the DOM/to a Masonry container without using Ajax? – ksoo Feb 10 '14 at 22:56
  • And I went to the site you said I could see the infiniscroll "in action" at, and I couldn't figure out where you meant it was implemented. There didn't seem to be enough items in the "Photos"/"Films"/etc pseudo-tabs to require infinite scroll functionality; did I need to go farther than that? [It looks nice and the sliding nav was really smooth though!] – ksoo Feb 10 '14 at 22:59
  • Thanks :-) click photos, there's enough there. – jeff_kile Feb 10 '14 at 23:04
  • You can add more without using AJAX too just use this line jQuery("#galleryPlaceholder").append($newPics).masonry( 'appended', $newPics, true ); Where $newPics is the content you are adding. – jeff_kile Feb 10 '14 at 23:05
  • `$newPics` doesn't have to be an image, right? It can be an element, or array of elements, or element [multi]selector? – ksoo Feb 11 '14 at 00:05
  • 1
    Yeah, you can see the documentation for appended here along with code samples and a code pen you can try things out in http://masonry.desandro.com/methods.html#appended – jeff_kile Feb 11 '14 at 04:34
-2

On,jScroll is a jQuery plugin for infinite scrolling, written by Philip Klauzinski. Sounds like a different person to me!

panpsychist
  • 87
  • 1
  • 3
  • Sorry I didn't see the link at the bottom; the answer it was in first referenced Paul Irish's script. I'm working on being a more careful reader. What I meant was, I'd rather not 100% use someone else's code for the infinite scroll part; usually this means less customization options and versatility (I am very particular about, well, everything). I'd be more than glad to use available code just for the "hey remove these elements from the DOM and then store 'em here in this object until you're ready to retrieve 'em and stick 'em back in" part; I'm mostly concerned with the actual appending part. – ksoo Feb 09 '14 at 20:01