Tumblr JS/Jquery Infinite Scroll / Masonry Glitch

StackOverflow https://stackoverflow.com/questions/21391161

Question

I'm new to JS/JQuery and masonry so this is probably some dumb mistake, but i've searched a lot for answers and i'm completely out of ideas.

The issue is overlapping posts/divs. enter image description here http://folkherofilms.tumblr.com/tagged/thrilljockey/chrono

Here's the full theme code:

    <html>
    <head>
        <title>{Title}</title>
        <link rel="shortcut icon" href="{Favicon}">
        <link rel="alternate" type="application/rss+xml" href="{RSS}">
        {block:Description}
            <meta name="description" content="{MetaDescription}" />
        {/block:Description}

<script src="http://static.tumblr.com/cbgnuxd/KqQmy0t7l/jquery-1.7.1.min.js"></script>
<script src="http://static.tumblr.com/cbgnuxd/LE0my0t7x/jquery.masonry.min.js"></script>
<script src="http://static.tumblr.com/cbgnuxd/PW6my0t86/masonry.pkgd.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/cbgnuxd/He2myzqh0/lazyyt.js"></script>

<!-- SHARERS -->
<script type="text/javascript">var switchTo5x=true;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'3a7d8263-9ce0-4500-9413-f40167dad735'});</script>

<!-- OTHER CRAP SCRIPT -->

<script>

$(function(){

// YT LAZY LOAD
$('.js-lazyYT').lazyYT();

// INDEX PAGE
if (document.location.href == "http://folkherofilms.tumblr.com/") {
    window.location.href = "http://folkherofilms.tumblr.com/index";
}

if (document.location.href == "http://folkherofilms.tumblr.com/index") {
    $('body').addClass('static');
    $('.item').addClass('autoheight');
}

// CASE STUDY PAGES
if ( document.location.href.indexOf('tagged/') > -1 ) {
    $('#sidebar').fadeIn('slow');
}

// ABOUT PAGE

if (document.location.href == "http://folkherofilms.tumblr.com/about") {
    $('body').addClass('static');
    $('.item img').css('width','auto');
    $('.item').addClass('autoheight');
}

// TEMPORARY PORTFOLIO PAGE

if (document.location.href == "http://folkherofilms.tumblr.com/portfolio") {
    $('body').addClass('static');
    $('.item').addClass('autoheight');
}

// PORTFOLIO PAGE
if (document.location.href == "http://folkherofilms.tumblr.com/tagged/portfolio") {
    $('#sidebar, .sharers').css('display','none');
    $('#maincontainer, #headercontainer').css('width','1040px');
    $('#maincontainer').css('top','190px');
    $('#container').css('margin-left','0px');
    $('.item').removeClass('m l autoheight');
    $('.item').addClass('s');
}

// FIELD NOTES POSTS
if ($('.item.fieldnotes').length ) {
    $('body').addClass('static');  
    $('#disqus_things, .sharers').show();
    $('.item').addClass('autoheight');   

}

// FIELD NOTES PAGE
if (document.location.href == "http://folkherofilms.tumblr.com/tagged/fieldnotes") {
    $('body').addClass('static');
    $('.item').removeClass('m s');
    $('.item img').css('width','auto');
    $('#disqus_things, .sharers').hide();
}

// CONTACT PAGE
if (document.location.href == "http://folkherofilms.tumblr.com/contact") {
    $('body').addClass('static');
}

// DEFAULT SIZE POSTS
$('.item:not(.m, .l)').addClass('s');

// 404 PAGE
if ($('p:contains("The URL you requested could not be found.")').length > 0) { 
    $('.item, .sharers').hide();
    $('#notfound').show();
}

});
</script>

<!-- META -->

<meta name="image:Background" content=""/>
<meta name="image:Logo" content=""/>
<meta name="image:Header Background" content=""/>
<meta name="color:Text Color" content="#666"/>
<meta name="color:Link Underline" content="#5c7ea5"/>
<meta name="text:Disqus Shortname" content="" />

<!-- CSS -->

<style>

html, body {height:100%}

#tumblr_controls, #tumblr_controls iframe {display:none!important}

body {
margin:0;
background-color:#ccc;
background-image:url('{image:Background}');
font-family:Pt Sans, Helvetica, sans-serif;
font-size:14px;
-webkit-font-smoothing: antialiased;
color: {Color:Text Color};
overflow-x:hidden;
}

.hide {display:none!important}

#sitecredit {
position:fixed;
bottom:6px;
right:10px;
}

