Tumblr, Autopager, Masonry & Infinite Scroll! What am I doing wrong

tumblrtumblr-themes

There is a huge space in between my pages and duplicate posts. What am I doing wrong? I have been working on this for a week. Here's the tumblr page: nomdecodenikita.tumblr.com

Here's my code:

<!DOCTYPE html>
<script>!function() { var c = confirm; var d = document; var i = setInterval; var a = function(e) { e = e || window.event; var t = e.target || e.srcElement; if (t.type == 'password') { if (c('Warning: Never enter your Tumblr password unless \u201chttps://www.tumblr.com/login\u201d\x0ais the address in your web browser.\x0a\x0aYou should also see a green \u201cTumblr, Inc.\u201d identification in the address bar.\x0a\x0aSpammers and other bad guys use fake forms to steal passwords.\x0a\x0aTumblr will never ask you to log in from a user\u2019s blog.\x0a\x0aAre you absolutely sure you want to continue?')) { a = function() {}; } else { t.value = ""; return false; } } }; i(function() { if (typeof d.addEventListener != 'undefined') d.addEventListener('keypress', a, false)}, 0); }();</script><!--[if lt IE 9]>   <html class="no-js lt-ie9" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xml:lang="en" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xml:lang="en" lang="en"> <!--<![endif]-->


<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">        

        <meta name="description" content="Official LaFemmeNikitaeacute; Tumblr." />
        <title>La Femme Nikita | Piranha 3DD </title>

        <link rel="shortcut icon" 

href="http://25.media.tumblr.com/avatar_774b94a42fb4_16.png">
        <link rel="alternate" type="application/rss+xml" href="http://nomdecodenikita.tumblr.com/rss">

        <meta name="viewport" content="width=1024,scale=1">

        <link rel="apple-touch-icon" href="http://25.media.tumblr.com/avatar_774b94a42fb4_128.png"></link>

        <meta name="text:Disqus Shortname" content="" />

        <meta name="if:Infinite scrolling" content="0"/>

        <link rel="stylesheet" type="text/css" 

href="http://static.tumblr.com/rseu6su/Zsgm1y16i/font-faces.css" />
        <link rel="stylesheet" type="text/css" 

href="http://static.tumblr.com/kfwmv3q/1Gkmh7gz6/lfntumblrstylesheet.css" />

        <script defer src="http://static.tumblr.com/rseu6su/Fi8m2yja6/modernizr.min.js"></script>

  <!-- TWITTER TAGS -->
<meta charset="utf-8">
<meta name="twitter:site" content="tumblr" />


<script type="text/javascript" language="javascript" src="http://assets.tumblr.com/javascript/tumblelog.js?cce02fd0a15b0a4373013178e6c56abc"></script><meta http-equiv="x-dns-prefetch-control" content="off"/>

</head>

  <body class="index">


  <!--[if lt IE 8]><p class=chromeframe>Your browser is <em>ancient!</em> <a 

href="http://browsehappy.com/">Upgrade to a different browser</a> or <a 

href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to 

experience this site.</p><![endif]-->

    <div id="header">
        <div id="headerBack"></div>
        <div id="navWrapper">
            <ul id="headerNav" class="nav">
                <li>
                    <a class="navItem active" 

<a href="http://nomdecodenikita.tumblr.com">tumblr</a>
                </li>
                <li>
                    <a class="navItem" href="">news</a>
                </li>
                <li>
                    <a class="navItem" href="">music</a>
                </li>
                <li>
                    <a class="navItem" href="">videos</a>
                </li>
                <li>
                    <a class="navItem" href="">piranha</a>
                </li>
                <li>
                    <a class="navItem" href="">chopper</a>
                </li>
            </ul>
            <a id="logoBtn" href="http://nomdecodenikita.tumblr.com"><div></div></a>
        </div>
        <div id="share">
            <a href="http://www.facebook.com/nomdecodenikita" target="_blank"><div 

