After implementing Django Endless Pagination with the Twitter Style and Show More option, everything seems to be working smoothly without any issues. I've even included media queries in the HTML render to help visualize the problem more clearly when resizing the window.
For a live view, you can check it out here: http://codepen.io/anon/pen/lrLiG
Here are some screenshots: 1. 2. 3.
My current challenge involves positioning the "SHOW MORE" button consistently at the bottom and centered on all devices - Desktops, Tablets, iOS/Android Devices - regardless of the initial page loading position. Here is a visual representation of what I am aiming for:
The actual styling of the "SHOW MORE" button is not an issue, the difficulty lies in positioning it correctly. While it's easy to move the code snippet:
<div class="endless_container">
<a class="endless_more" href="#">Show More</a>
<div class="endless_loading" style="display: none;">loading...</div>
</div>
outside of the
<div id="product-board">
directly within the HTML, the use of ajax in Django endless pagination prevents me from doing so:
{% load endless %}
{% lazy_paginate photos %}
{% for photo in photos %}
{% load cropping %}
<div class="product large"><a href="/media/{{ photo.main_image }}" data-imagelightbox="e"><img src="{% cropped_thumbnail photo "cropping" %}" alt="" border="0" class="img-responsive"></a></div>
{% endfor %}
{% show_more "Show More" "loading..." %}
and
{% show_more "Show More" "loading..." %}
which dictates that the
<div class="endless_container">
<a class="endless_more" href="#">Show More</a>
<div class="endless_loading" style="display: none;">loading...</div>
</div>
remains nested within another div.
What would be the best approach to address this issue? Should I create two separate templates for ajax in Django pagination that deviate from the standard documentation?
Thank you