#sitecredit img {width:21px;opacity:0.5}
#sitecredit img:hover {opacity:0.9}

h3 {font-size:10px}

#disqus_things {display:none}
#disqus_things .post {width:100%}

#maincontainer {
visibility:hidden;
position: relative;
top: 200px;
width: 1135px;
height:100%; /*FOR SAFARI */
margin: 0 auto;
padding-bottom:100px;
}

#infscr-loading {opacity:0}

/* STATIC PAGES */

.static #sidebar {display:none!important}
.static #maincontainer, .static #headercontainer, .static #container {width:910px}
.static #maincontainer {top:190px}
.static #container {margin-left:0px}
.static .item {width:850px;padding:10px 20px;position:relative!important;}
.static .sharers {display:none; margin:30px;}
.static .big {width:830px!important;height:467px!important}

/* HEADER */

    #header {
    position:fixed;
    z-index:50;$()
    display:block;
    width:100%;
    height:130px;
    background-image:url('{image:Header Background}');
    background-color:#222;
    padding:20px 0;
    font-size:10px;
    }

    #headercontainer {
    position:relative;
    margin:0 auto;
    display:block!important;
    width:910px;
    transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -moz-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    }

    #header, #header a {
    color:#fff;
    letter-spacing:1px;
    text-decoration:none;
    }

    #headerlinks {
    position:relative;
    left:170x;
    }

    #header a {
    font-size:13px;
    }

    #header div, #header a {display:inline-block}

    #logo {
    height:100%;
    margin: 0 20px 0 30px;
    }

/* SIDEBAR */

    #sidebar {
    position: absolute;
    display: none;
    top: 0;
    width: 100px;
    text-align: center;
    margin:0 10px;
    }

    #sidebar h1 {
    font-size:12px;
    font-weight:normal;
    display:block;
    border-bottom:1px solid black;
    }

    #sidebar a {
    display:block;
    color: #5c5959;
    padding-bottom: 2px;
    text-decoration: none;
    text-transform: capitalize;
    padding:3px;
    width:91px;
    margin:10px 0;
    background:#fff;
    text-align:center;
    font-size:11px;
    }

/* POSTS */


    .item a {
    color: {Color:Text Color};
    color: #666;
    font-weight: bold;
    text-decoration: none;
    }

    .item a:hover {color:{Color:Link Underline}}

    .read_more {text-transform:uppercase}

    #notfound {
    display:none;
    margin: 10px 0 0 129px;
    font-style: italic;
    font-size: 20px;
    text-align: center;
    letter-spacing: 1px;
    width: 500px;
    }
    .notfound-404 {
    font-size: 300px;
    font-weight: bold;
    margin: 0 0 10px;
    font-family: arial;
    font-style: normal;
    display: block;
    line-height: 220px;
    letter-spacing: -9px;
    text-align: left;
    }

    #container {
    z-index: 0;
    display: inline-block;
    margin-left: 115px;
    width: 1200px;
    }

    .item {
    overflow:hidden;
    background-color:#fff;
    margin:10px;
    }

    .item img {display:block;min-width:100%;height:100%;width:auto;}
    .item p img {max-width:100%;height:auto}

    .item iframe {width:100%;height:100%;}

    div.js-lazyYT img {width:auto!important;min-width:0px;height:auto;}
    .lazyYT-title {display:none}

    p {margin:5px}

    .s {
    width:240px;
    height:200px;
    }
    .s .media {height:173px}

    .m {
    width: 500px;
    height:420px;
    }
    .m .media {height:392px}

    .text {padding:10px 0}
    .s.text, .m.text {overflow-y:auto}
    .s.text {height:180px}
    .m.text {height:400px}

    .l {width:1020px}
    .l.video iframe {height: 574px}

    .l img, .autoheight, .autoheight .media, .autoheight .media img {
    height:auto!important;
    min-height:0px;
    }

    .autoheight.nocaption .media {
    width:100%;
    height:auto;
    }

    .autoheight.nocaption .media img {
    width: 100%;
    margin: -5px 0;
    }

    .nocaption .media {height:100%}

    .nocaption img {
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    height:auto;
    }

    /*.nocaption.s img, .nocaption.m img {min-height: 100%}*/

    .nocaption iframe {
    height: 106%;
    margin-top: -3%;
    display:block;
    }

    h1 {font-size:14px}

    .media {
    position:relative;
    width:100%;
    overflow:hidden;
    }

    .caption {
    position:relative;
    display:block;
    padding:0 10px;
    }

    .audio .media {height:100%}

    .audio .player-wrapper {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -20px!important;
    width: 40px;
    height: 40px;
    overflow: hidden;
    }

    .audio_player {
    display: block;
    width: 250px;
    height: 50px;
    margin:-5px!important;
    }

    .audio_player iframe {position:relative}

    .player-wrapper {z-index:70}

    .audioinfo {
    opacity:0;
    position: absolute;
    z-index: 50;
    top: 0;
    left: 0;
    padding: 15px 0;
    text-align: center;
    font-weight: bold;
    width: 100%;
    height: 100%;
    color: whitesmoke;
    background: black;
    }

    .audio:hover .audioinfo {opacity:1}

