0

I'm trying to do an infinite scrolling in my template made with Material Design Lite. I've got an X number of MDL cards inside mdl-layout__container, three cards per row, three rows shown at first when the page is loaded. So when I click a button, then three more rows with three cards per row should be added to the page and then no need to click again the button to continue with the infinite scrolling for the next rows. It means just one click to start the infinite scrolling on mdl-layout__container.

My first thought was to add a new "extra" div below the mdl-layout__content to load every new row, but I don't know If It's the best way to do this.

Here's my main class with 3x3 grid:

<main class="mdl-layout__content mdl-color--grey-100">
    <div class="mdl-grid walla-content">
    <!-- START Bucle to load every card, hand made by now -->
      <div class="walla-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing" id="1">
        <div class="walla-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
         <figure class="mdl-card__media">
            <img src="images/chairs.jpg" alt="" />
         </figure>
          <div class="mdl-card__title mdl-card--expand mdl-color--teal-300">
            <h2 class="mdl-card__title-text">Article 1</h2>
          </div>
          <div class="mdl-card__supporting-text mdl-color-text--grey-600">
            Little description
          </div>
          <div class="mdl-card__actions mdl-card--border">
            <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">See more</a>
          </div>
        </div>
        <div class="walla-separator mdl-cell--1-col"></div>

      </div>
    <!--  Bucle to load every card, handmade by now END -->
      <!--  Delete when proof concept finishes -->
       <div class="walla-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing" id="2">
        <div class="walla-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
         <figure class="mdl-card__media">
            <img src="images/chairs.jpg" alt="" />
         </figure>
          <div class="mdl-card__title mdl-card--expand mdl-color--teal-300">
            <h2 class="mdl-card__title-text">Article 1</h2>
          </div>
          <div class="mdl-card__supporting-text mdl-color-text--grey-600">
            Little description
          </div>
          <div class="mdl-card__actions mdl-card--border">
            <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">See more</a>
          </div>
        </div>
        <div class="walla-separator mdl-cell--1-col"></div>
      </div>

      <div class="walla-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing" id="3">
        <div class="walla-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
         <figure class="mdl-card__media">
            <img src="images/chairs.jpg" alt="" />
         </figure>
          <div class="mdl-card__title mdl-card--expand mdl-color--teal-300">
            <h2 class="mdl-card__title-text">Article 1</h2>
          </div>
          <div class="mdl-card__supporting-text mdl-color-text--grey-600">
            Little description
          </div>
          <div class="mdl-card__actions mdl-card--border">
            <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">See more</a>
          </div>
        </div>
        <div class="walla-separator mdl-cell--1-col"></div>
      </div>

         <div class="walla-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing" id="4">
        <div class="walla-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
         <figure class="mdl-card__media">
            <img src="images/chairs.jpg" alt="" />
         </figure>
          <div class="mdl-card__title mdl-card--expand mdl-color--teal-300">
            <h2 class="mdl-card__title-text">Article 1</h2>
          </div>
          <div class="mdl-card__supporting-text mdl-color-text--grey-600">
            Little description
          </div>
          <div class="mdl-card__actions mdl-card--border">
            <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">See more</a>
          </div>
        </div>
        <div class="walla-separator mdl-cell--1-col"></div>
      </div>

         <div class="walla-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing" id="5">
        <div class="walla-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
         <figure class="mdl-card__media">
            <img src="images/chairs.jpg" alt="" />
         </figure>
          <div class="mdl-card__title mdl-card--expand mdl-color--teal-300">
            <h2 class="mdl-card__title-text">Article 1</h2>
          </div>
          <div class="mdl-card__supporting-text mdl-color-text--grey-600">
            Little description
          </div>
          <div class="mdl-card__actions mdl-card--border">
            <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">See more</a>
          </div>
        </div>
        <div class="walla-separator mdl-cell--1-col"></div>
      </div>

         <div class="walla-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing" id="6">
        <div class="walla-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
         <figure class="mdl-card__media">
            <img src="images/chairs.jpg" alt="" />
         </figure>
          <div class="mdl-card__title mdl-card--expand mdl-color--teal-300">
            <h2 class="mdl-card__title-text">Article 1</h2>
          </div>
          <div class="mdl-card__supporting-text mdl-color-text--grey-600">
            Little description
          </div>
          <div class="mdl-card__actions mdl-card--border">
            <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">See more</a>
          </div>
        </div>
        <div class="walla-separator mdl-cell--1-col"></div>
      </div>

      <div id="extra"></div>


    </div>
  </main>

<a href="#" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored mdl-color-text--white">Load More button</a>

And my attempt to add the next rows to the "extra" div:

$("#view-source").click(function () {
   $("#extra").append("New div rows");
 });
JBoY
  • 51
  • 3
  • 13
  • When you say *"and then no need to click again the button to continue with the infinite scrolling for the next rows."* you mean that once clicked every card you have in the server (let's say you have 1000) will be loaded at once? – Alvaro Dec 20 '16 at 09:20
  • Thank you @Alvaro . I'm sorry I can't explain this very well. Once clicked then six more cards should be loaded (two rows) and without the need to click again the button every time the user scrolls the page down the next six cards should be loaded, and so on – JBoY Dec 20 '16 at 09:38
  • No problem! I think this question would be more suited for [UX Stackexchange](https://ux.stackexchange.com/) if what you are looking for is the rationale behind (and not the code implementation) and if it could be done differently (clicking+scroll). – Alvaro Dec 20 '16 at 09:38

1 Answers1

0

Probably it is cleaner to keep the new elements in the same level as the older ones.

You could also include each "page" in a unique div with its own id. This way you have a reference to the page so the Browser address can change when the page is reached. This can be used to make a better experience when using infinite scrolling.

Alvaro
  • 9,247
  • 8
  • 49
  • 76
  • Gracias Alvaro :) I'm trying something like that but seems like mld-layout__container is not receptive to some infinite scrolling code I've tried. It's not the trivial thing that I thought it would be. – JBoY Dec 20 '16 at 10:31