CODEWITHSUNDEEP
jqueryhtmlinfinite-scrolljquery-waypoints
Manish Saini
Manish Saini

Reputation: 78

Waypoint infinite scroll not working on 3 column layout

I am using jquery waypoint to achieve infinite scrolling on my website, where i am loading articles on page scroll. But i am having a very strange issue where is the infinite scroll works perfectly on mobile and the screen where my third column is hidden. Or sometimes it works if i start scrolling the page as the page was loading. Please take a look at the layout structure

layout

Please help me sorting this issue with the plugin.

Upvotes: 1

Views: 419

Answers (2)

Jose Razo Prieto
Jose Razo Prieto

Reputation: 11

This is an example of infinite scroll in Django.

Change the row div inside the infinite-container and add the infinite-item class to the row div.

    <div class="container-fluid">
        <div class="infinite-container">
            <div class="row infinite-item">
                {% for post in posts %}
                <div class="col-md-4">
                    <div class="card mb-4 shadow-sm">
                        <img src="{{ post.imagen.url }}" class="card-img-top" alt="{{ post.titulo }}">

                        <div class="card-body">
                            <h5 class="card-title">{{ post.titulo }}</h5>
                            <p class="card-text">{{ post.descripcion|truncatechars_html:50 }}</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <a href="{% url 'blog:detalle' post.pk %}"
                                        class="btn btn-sm btn-outline-primary">Ver
                                        Más</a>
                                    <a href="{% url 'blog:editar' post.pk %}"
                                        class="btn btn-sm btn-outline-secondary">Editar</a>
                                    <a href="#" onclick="eliminarPost({{ post.id }})"
                                        class="btn btn-sm btn-outline-danger">Eliminar</a>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end mt-4">
                                <small class="text-muted">{{ post.created|timesince }}</small>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    {% if posts.has_next %}
    <a class="infinite-more-link" href="?page={{ posts.next_page_number }}">Ver Más</a>
    {% endif %}

Upvotes: 0

adrian oviedo
adrian oviedo

Reputation: 684

I've faced the same weird issue. Previously my html markup was this way

<div class="container-fluid">
   <div class="infinite-container"> 
     <div class="col-md-6 col-lg-4 infinite-item">
       ...
     </div>
     <div class="col-md-6 col-lg-4 infinite-item">
       ...
     </div>
     ... 
   </div>
</div>

I've removed the infinite-item class from there and put it in a div.row:

<div class="container-fluid">
   <div class="infinite-container"> 
     <div class="row infinite-item">
       <div class="col-md-6 col-lg-4">
          ...
       </div>
       <div class="col-md-6 col-lg-4">
          ...
       </div>
       ... 
    </div>
   </div>
</div>

I hope this can help you

Upvotes: 0

Related Questions