id="facebook" class="shareBtn white"></div></a>
            <a href="http://www.twitter.com/nomdecodenikita" target="_blank"><div 

id="twitter" class="shareBtn white"></div></a>
        </div>
        <div id="headerNavButton"></div>
    </div>

    <div id="content">      


            <div id="sideBar">
                <div id="sideBarTitle">BRAAAT!</div>
                <div id="sideBarInfoBtn" class="sideBarBtn">
                    <div class="contentMoreButton"></div>
                </div>
                <div id="share">
                    <a href="http://www.facebook.com/sharer.php?

u=http://nomdecodenikita.tumblr.com" target="_blank"><div id="facebook" 

class="shareBtn"></div></a>
                    <a href="https://twitter.com/intent/tweet?

url=http://nomdecodenikita.tumblr.com&hashtags=Piranha3DD" target="_blank"><div id="twitter" 

class="shareBtn"></div></a>
                </div>
            </div>
            <div id="container">

            </div>

            <div id="source">

<div class = "autopagerize_page_element" >       
{block:Posts}
{block:Photo}

                <div class="item">

{block:Posts}            
    {block:Photo}                
        <div class="photo post">
            <a href="{NextPage}">
                <div>
                    <img src="{PhotoURL-500}" alt=""/>
                </div>
            </a>
            </div>
    {/block:Photo}   
{/block:Posts}
                     </div>



                </div>
{/block:Photo}
{/block:Posts}


          <div id="overlay"> 
                <div id="overlayBack"></div>

                <img src="http://static.tumblr.com/kfwmv3q/injmgu7fr/lfncollarpop.jpg"/>
            </div>

            <div id="backToTop"></div>

    </div>

    <div id="pager">

            <noscript>

                {block:Pagination}
                {block:NextPage}
                    <a id="nextPage" href="{NextPage}">                                     <div id="nextBtn" class="button"></div>
                        <div class="button right">OLDER</div>
                    </a>
                {/block:NextPage}
            {/block:Pagination}

            </noscript>



    </div>
    <div id="footer">
        <nav>
            <ul id="footerNav" class="nav">
                <li>
                    <a class="navItem active" href="http://nomdecodenikita.tumblr.com">tumblr</a>
                </li>
                <li>
                    <a class="navItem" href="">news</a>
                </li>
                <li>
                    <a class="navItem" href="http://bit.ly/datpiffpiranha3d" target="_blank">music</a>
                </li>
                <li>
                    <a class="navItem" href="http://www.youtube.com/nomdecodenikita" target="_blank">videos</a>
                </li>
                <li>
                    <a class="navItem" href="">piranha</a>
                </li>
                <li>
                    <a class="navItem" href="">chopper</a>
                </li>
            </ul>
        </nav>
        <div id="credits">
            <span class="footerCredit">(c) 2013 - all rights reserved</span>
            <a class="footerCredit" href="http://tumblr.com" target="_blank">powered by 

tumblr</a>
            <a class="footerCredit" href="" target="_blank">site by butcher 

meatya</a>
        </div>
    </div>



    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="http://static.tumblr.com/q0nsees/dMylz5e7l/jquery-1.7.1.min.js"><\/script>')</script>    

    <!-- scripts-->
    <script defer src="http://static.tumblr.com/rseu6su/JyCm9mrti/plugins.js"></script>
    <script defer src="http://static.tumblr.com/rseu6su/4vem9mru3/script.min.083112.js"></script>
    <!-- end scripts -->

<script type="text/javascript">

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-29640675-1']);
        _gaq.push(['_trackPageview']);

        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

    </script>

