Tell me more ×
Web Applications Stack Exchange is a question and answer site for power users of web applications. It's 100% free, no registration required.
up vote 1 down vote favorite
1

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>
share|improve this question
Most infinite-scroll "plugins" will cause these issues if your page isn't formatted the same as it expects, or if you place the code in the wrong place. I am planning on creating one that comes with CLEAR instructions on how to use it, but it's going to be awhile with all my other projects before I get to it. Still I wanted to let you know that it's tricky and if one doesn't work then try another, or really take the time to read the instructions (if there are any)... – SnareChops Jan 31 at 8:53
@SnareChops Thanks for your reply. It's working but it has something to do with my {block:Posts} and </div> (dividers) when I change them it changes the scroll. Either it doesn't want to infinite-scroll or it does scroll and duplicate pictures with a huge space in between pages. Looking forward to your plugin with clear instructions. Thanks again. – Ken Jan 31 at 15:41
If you've already given this a try there is a minor update to the code. Move the jQuery script block to the top of the code instead of the bottom. (it was the very bottom line, now the very top line) – SnareChops Feb 1 at 19:51

1 Answer

up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.