3

I'm attempting to create a tumblr theme and I'm using the masonry and infinite scroll plugins for jquery. the masonry is working just fine. however, i cannot get the infinite scroll to work at all. here's my jQuery code:

<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../masonry.js"></script>
<script type="text/javascript" src="../jquery.infinitescroll.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('#content').imagesLoaded(function(){
$('#content').masonry({
itemSelector: '.post',
columnWidth: 260});
});
$('#content').infinitescroll({
    navSelector  : '#nav',
    nextSelector : '#nav a',
    itemSelector : '#content div.post',          
    },
    function( newElements ) {
    var $newElems = $( newElements );
    $('#content').masonry( 'appended', $newElems, function(){$newElems.fadeIn('slow');}   );
  });
});
</script>

and this is my HTML:

 <div id="content">
   {block:Posts}
   {block:Photo}
<div class="post">
<img src="{PhotoURL-250}" width="250" />
</div>
   {/block:Photo}
   {/block:Posts}
 {block:Pagination}
<div id="nav">{block:NextPage}<a href="{NextPage}"></a>{/block:NextPage}</div>
 {/block:Pagination}

Any help is greatly appreciated. thanks in advance.

*I would also like to note that the i shortened the URLs to the js files on purpose just to make the post look better, on my actual theme the URLs are correct.

This is what the console displayed after i added a debug (To be honest i don't really know what it means but hopefully it helps)

Testing console
["determinePath", 
Array[2]
0: "/page/"
1: ""
length: 2
__proto__: Array[0]
] jquery.infinitescroll.js:171
["Binding", "bind"] jquery.infinitescroll.js:171
["math:", 77, 644] jquery.infinitescroll.js:171
["heading into ajax", 
Array[2]
0: "/page/"
1: ""
length: 2
__proto__: Array[0]
] jquery.infinitescroll.js:171
["Using HTML via .load() method"] jquery.infinitescroll.js:171
["contentSelector", 
<div id=​"content" style=​"position:​ relative;​ height:​ 689px;​ " class=​"masonry">​…​</div>​
] jquery.infinitescroll.js:171
["math:", 292, 644] jquery.infinitescroll.js:171
["heading into ajax", 
Array[2]
] jquery.infinitescroll.js:171
["Using HTML via .load() method"] jquery.infinitescroll.js:171
["Error", "end"] jquery.infinitescroll.js:171
["Binding", "unbind"]
Vladimir Starkov
  • 19,264
  • 8
  • 60
  • 114
carizard
  • 43
  • 1
  • 5
  • Hi carizard, consider adding debugger output and error messages you may have seen from your debugger. That would help the community more easily guide you to a good solution. Good luck! – jamesmortensen May 23 '12 at 01:03
  • Okay the infinite scroll works when I have the console open but not when the console isn't open. any idea why this happens? i'm also going to add everything that's displayed in the console to my post. – carizard May 23 '12 at 01:42
  • What browser? It sounds like there may be some console statements in your code somewhere, and when your console is closed, the console statements are undefined. Happens a lot in Internet Explorer. – jamesmortensen May 23 '12 at 02:00
  • I'm using chrome. I've fixed the issue though, thank you for your help. – carizard May 23 '12 at 23:28

1 Answers1

5

Some browsers are notorious for supporting only a subset of window.console or even not at all. Some browsers support only console.info, while others support info, debug, log, warn, error, and possibly others.

In the jquery.infinitescroll.js file, on or near line 171, you'll find the following code:

    // Console log wrapper
    _debug: function infscr_debug() {

        if (this.options && this.options.debug) {
            return window.console && console.log.call(console, arguments);
        }

    },

In Internet Explorer, the console method is sometimes not defined unless the Developer Tools and/or Script Debugger features are enabled; thus, a Web application that runs perfectly fine on a developer's computer may fail miserably when used on a production computer where Developer Tools and/or the Script Debugger are disabled.

Your first instinct as a developer may be to remove the console statements from your code -- or the code of whatever libraries you're using that use console.log. Worse yet, you may be tempted to avoid console statements algoether and use alerts instead.

Since console.log statements are very valuable to the troubleshooting and debugging process, one technique that you can use to ensure that console statements don't interfere with production code is to include a default definition for the console object on all of your web pages where this problem occurs:

This JavaScript, when included in the <head> section of your pages, will define window.console and it's methods as empty functions, if it detect that they haven't been defined.

<script type="text/javascript"> 
// override loggers to avoid throwing errors
if(window.console == null || window.console == undefined || !window.console) {
           console = { log: function() {}, info: function() {}, warn: function() {}, error: function() {}, trace: function() {}, debug: function() {} };
           //var fbscript = document.createElement("script");
           //fbscript.src = "https://getfirebug.com/firebug-lite-beta.js";
           //fbscript.setAttribute("type","text/javascript");
           //document.getElementsByTagName("head")[0].appendChild(fbscript);
} else if(!console.debug) {
         console.debug = function(text) { if(console.log) console.log("D: "+text); };
}
</script>

In addition, there are 4 lines of commented JavaScript that, when uncommented, will load Firebug Lite in whatever browser you're working with, if window.console is null or not defined.

Alternatively, you could check to make sure that you don't have debugging turned on in the options section of the jQuery Infinite scrolling plugin itself:

     debug        : true,                        
             // enable debug messaging ( to console.log )

Ideally, this would probably be a better solution, but I prefer the former since I know it helps me avoid the trap of not testing in browsers with no debuggers.

See the jQuery Ininite Scroll documentation, specifically, the options section, for more details.

jamesmortensen
  • 33,636
  • 11
  • 99
  • 120