1

I am attempting to use the infinite scroll scripts located here:

http://iamjustinlong.com/blog/single/implementing_infinite_scroll_in_your_expressionengine_site/

I have followed this pretty much word for word, but it is not working and I am running out of time to get it to work. Below is my code:

SNIPPET:

    <div class="col" id="#blog-container">
        {exp:channel:entries
            channel="blog"
            dynamic="no"
            orderby="date"
            limit="2"
            status="open|tall|regular"
            paginate_base="_embed/ajax_scroll"               
        }

        {if no_results}
            <div class="entry">
                <article style="min-height: 600px;">
                    <header>
                        <h1>No Results</h1>
                    </header>
                    Check back soon for more blog posts. 
                </article>
            </div> <!-- /.entry -->
        {/if}
        <div class="entry">
            <article>
                <header>
                    <p class="meta">
                        <span class="category">{categories}{category_name}{/categories}</span> / <span class="date">{entry_date format="%F %d, %Y"}</span>
                    </p>
                    <h1><a href="{url_title_path='blog/details'}">{title}</a></h1>
                </header>
                <img src="{blog_image}" alt="">
                {blog_excerpt}&nbsp; &nbsp; &nbsp; <a href="{url_title_path='blog/details'}" style="display: inline-block;">read more</a>
            </article>
        </div> <!-- /.entry -->

        {paginate}
        <p class="morePosts">
            {if next_page}<a href="{auto_path}" class="more" id="next">See More Posts</a>{/if}
        </p>
        {/paginate}
        {/exp:channel:entries}
    </div> <!-- /.col -->

BASE CODE:

{snip_ajax_scroll}
    <script type="text/javascript" src="{site_url}assets/js/jquery.infinitescroll.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#blog-container').infinitescroll({
                  navSelector : "p.morePosts",
                  nextSelector : "a.more",
                  itemSelector : ".entry",
                  contentSelector: "#blog-container",
                  extractLink: true // This is crucial if you want it work properly. Setting this to false or excluding it will not allow the script to work with EE
             })

        });


        // Unbind normal behavior
        $(window).unbind('.infscr');

        // Bind normal behavior to the click function and prevent the browser from redirecting to the URL.
        $('a#next').click(function(){
            $(document).trigger('retrieve.infscr');
            return false;
         });

    </script> 

I have used console.log at different parts of the js to see if the scripts are firing and I get a message for all the blocks above except for the click function on a#next. This seems to die.

Let me know if there are any other code items you need and thanks in advance for any help!

1
  • 4
    In your snippet you have <div class="col" id="#blog-container"> you should not have a # as part of a class or id try changing it to <div class="col" id="blog-container"> – Justin Long Jun 25 '13 at 1:42
1

I had everything correct except the # in the ID.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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