/* SHARES */

.sharers {
width: 88px;
border-top: 1px dashed black;
padding-top: 10px;
padding-bottom:50px;
text-align: center;
margin:30px 0 0 120px;
}

.sharers span {
width: 20px!important;
height: 20px!important;
background-size: 20px;
margin: 2px;
}

.stButton .stLarge:hover {
opacity: 1!important;
background-position: 0!important;
cursor:pointer;
padding-right:0px;
}

/* LIKE REBLOG */

.likereblog {display:none}
.like .likereblog {display:block}

.likereblog {padding:0px 10px 5px}
.likereblog * {
display:inline-block!important;
border-bottom:none!important;
width:15px!important;
height:15px!important;
}
.likereblog a:hover {background-color:transparent}
.likereblog svg {margin-left:10px; fill:#000}

.audio .likereblog, .nocaption .likereblog {position: absolute;z-index: 9999;}
.nocaption .likereblog, .audio .likereblog {bottom:0px}

.nocaption .likereblog svg {fill:#fff}
.nocaption .likereblog iframe {-webkit-filter:invert(1)}

/* PAGES */

.item.fieldnotes p img, .item.fieldnotes p iframe {
    width:auto!important;
    display:block;
    margin:0 auto;
}

</style>    

    </head>

<!-- BODY -->

<body>

<!-- MASONRY SCRIPT -->
<script>

 $(function(){

    // IF NOT FIELD NOTES PAGE  
    if (!$('.item').hasClass('fieldnotes')) {

        // UNWRAP TITLE LINKS
        $('.item .title h1').unwrap();

        // MASONRY
        var $container = $('#container');

        $container.imagesLoaded( function(){
             $container.masonry({
                columnWidth: 1,
                isOriginTop: true,
                itemSelector : '.item'
             });
        });

    }

 });
</script>

<!-- SITE CREDIT -->
<div id="sitecredit"><a href="http://dinakelbermanwebdesign.com" target="blank">
<img src="http://dinakelbermanwebdesign.com/credit.png"></a>
</div>


<!-- HEADER -->
<div id="header">
    <div id="headercontainer">
    <span id="headerwrap">
    <a href="http://folkherofilms.tumblr.com/index"><img id="logo" src="{image:Logo}"></a>

    <div id="headerlinks">
    <a href="/about">Who We Are</a> &#9679;   
    <!--a href="/tagged/portfolio">Portfolio</a> &#9679;-->
    <a href="/fieldnotes">Field Notes</a> &#9679;
    <a href="/contact">Contact</a> &#9679;
    <a href="http://folkherofilms.tumblr.com/index">Home</a>
    </div>
<!--------------------------------------------------------------------->

    </span>
    </div>   
</div>


<div id="maincontainer">

<!-- SIDEBAR -->
<div id="sidebar">
<h1>MORE PROJECTS</h1>
{block:HasPages}
{block:Pages}
<a href="{URL}">{Label}</a>
{/block:Pages}
{/block:HasPages}    

</div>

<div id="notfound"><span class="notfound-404">404</span>Page not found, please try again!</div>

<div id="container">

{block:Posts}

<!-- TEXT -->

{block:Text}
<div class="item text {TagsAsClasses}">

    <div class="caption">
    {block:Title}
    <a href="{Permalink}" class="title"><h1>{Title}</h1></a>
    {/block:Title}
    {Body}

    <div class="hide">
    {block:ContentSource}{SourceURL}{/block:ContentSource}
    </div>

    </div>

<div class="likereblog">{LikeButton color="black"}{ReblogButton}</div>
</div>
{/block:Text}

<!-- PHOTO -->

{block:Photo}
<div class="item {TagsAsClasses} photo">

    <div class="media"><img src="{PhotoURL-500}"></div>

    {block:Caption}
    <div class="caption entry">
    {Caption}
    </div>
    {/block:Caption}


<div class="likereblog">{LikeButton color="black"}{ReblogButton}</div>
</div>

    <div class="hide">
    {block:ContentSource}{SourceURL}{/block:ContentSource}
    </div>
{/block:Photo}


<!-- PANORAMA -->                                                       

{block:Panorama}
    <li class="panorama">
        {LinkOpenTag}
            <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
        {LinkCloseTag}{block:Caption}
            <div class="caption">{Caption}</div>
        {/block:Caption}


<div class="likereblog">{LikeButton color="black"}{ReblogButton}</div>
    </li>

        <div class="hide">
    {block:ContentSource}{SourceURL}{/block:ContentSource}
    </div>
{/block:Panorama}


<!-- PHOTOSET -->

{block:Photoset}
<div class="item {TagsAsClasses}">
<div class="media-photoset">
<div class="lightbox photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
{block:Photos}

<div class="photo-data">
  <div class="pxu-photo">
     <a class="tumblr-box" rel="post is-item-{PostID}" href="{PhotoURL-HighRes}">
          <img alt="{PhotoAlt}" src="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" class="{block:Exif}exif-yes {/block:Exif}{block:Caption}caption-yes{/block:Caption}" {block:Exif}data-camera="{block:Camera}{Camera}{/block:Camera}" data-iso="{block:ISO}{ISO}{/block:ISO}" data-aperture="{block:Aperture}{Aperture}{/block:Aperture}" data-exposure="{block:Exposure}{Exposure}{/block:Exposure}" data-focal="{block:FocalLength}{FocalLength}{/block:FocalLength}"{/block:Exif} {block:Caption}data-caption="{Caption}"{/block:Caption}>
    </a>
  </div>
  <div class="icons">
     <span class="info">
        Info
     </span>
  </div>
</div>
{/block:Photos}
</div>
</div>
{block:Caption}
<div class="background unrounded">
<div class="entry caption">
{Caption}

</div>
</div>
{/block:Caption}
{block:IfTags}
{block:HasTags} 
<div class="background unrounded tags clearfix">
{block:Tags} 
    <a href="{TagURL}">
        <div class="tag">{Tag}</div>
    </a>
{/block:Tags}   
</div>
{/block:HasTags}
{/block:IfTags}
<div class="meta">
<div class="part">
<a href="{Permalink}" title="Permalink">
{TimeAgo}
</a>
</div>
<div class="part heart">
<a href="{Permalink}" title="Permalink">
<i class="icon-heart"></i>
<div class="text heart"><div class="note-counter">{NoteCount}</div></div>
</a>
</div>
</div>
</div>
    <div class="hide">
    {block:ContentSource}{SourceURL}{/block:ContentSource}
    </div>
{/block:Photoset}


<!-- VIDEO -->

{block:Video}
<div class="item video {TagsAsClasses}">

<div class="media">{VideoEmbed-700}</div>

{block:Caption}
<div class="caption entry">
{Caption}
</div>
{/block:Caption}

<div class="likereblog">{LikeButton color="black"}{ReblogButton}</div>

</div>
    <div class="hide">
    {block:ContentSource}{SourceURL}{/block:ContentSource}
    </div>
{/block:Video}


<!-- AUDIO -->

{block:Audio}
<div class="item audio {TagsAsClasses}">

<div class="player">
    {block:AudioPlayer}
    {block:AlbumArt}
        <img src="{AlbumArtURL}" class="albumart">
        <div class="player-wrapper">{AudioPlayerBlack}</div>
    {/block:AlbumArt}
    {/block:AudioPlayer}

    {block:AudioEmbed}
    <div class="background">
        <div class="audioembed">{AudioEmbed-500}</div>
    </div>
    {/block:AudioEmbed}
</div>

{block:Artist}
<div class="audioinfo">
{Artist}<br>
{block:TrackName}{TrackName}{/block:TrackName}
</div>
{/block:Artist}



<div>
    {block:Caption}
    <div class="caption entry">{Caption}</div>
    {/block:Caption}
</div>


<div class="likereblog">{LikeButton color="black"}{ReblogButton}</div>

</div>
    <div class="hide">
    {block:ContentSource}{SourceURL}{/block:ContentSource}
    </div>
{/block:Audio}

{/block:Posts}
</div>  

<div class="sharers">
<span st_url='{Permalink}' st_title='{Title}' class='st_twitter' displayText=''></span><span st_url='{Permalink}' st_title='{Title}' class='st_facebook' displayText=''></span><span st_url='{Permalink}' st_title='{Title}' class='st_email' displayText=''></span>
</div>

<!-- DISQUS -->
<div id="disqus_things">
    {block:IfDisqusShortname}

    <div class="post type-comments m {block:HighRes}l{/block:HighRes}">
    <div class="background fully-rounded">
    <h3 class="title">
    Comments
    </h3>
    <div class="entry comments">
    <script type="text/javascript">
    var disqus_url = "{Permalink}"; var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";
    </script>
    <div id="disqus_thread"></div>
    <script type="text/javascript">
    var disqus_shortname = '{text:Disqus shortname}'; 

    function load_disqus()
    {
    (function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);                                                
    })();
    }


    load_disqus(function() {});

    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

    </div>

    {/block:IfDisqusShortname}                
