Hi Ivor,

From what I've read, I reckon all you need is some paging system in your macro (so it only shows x many items at a time) then just create an alternative template that retuns just the content. Then when you're JS requests the next page, it just gets the content for the page (minus the surround) and drops it in the container.

I did something similar on this site:

http://www.todd-white-art.com/art/editions.aspx

Not infinate scrolling, but similar idea, when you click the paging links, it loads the content dynamically rather than moving away.

Not a solid answer to your problem, but hopefully gives you a starting point, and by all means rip any source you need from that site.

Matt

HI Matt,

Thanks for the reply, your link you posted doesn't work though.

It works if you change .co.uk to .com

http://www.todd-white-art.com/art/editions.aspx

(nice work matt, is that search XSLT or Examine?)

Rich

Ooops, my bad, you are right, it's .com not .co.uk (I've updated the link in my original post).

@Rich - It's just XSLT based as it's Umbraco 4.0.x

Matt

@Rich thanks for that :P

@Matt, I like what you are doing there, however i dont want actually want pagination, The idea is that the user only needs to scroll to load up the next item. I'll have a play with your example and try modify it to fit my needs.

Hi Ivor,

Infinate paging though isn't that different to what I've done, the only thing different is that you don't get rid of the previous set of results. The logic and everything else behind it should be exactly the same.

1) Hit page show 10 results
2) Scroll to bottom, trigger load (essentialy like clicking the next button on my paging example), load next 10 results and append to bottom
3) Scroll to bottom, repeat previous step

Matt

Hi Matt,

This is how far I've got with the xslt. I got it from an old blogpost from www.nibble.be

<xsl:template match="/">
 <!--
        =============================================================
        VARIABLES
        =============================================================
        -->
        <xsl:variable name="recordsPerPage" select="1"/>
        <xsl:variable name="pageNumber">
            <xsl:choose>
                <xsl:when test="umbraco.library:RequestQueryString('page') &lt;= 1 or string(umbraco.library:RequestQueryString('page')) = '' or string(umbraco.library:RequestQueryString('page')) = 'NaN'">1</xsl:when>
                <xsl:otherwise>
                    <xsl:value-of select="umbraco.library:RequestQueryString('page')"/>
                </xsl:otherwise>
            </xsl:choose>
        </xsl:variable>
        <xsl:variable name="numberOfRecords" select="count($currentPage/* [@isDoc])"/>

  <!--
            =============================================================
            For Each child node of the currentpage
            =============================================================
            -->
            <xsl:for-each select="$currentPage/* [name() = $documentTypeAlias and string(umbracoNaviHide) != '1']">
                <xsl:if test="position() &gt; $recordsPerPage * number($pageNumber - 1) and position() &lt;= number($recordsPerPage * number($pageNumber - 1) + $recordsPerPage )">
                   
<article class="portfolio-item clearfix">
      <ul>
        <li>
    <img src="img/portfolio-temp.png" alt="icon" width="1060" height="346" border="0" />
        </li>
      </ul>
      <section class="column colWidth700">
        <h2 ><xsl:value-of select="workTitle"/></h2>
       <xsl:value-of select="workText" disable-output-escaping="yes" />
 
      </section>
      <section class="column colWidth280 fR portfolio">
        <h3>Services</h3>
        <xsl:value-of select="workServices" disable-output-escaping="yes"/>
        
        <a href="{umbraco.library:NiceUrl(@id)}" class="btn fR"><xsl:value-of select="workLinkText" disable-output-escaping="yes"/></a>
       
      </section>
      </article>  
  
      </xsl:if>
            </xsl:for-each>

        <xsl:if test="(($pageNumber) * $recordsPerPage) &lt; ($numberOfRecords)">
            <p class='loadMore'>Load more <a id="next" href="{umbraco.library:NiceUrl(@id)}">next page?</a></p>
        </xsl:if>
</xsl:template>

How ever i just can't get it it to show any items on the page, any ideas?[sorry i'm still a toddler when it comes to xslt]

Hi Ivor,

Did you manage to make this work? I am now trying to do something similar with using Paul Irish's infinite scroll and showcasing some elements on scroll out of an alternative template. Unfortunatelly, it doesn't seem to be able to pass my URL.

I'd love to hear if you've found a solution for your situation.

Hi Julia.

If you have a solution about this(Lazy Loading), can you share with us? Thanks best regards.

is working on a reply...