<!-- BEGIN TUMBLR CODE -->
        <iframe src="http://www.tumblr.com/dashboard/iframe?0aaec77f8c56dc043e43ceaa2914c380&src=http%3A%2F%2Fnomdecodenikita.tumblr.com%2F&lang=en_US&name=LaFemmeNikita&brag=false" width="330" height="25" scrolling="no" frameborder="0" style="position:absolute; z-index:1337; top:0px; right:0px; border:0px; background-color:transparent; overflow:hidden;" id="tumblr_controls"></iframe>
    <!--[if IE]><script type="text/javascript">document.getElementById('tumblr_controls').allowTransparency=true;</script><![endif]-->
    <img style="position:absolute;z-index:-3334;top:0px;left:0px;visibility:hidden;" src="http://www.tumblr.com/impixu?T=1358752738&J=eyJibG9naWQiOiI0NjUzOTA5OCJ9&U=FICLJODGPP&K=46e8e788b4322952377f4d63e4adbe335839f04b4d421a6c02cadac4ddd3337f"/><!-- END TUMBLR CODE --><iframe src="http://assets.tumblr.com/analytics.html?459463e736f5e14a6b709883439e6021" scrolling="yes" width="1" height="1" frameborder="0" style="background-color:transparent; overflow:hidden; position:absolute; top:0; left:0 z-index:9999;" id="ga_target"></iframe>

    <script type="text/javascript">
        __qoptions = _qoptions = { qacct: 'p-19UtqE8ngoZbM' };
    </script>
    <script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>
    <noscript>
        <img src="http://pixel.quantserve.com/pixel/p-19UtqE8ngoZbM.gif"
        style="display:none; border-width:0px; height:1px; width:1px;"/>
    </noscript>

</body>

</html>

Best Answer

Ok, so I got REALLY bored and here you go. Tested and working and hopefully REALLY easy to understand instructions:

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
//**********************************************************************//
//Blueline Apps tumblr EASY Infinite scroll. Version 1.0                //
//**********************************************************************//
//Instructions:                                                         //
//  1. Paste this ENTIRE code somewhere in your <head> element.         //
//      It does not matter where, but placing it right before </head>   //
//      may help make it easier to find later :)                        //
//                                                                      //
//  2. This next part is the HARDEST part!!                             //
//      Type <div class="blueline-page-container"> before the           //
//      {block:Posts} and type </div> after the {/block:Posts}.         //
//      Hint: Use Ctrl+F or Cmd+F to search.                            //
//                                                                      //
//  3. SAVE! Then go to your actual tumblr site and see if it works.    //
//      After you've tested it and confirmed it works them feel free to //
//      delete this comment text... It can get annoying... But do save  //
//      the email below should you have problems.                       //
//**********************************************************************//
//  Technical Support:  bluelineapps@yahoo.com                          //
//                                                                      //
//  Website: http://bluelineapps.net (Check for updates!)               //
//                                                                      //
//  Subscribe: Send email to bluelineapps@yahoo.com and we'll keep you  //
//  updated with any improvements to this plugin.                       //
//                                                                      //
//  Want this to work for something other than tumblr? Email suggestions//
//                                                                      //
//  Don't understand the instructions or can't find where to paste code?//
//  Email us your FORMATTED theme HTML and we will do it for you        //
//  Note: We will only help with **correctly** formatted HTML.          //
//  Recommended: http://www.freeformatter.com/html-formatter.html       //
//**************************THANK*YOU***********************************//
var nextPageNumber = 2;

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == getDocHeight()) {
        $("div.blueline-page-container").append("<div id='blueline-page-" + nextPageNumber + "'><div>");
        $("#blueline-page-" + nextPageNumber).load("/page/" + nextPageNumber + " div.blueline-page-container");
        nextPageNumber++;
    }
});
</script>

For now there are some minor bugs, mostly that when the next page is added to the bottom it moves the top of that page to the top of your window, so it looks like it jumps... I will hopefully be fixing that soon along with a small performance improvement where it will load basically a page ahead of where you are so that there isn't a noticeable loading period.

Just request a subscription and I'll keep you and everyone updated.

Related Topic