</div>

<!-- PAGINATION FOR INFINITE SCROLL -->
    <div class="pagination">
    {block:Pagination}
    {block:NextPage}
    <a href="{NextPage}">NEXT</a>
    {/block:NextPage}
    {/block:Pagination}
    </div>    

</div>   


<!-- IMAGE LOAD JS -->
<script type="text/javascript" src="http://static.tumblr.com/cbgnuxd/l2rmz5u6v/imagesloaded.js"></script>

<!-- INFINITE SCROLL -->
<script type="text/javascript" src="http://static.tumblr.com/cbgnuxd/saomz5tvi/jquery.infinitescroll.js"></script>

<!-- INFINITE SCROLL -->
<script type="text/javascript">
(function () {
    var $tumblelog = $('#container');
    $tumblelog.infinitescroll({
        navSelector: ".pagination",
        nextSelector: ".pagination a:last-child",
        itemSelector: ".item",

    loading: {
    finished: undefined,
    finishedMsg: "",
    img: "",
    msg: null,
    loadingText: "<em></em>",
    },

    },

    function (newElements) {
        var $newElems = $(newElements).css({
            opacity: 0
        });
        $newElems.imagesLoaded(function () {
            $newElems.animate({
                opacity: 1
            });

            $('.item:not(:has(.caption))').addClass('nocaption');

            // IF NOT FIELD NOTES PAGE  
             if (!$('.item').hasClass('fieldnotes')) {
                // UNWRAP TITLE LINKS
                $('.item .title h1').unwrap();
            }

            // PORTFOLIO PAGE
            if (document.location.href == "http://folkherofilms.tumblr.com/tagged/portfolio") {
                $('#sidebar, .sharers').css('display','none');
                $('#maincontainer, #headercontainer').css('width','1040px');
                $('#maincontainer').css('top','190px');
                $('#container').css('margin-left','0px');
                $('.item').removeClass('m l autoheight');
                $('.item').addClass('s');
            }

            // FIELD NOTES POSTS
            if ($('.item.fieldnotes').length ) {
                $('body').addClass('static');  
                $('#disqus_things, .sharers').show();
                $('.item').addClass('autoheight');   

            }

            // FIELD NOTES PAGE
            if (document.location.href == "http://folkherofilms.tumblr.com/tagged/fieldnotes") {
                $('body').addClass('static');
                $('.item').removeClass('m s');
                $('.item img').css('width','auto');
                $('#disqus_things, .sharers').hide();
            }

            $tumblelog.masonry('appended', $newElems);
        });
    });
    $tumblelog.imagesLoaded(function () {
        $tumblelog.masonry({
            columnWidth: function (containerWidth) {
                return containerWidth / 100;
            }
        });
    });

})();  

// NOCAPTION POSTS
$('.item:not(:has(.caption))').addClass('nocaption');

</script>

</body>

<script>
$(function(){
    // SITE LOADING
$(window).load(function() {
    $("#maincontainer").css('visibility','visible');
});

})
</script>

</html>

I've tried a variety of solutions and the glitch keeps getting "fixed" but then coming back. Could Tumblr be messing with the JS somehow?

Was it helpful?

Solution

the problem here was that i didn't include the masonry options after the infinite scroll. i.e. my masonry at the top was this:

// MASONRY
        var $container = $('#container');

        $container.imagesLoaded( function(){
             $container.masonry({
                columnWidth: 1,
                isOriginTop: true,
                itemSelector : '.item'
             });
        });

and after the infinite scroll it needed to match:

$tumblelog.imagesLoaded(function () {
    $tumblelog.masonry({
            columnWidth: 1,
            isOriginTop: true,
            itemSelector : '.item'
    });
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top