HomeAutoloading list of topics when scrolling [All versions except phpbb2]
4 posters
Page 1 of 1
![Autoloading list of topics when scrolling [All versions except phpbb2] Empty](https://2img.net/i/empty.gif)
Autoloading list of topics when scrolling [All versions except phpbb2]
by Razor12345 June 6th 2023, 1:28 pm
![Autoloading list of topics when scrolling [All versions except phpbb2] Knewst11](https://servimg.com/r/6413945596/knewst11.png)
Autoloading list of topics when scrolling
Description![Autoloading list of topics when scrolling [All versions except phpbb2] Dialog11](https://servimg.com/r/6413945596/dialog11.png)
You should not use the standard pagination and this tutorial, as this will cause errors in the forum.When the user reaches the end of the list of topics on the page, the next list of topics is automatically downloaded from the next page.
If the user has problems with the Internet connection, he will see a download marker. I made my own loading indicator, but you can also use your own or ready-made indicators on the website loading.io.
Below you will see instructions on how to add autoloading to the list of topics in forum sections and search results.
Autoloading list of topics in forum section
![Autoloading list of topics when scrolling [All versions except phpbb2] Scree160](https://servimg.com/r/1620204341/scree160.png)
![Autoloading list of topics when scrolling [All versions except phpbb2] Scree162](https://servimg.com/r/1620204341/scree162.png)
Phpbb3
- Spoiler:
- 1. AP - General - Messages and emails - Configuration - Topics per page
Remember the value of this field. We'll need it. In my codes, I used "5" for clarity.
2. AP - Display - Templates - General - viewforum_body
Find:- Code:
{PAGINATION}
There are two such codes in the standard template. Delete both of them.
Find:- Code:
{TOPICS_LIST_BOX}
After this code, insert this one:- Code:
<div class='topics-container'></div>
<div class="topics-loader" style="display: none;">
<div class="point1"></div>
<div class="point2"></div>
<div class="point3"></div>
</div>
![Autoloading list of topics when scrolling [All versions except phpbb2] Dialog11](https://i.servimg.com/u/f64/13/94/55/96/dialog11.png)
If you don't want to use my boot indicator or you want to install your own, then paste this code:- Code:
<div class='topics-container'></div>
<div class="topics-loader" style="display: none;">
</div>
At the end of the template, insert the code:- Code:
<script>
let page = 5;
let page2 = 5;
let distance = 400;
let loadData = false;
let address = location.pathname;
let old_elem = '';
let isLastPage = false;
window.addEventListener('scroll', function() {
if (isLastPage) return false;
let indexOfPage = address.indexOf('-');
let container = document.querySelector('.topics-container');
let info = document.documentElement.scrollHeight - (window.pageYOffset + window.innerHeight + distance);
if (!loadData && info < 0) {
document.querySelector('.topics-loader').style.display = 'block';
let modifiedAddres = address.substring(0, indexOfPage) + 'p' + page + address.substring(indexOfPage);
loadData = true;
$.ajax({
url: modifiedAddres,
method: "GET",
data: 'topiclist',
dataType: "html",
success: function (data) {
let div = document.createElement('div');
div.innerHTML = data;
let find_el = div.querySelector('.forumbg.announcement');
if (old_elem !== find_el.innerHTML) {
old_elem = find_el.innerHTML;
if (find_el.querySelector('div.inner ul.topiclist.topics.bg_none li dl dd')) {
container.append(find_el);
} else {
isLastPage = true;
return false;
}
} else {
isLastPage = true;
return false;
}
},
error: function (xhr, status, error) {
console.log("AJAX request error:" + error);
},
complete: function() {
document.querySelector('.topics-loader').style.display = 'none';
page += page2;
loadData = false;
}
});
} else {
return;
}
});
</script>
![Autoloading list of topics when scrolling [All versions except phpbb2] Hand10](https://i.servimg.com/u/f81/11/71/42/99/hand10.gif)
In this code you need to configure three parameters:- Code:
let page = 5;
let page2 = 5;
let distance = 400;
page and page2 - here you need to specify the value you memorized in step 1 of this tutorial.
distance - parameter that affects when data is loaded from other pages. The higher it is, the earlier the data loading will start
Don't forget to save and publish the template. This item is required if you use my download indicator.
3. AP - Display - Colors&CSS - CSS Stylesheet
Insert this code:- Code:
.topics-loader {
margin: 10px auto;
width: 70px;
text-align: center;
}
.topics-loader > div {
width: 18px;
height: 18px;
background-color: blue;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.topics-loader .point1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.topics-loader .point2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
Save.
![Autoloading list of topics when scrolling [All versions except phpbb2] Hand10](https://servimg.com/r/8111714299/hand10.gif)
ModernBB
- Spoiler:
- 1. AP - General - Messages and emails - Configuration - Topics per page
Remember the value of this field. We'll need it. In my codes, I used "5" for clarity.
2. AP - Display - Templates - General - viewforum_body
Find:- Code:
{PAGINATION}
There are two such codes in the standard template. Delete both of them.
Find:- Code:
{TOPICS_LIST_BOX}
After this code, insert this one:- Code:
<div class='topics-container'></div>
<div class="topics-loader" style="display: none;">
<div class="point1"></div>
<div class="point2"></div>
<div class="point3"></div>
</div>
If you don't want to use my boot indicator or you want to install your own, then paste this code:- Code:
<div class='topics-container'></div>
<div class="topics-loader" style="display: none;">
</div>
At the end of the template, insert the code:- Code:
<script>
let page = 5;
let page2 = 5;
let distance = 400;
let loadData = false;
let address = location.pathname;
let old_elem = '';
let isLastPage = false;
window.addEventListener('scroll', function() {
if (isLastPage) return false;
let indexOfPage = address.indexOf('-');
let container = document.querySelector('.topics-container');
let info = document.documentElement.scrollHeight - (window.pageYOffset + window.innerHeight + distance);
if (!loadData && info < 0) {
document.querySelector('.topics-loader').style.display = 'block';
let modifiedAddres = address.substring(0, indexOfPage) + 'p' + page + address.substring(indexOfPage);
loadData = true;
$.ajax({
url: modifiedAddres,
method: "GET",
data: 'topiclist',
dataType: "html",
success: function (data) {
let div = document.createElement('div');
div.innerHTML = data;
let find_el = div.querySelector('.forumbg.announcement');
if (old_elem !== find_el.innerHTML) {
old_elem = find_el.innerHTML;
if (find_el.querySelector('ul.topiclist.topics.bg_none li dl dd')) {
container.append(find_el);
} else {
isLastPage = true;
return false;
}
} else {
isLastPage = true;
return false;
}
},
error: function (xhr, status, error) {
console.log("AJAX request error:" + error);
},
complete: function() {
document.querySelector('.topics-loader').style.display = 'none';
page += page2;
loadData = false;
}
});
} else {
return;
}
});
</script>
In this code you need to configure three parameters:- Code:
let page = 5;
let page2 = 5;
let distance = 600;
page and page2 - here you need to specify the value you memorized in step 1 of this tutorial.
distance - parameter that affects when data is loaded from other pages. The higher it is, the earlier the data loading will start
Don't forget to save and publish the template. This item is required if you use my download indicator.
3. AP - Display - Colors&CSS - CSS Stylesheet
Insert this code:- Code:
.topics-loader {
margin: 10px auto;
width: 70px;
text-align: center;
}
.topics-loader > div {
width: 18px;
height: 18px;
background-color: blue;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.topics-loader .point1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.topics-loader .point2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
Save.
AwesomeBB
- Spoiler:
- 1. AP - General - Messages and emails - Configuration - Topics per page
Remember the value of this field. We'll need it. In my codes, I used "5" for clarity.
2. AP - Display - Templates - General - viewforum_body
Find:- Code:
<div class="pagination">
{PAGINATION}
</div>
There are two such codes in the standard template. Delete both of them.
Find:- Code:
{TOPICS_LIST_BOX}
After this code, insert this one:- Code:
<div class='topics-container'></div>
<div class="topics-loader" style="display: none;">
<div class="point1"></div>
<div class="point2"></div>
<div class="point3"></div>
</div>
If you don't want to use my boot indicator or you want to install your own, then paste this code:- Code:
<div class='topics-container'></div>
<div class="topics-loader" style="display: none;">
</div>
At the end of the template, insert the code:- Code:
<script>
let page = 5;
let page2 = 5;
let distance = 400;
let loadData = false;
let address = location.pathname;
let old_elem = '';
let isLastPage = false;
window.addEventListener('scroll', function() {
if (isLastPage) return false;
let indexOfPage = address.indexOf('-');
let container = document.querySelector('.topics-container');
let info = document.documentElement.scrollHeight - (window.pageYOffset + window.innerHeight + distance);
if (!loadData && info < 0) {
document.querySelector('.topics-loader').style.display = 'block';
let modifiedAddres = address.substring(0, indexOfPage) + 'p' + page + address.substring(indexOfPage);
loadData = true;
$.ajax({
url: modifiedAddres,
method: "GET",
data: 'topiclist',
dataType: "html",
success: function (data) {
let div = document.createElement('div');
div.innerHTML = data;
let find_el = div.querySelector('.posts');
if (old_elem !== find_el.innerHTML) {
old_elem = find_el.innerHTML;
if (find_el.querySelector('div.posts div.posts-section div.posts-content div.posts-description')) {
container.append(find_el);
} else {
isLastPage = true;
return false;
}
} else {
isLastPage = true;
return false;
}
},
error: function (xhr, status, error) {
console.log("AJAX request error:" + error);
},
complete: function() {
document.querySelector('.topics-loader').style.display = 'none';
page += page2;
loadData = false;
}
});
} else {
return;
}
});
</script>
In this code you need to configure three parameters:- Code:
let page = 5;
let page2 = 5;
let distance = 600;
page and page2 - here you need to specify the value you memorized in step 1 of this tutorial.
distance - parameter that affects when data is loaded from other pages. The higher it is, the earlier the data loading will start
Don't forget to save and publish the template. This item is required if you use my download indicator.
3. AP - Display - Colors&CSS - CSS Stylesheet
Insert this code:- Code:
.topics-loader {
margin: 10px auto;
width: 70px;
text-align: center;
}
.topics-loader > div {
width: 18px;
height: 18px;
background-color: blue;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.topics-loader .point1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.topics-loader .point2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
Save.
Invision
- Spoiler:
- 1. AP - General - Messages and emails - Configuration - Topics per page
Remember the value of this field. We'll need it. In my codes, I used "5" for clarity.
2. AP - Display - Templates - General - viewforum_body
Find:- Code:
<div class="pagination topic-options">
{PAGINATION}
</div>
There are two such codes in the standard template. Delete both of them.
Find:- Code:
{TOPICS_LIST_BOX}
After this code, insert this one:- Code:
<div class='topics-container'></div>
<div class="topics-loader" style="display: none;">
<div class="point1"></div>
<div class="point2"></div>
<div class="point3"></div>
</div>
If you don't want to use my boot indicator or you want to install your own, then paste this code:- Code:
<div class='topics-container'></div>
<div class="topics-loader" style="display: none;">
</div>
At the end of the template, insert the code:- Code:
<script>
let page = 5;
let page2 = 5;
let distance = 400;
let loadData = false;
let address = location.pathname;
let old_elem = '';
let isLastPage = false;
window.addEventListener('scroll', function() {
if (isLastPage) return false;
let indexOfPage = address.indexOf('-');
let container = document.querySelector('.topics-container');
let info = document.documentElement.scrollHeight - (window.pageYOffset + window.innerHeight + distance);
if (!loadData && info < 0) {
document.querySelector('.topics-loader').style.display = 'block';
let modifiedAddres = address.substring(0, indexOfPage) + 'p' + page + address.substring(indexOfPage);
loadData = true;
$.ajax({
url: modifiedAddres,
method: "GET",
data: 'topiclist',
dataType: "html",
success: function (data) {
let div = document.createElement('div');
div.innerHTML = data;
let find_el = div.querySelector('table.ipbtable');
if (old_elem !== find_el.innerHTML) {
old_elem = find_el.innerHTML;
if (find_el.querySelector('table.ipbtable tbody tr td img')) {
container.append(find_el);
} else {
isLastPage = true;
return false;
}
} else {
isLastPage = true;
return false;
}
},
error: function (xhr, status, error) {
console.log("AJAX request error:" + error);
},
complete: function() {
document.querySelector('.topics-loader').style.display = 'none';
page += page2;
loadData = false;
}
});
} else {
return;
}
});
</script>
In this code you need to configure three parameters:- Code:
let page = 5;
let page2 = 5;
let distance = 600;
page and page2 - here you need to specify the value you memorized in step 1 of this tutorial.
distance - parameter that affects when data is loaded from other pages. The higher it is, the earlier the data loading will start
Don't forget to save and publish the template. This item is required if you use my download indicator.
3. AP - Display - Colors&CSS - CSS Stylesheet
Insert this code:- Code:
.topics-loader {
margin: 10px auto;
width: 70px;
text-align: center;
}
.topics-loader > div {
width: 18px;
height: 18px;
background-color: blue;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.topics-loader .point1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.topics-loader .point2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
Save.
punBB
- Spoiler:
- 1. AP - General - Messages and emails - Configuration - Topics per page
Remember the value of this field. We'll need it. In my codes, I used "5" for clarity.
2. AP - Display - Templates - General - viewforum_body
Find:- Code:
<p class="paging">{PAGINATION}</p>
There are two such codes in the standard template. Delete both of them.
Find:- Code:
{TOPICS_LIST_BOX}
After this code, insert this one:- Code:
<div class='topics-container'></div>
<div class="topics-loader" style="display: none;">
<div class="point1"></div>
<div class="point2"></div>
<div class="point3"></div>
</div>
If you don't want to use my boot indicator or you want to install your own, then paste this code:- Code:
<div class='topics-container'></div>
<div class="topics-loader" style="display: none;">
</div>
At the end of the template, insert the code:- Code:
<script>
let page = 5;
let page2 = 5;
let distance = 400;
let loadData = false;
let address = location.pathname;
let old_elem = '';
let isLastPage = false;
window.addEventListener('scroll', function() {
if (isLastPage) return false;
let indexOfPage = address.indexOf('-');
let container = document.querySelector('.topics-container');
let info = document.documentElement.scrollHeight - (window.pageYOffset + window.innerHeight + distance);
if (!loadData && info < 0) {
document.querySelector('.topics-loader').style.display = 'block';
let modifiedAddres = address.substring(0, indexOfPage) + 'p' + page + address.substring(indexOfPage);
loadData = true;
$.ajax({
url: modifiedAddres,
method: "GET",
data: 'topiclist',
dataType: "html",
success: function (data) {
let div = document.createElement('div');
div.innerHTML = data;
let find_el = div.querySelector('div.main.paged div.main-content table.table');
if (old_elem !== find_el.innerHTML) {
old_elem = find_el.innerHTML;
if (find_el.querySelector('div.main.paged div.main-content table.table tbody.statused tr td span')) {
container.append(find_el);
} else {
isLastPage = true;
return false;
}
} else {
isLastPage = true;
return false;
}
},
error: function (xhr, status, error) {
console.log("AJAX request error:" + error);
},
complete: function() {
document.querySelector('.topics-loader').style.display = 'none';
page += page2;
loadData = false;
}
});
} else {
return;
}
});
</script>
In this code you need to configure three parameters:- Code:
let page = 5;
let page2 = 5;
let distance = 600;
page and page2 - here you need to specify the value you memorized in step 1 of this tutorial.
distance - parameter that affects when data is loaded from other pages. The higher it is, the earlier the data loading will start
Don't forget to save and publish the template. This item is required if you use my download indicator.
3. AP - Display - Colors&CSS - CSS Stylesheet
Insert this code:- Code:
.topics-loader {
margin: 10px auto;
width: 70px;
text-align: center;
}
.topics-loader > div {
width: 18px;
height: 18px;
background-color: blue;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.topics-loader .point1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.topics-loader .point2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
Save.
If the forum section has Global announcement, Announcement or Sticky, they will be duplicated.![Autoloading list of topics when scrolling [All versions except phpbb2] Scree163](https://servimg.com/r/1620204341/scree163.png)
Autoloading list of topics in search results
![Autoloading list of topics when scrolling [All versions except phpbb2] Filety10](https://servimg.com/r/6214529287/filety10.png)
For now, this tutorial is about displaying search results by topic. Displaying search results by posts is in development.![Autoloading list of topics when scrolling [All versions except phpbb2] Scree164](https://servimg.com/r/1620204341/scree164.png)
![Autoloading list of topics when scrolling [All versions except phpbb2] Scree165](https://servimg.com/r/1620204341/scree165.png)
phpbb3
- Spoiler:
- 1. AP - General - Messages and emails - Configuration - Topics per page
Remember the value of this field. We'll need it. In my codes, I used "5" for clarity.
2. AP - Display - Templates - General - search_results_topics
Find:- Code:
<p class="pagination">{PAGINATION}</p>
Delete this code.
Find:- Code:
<!-- END searchresults -->
</ul>
<div class="clear"></div>
<span class="corners-bottom"><span></span></span>
</div>
</div>
After this code, insert this one:- Code:
<div class='search-topic-container'></div>
<div class="search-topic-loader" style="display: none;">
<div class="point1"></div>
<div class="point2"></div>
<div class="point3"></div>
</div>
If you don't want to use my boot indicator or you want to install your own, then paste this code:- Code:
<div class='search-topic-container'></div>
<div class="search-topic-loader" style="display: none;"></div>
At the end of the template, insert the code:- Code:
<script>
let page = 5;
let page2 = 5;
let distance = 200;
let loadData = false;
let address = location.pathname;
let searchParam = location.search + '&start=';
let old_elem = '';
let isLastPage = false;
window.addEventListener('scroll', function() {
if (isLastPage) return false;
let indexOfPage = searchParam.lastIndexOf('=');
let container = document.querySelector('.search-topic-container');
let info = document.documentElement.scrollHeight - (window.pageYOffset + window.innerHeight + distance);
if (!loadData && info < 0) {
document.querySelector('.search-topic-loader').style.display = 'block';
let modifiedAddres = address + searchParam + page;
loadData = true;
$.ajax({
url: modifiedAddres,
method: "GET",
data: 'topiclist',
dataType: "html",
success: function (data) {
let div = document.createElement('div');
div.innerHTML = data;
let find_el = div.querySelector('.forabg');
if (old_elem !== find_el.innerHTML) {
old_elem = find_el.innerHTML;
container.append(find_el);
} else {
isLastPage = true;
return false;
}
},
error: function (xhr, status, error) {
console.log("AJAX request error:" + error);
},
complete: function() {
document.querySelector('.search-topic-loader').style.display = 'none';
page += page2;
loadData = false;
}
});
} else {
return;
}
});
</script>
In this code you need to configure three parameters:- Code:
let page = 5;
let page2 = 5;
let distance = 200;
page and page2 - here you need to specify the value you memorized in step 1 of this tutorial.
distance - parameter that affects when data is loaded from other pages. The higher it is, the earlier the data loading will start
Don't forget to save and publish the template. This item is required if you use my download indicator.
3. AP - Display - Colors&CSS - CSS Stylesheet
Insert this code:- Code:
.search-topic-loader {
margin: 10px auto;
width: 70px;
text-align: center;
}
.search-topic-loader > div {
width: 18px;
height: 18px;
background-color: blue;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.search-topic-loader .point1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.search-topic-loader .point2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
Save.
ModernBB
- Spoiler:
- 1. AP - General - Messages and emails - Configuration - Topics per page
Remember the value of this field. We'll need it. In my codes, I used "5" for clarity.
2. AP - Display - Templates - General - search_results_topics
Find:- Code:
<p class="pagination">{PAGINATION}</p>
Delete this code.
Find:- Code:
<!-- END searchresults -->
</ul>
</div>
</div>
After this code, insert this one:- Code:
<div class='search-topic-container'></div>
<div class="search-topic-loader" style="display: none;">
<div class="point1"></div>
<div class="point2"></div>
<div class="point3"></div>
</div>
If you don't want to use my boot indicator or you want to install your own, then paste this code:- Code:
<div class='search-topic-container'></div>
<div class="search-topic-loader" style="display: none;"></div>
At the end of the template, insert the code:- Code:
<script>
let page = 5;
let page2 = 5;
let distance = 200;
let loadData = false;
let address = location.pathname;
let searchParam = location.search + '&start=';
let old_elem = '';
let isLastPage = false;
window.addEventListener('scroll', function() {
if (isLastPage) return false;
let indexOfPage = searchParam.lastIndexOf('=');
let container = document.querySelector('.search-topic-container');
let info = document.documentElement.scrollHeight - (window.pageYOffset + window.innerHeight + distance);
if (!loadData && info < 0) {
document.querySelector('.search-topic-loader').style.display = 'block';
let modifiedAddres = address + searchParam + page;
loadData = true;
$.ajax({
url: modifiedAddres,
method: "GET",
data: 'topiclist',
dataType: "html",
success: function (data) {
let div = document.createElement('div');
div.innerHTML = data;
let find_el = div.querySelector('.forabg');
if (old_elem !== find_el.innerHTML) {
old_elem = find_el.innerHTML;
container.append(find_el);
} else {
isLastPage = true;
return false;
}
},
error: function (xhr, status, error) {
console.log("AJAX request error:" + error);
},
complete: function() {
document.querySelector('.search-topic-loader').style.display = 'none';
page += page2;
loadData = false;
}
});
} else {
return;
}
});
</script>
In this code you need to configure three parameters:- Code:
let page = 5;
let page2 = 5;
let distance = 200;
page and page2 - here you need to specify the value you memorized in step 1 of this tutorial.
distance - parameter that affects when data is loaded from other pages. The higher it is, the earlier the data loading will start
Don't forget to save and publish the template. This item is required if you use my download indicator.
3. AP - Display - Colors&CSS - CSS Stylesheet
Insert this code:- Code:
.search-topic-loader {
margin: 10px auto;
width: 70px;
text-align: center;
}
.search-topic-loader > div {
width: 18px;
height: 18px;
background-color: blue;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.search-topic-loader .point1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.search-topic-loader .point2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
Save.
AwesomeBB
- Spoiler:
- 1. AP - General - Messages and emails - Configuration - Topics per page
Remember the value of this field. We'll need it. In my codes, I used "5" for clarity.
2. AP - Display - Templates - General - search_results_topics
Find:- Code:
<div class="pagination">
{PAGINATION}
</div>
There are two such codes in the standard template. Delete both of them.
Find:- Code:
<div class="block-topics-posts">{searchresults.REPLIES} <i class="material-icons">reply_all</i></div>
<div class="block-topics-views">{searchresults.VIEWS} <i class="material-icons">remove_red_eye</i></div>
</div>
</div>
</div>
<!-- END searchresults -->
After this code, insert this one:- Code:
<div class='search-topic-container'></div>
<div class="search-topic-loader" style="display: none;">
<div class="point1"></div>
<div class="point2"></div>
<div class="point3"></div>
</div>
If you don't want to use my boot indicator or you want to install your own, then paste this code:- Code:
<div class='search-topic-container'></div>
<div class="search-topic-loader" style="display: none;"></div>
At the end of the template, insert the code:- Code:
<script>
let page = 5;
let page2 = 5;
let distance = 200;
let loadData = false;
let address = location.pathname;
let searchParam = location.search + '&start=';
let old_elem = '';
let isLastPage = false;
window.addEventListener('scroll', function() {
if (isLastPage) return false;
let indexOfPage = searchParam.lastIndexOf('=');
let container = document.querySelector('.search-topic-container');
let info = document.documentElement.scrollHeight - (window.pageYOffset + window.innerHeight + distance);
if (!loadData && info < 0) {
document.querySelector('.search-topic-loader').style.display = 'block';
let modifiedAddres = address + searchParam + page;
loadData = true;
$.ajax({
url: modifiedAddres,
method: "GET",
data: 'topiclist',
dataType: "html",
success: function (data) {
let div = document.createElement('div');
div.innerHTML = data;
let find_el = div.querySelector('.block.block-topics');
if (old_elem !== find_el.innerHTML) {
old_elem = find_el.innerHTML;
container.append(find_el);
} else {
isLastPage = true;
return false;
}
},
error: function (xhr, status, error) {
console.log("AJAX request error:" + error);
},
complete: function() {
document.querySelector('.search-topic-loader').style.display = 'none';
page += page2;
loadData = false;
}
});
} else {
return;
}
});
</script>
In this code you need to configure three parameters:- Code:
let page = 5;
let page2 = 5;
let distance = 200;
page and page2 - here you need to specify the value you memorized in step 1 of this tutorial.
distance - parameter that affects when data is loaded from other pages. The higher it is, the earlier the data loading will start
Don't forget to save and publish the template. This item is required if you use my download indicator.
3. AP - Display - Colors&CSS - CSS Stylesheet
Insert this code:- Code:
.search-topic-loader {
margin: 10px auto;
width: 70px;
text-align: center;
}
.search-topic-loader > div {
width: 18px;
height: 18px;
background-color: blue;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.search-topic-loader .point1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.search-topic-loader .point2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
Save.
Invision
- Spoiler:
- 1. AP - General - Messages and emails - Configuration - Topics per page
Remember the value of this field. We'll need it. In my codes, I used "5" for clarity.
2. AP - Display - Templates - General - search_results_topics
Find:- Code:
<div class="pagination">
{PAGINATION}
</div>
There are two such codes in the standard template. Delete both of them.
Find:- Code:
<!-- END searchresults -->
After this code, insert this one:- Code:
<div class='search-topic-container'></div>
<div class="search-topic-loader" style="display: none;">
<div class="point1"></div>
<div class="point2"></div>
<div class="point3"></div>
</div>
If you don't want to use my boot indicator or you want to install your own, then paste this code:- Code:
<div class='search-topic-container'></div>
<div class="search-topic-loader" style="display: none;"></div>
At the end of the template, insert the code:- Code:
<script>
let page = 5;
let page2 = 5;
let distance = 200;
let loadData = false;
let address = location.pathname;
let searchParam = location.search + '&start=';
let old_elem = '';
let isLastPage = false;
window.addEventListener('scroll', function() {
if (isLastPage) return false;
let indexOfPage = searchParam.lastIndexOf('=');
let container = document.querySelector('.search-topic-container');
let info = document.documentElement.scrollHeight - (window.pageYOffset + window.innerHeight + distance);
if (!loadData && info < 0) {
document.querySelector('.search-topic-loader').style.display = 'block';
let modifiedAddres = address + searchParam + page;
loadData = true;
$.ajax({
url: modifiedAddres,
method: "GET",
data: 'topiclist',
dataType: "html",
success: function (data) {
let div = document.createElement('div');
div.innerHTML = data;
let find_el = div.querySelector('table.ipbtable.search');
if (old_elem !== find_el.innerHTML) {
old_elem = find_el.innerHTML;
container.append(find_el);
} else {
isLastPage = true;
return false;
}
},
error: function (xhr, status, error) {
console.log("AJAX request error:" + error);
},
complete: function() {
document.querySelector('.search-topic-loader').style.display = 'none';
page += page2;
loadData = false;
}
});
} else {
return;
}
});
</script>
In this code you need to configure three parameters:- Code:
let page = 5;
let page2 = 5;
let distance = 200;
page and page2 - here you need to specify the value you memorized in step 1 of this tutorial.
distance - parameter that affects when data is loaded from other pages. The higher it is, the earlier the data loading will start
Don't forget to save and publish the template. This item is required if you use my download indicator.
3. AP - Display - Colors&CSS - CSS Stylesheet
Insert this code:- Code:
.search-topic-loader {
margin: 10px auto;
width: 70px;
text-align: center;
}
.search-topic-loader > div {
width: 18px;
height: 18px;
background-color: blue;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.search-topic-loader .point1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.search-topic-loader .point2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
Save.
punBB
- Spoiler:
- 1. AP - General - Messages and emails - Configuration - Topics per page
Remember the value of this field. We'll need it. In my codes, I used "5" for clarity.
2. AP - Display - Templates - General - search_results_topics
Find:- Code:
<p class="paging">{PAGINATION}</p>
There are two such codes in the standard template. Delete both of them.
Find:- Code:
<!-- END searchresults -->
</tbody>
</table>
After this code, insert this one:- Code:
<div class='search-topic-container'></div>
<div class="search-topic-loader" style="display: none;">
<div class="point1"></div>
<div class="point2"></div>
<div class="point3"></div>
</div>
If you don't want to use my boot indicator or you want to install your own, then paste this code:- Code:
<div class='search-topic-container'></div>
<div class="search-topic-loader" style="display: none;"></div>
At the end of the template, insert the code:- Code:
<script>
let page = 5;
let page2 = 5;
let distance = 200;
let loadData = false;
let address = location.pathname;
let searchParam = location.search + '&start=';
let old_elem = '';
let isLastPage = false;
window.addEventListener('scroll', function() {
if (isLastPage) return false;
let indexOfPage = searchParam.lastIndexOf('=');
let container = document.querySelector('.search-topic-container');
let info = document.documentElement.scrollHeight - (window.pageYOffset + window.innerHeight + distance);
if (!loadData && info < 0) {
document.querySelector('.search-topic-loader').style.display = 'block';
let modifiedAddres = address + searchParam + page;
loadData = true;
$.ajax({
url: modifiedAddres,
method: "GET",
data: 'topiclist',
dataType: "html",
success: function (data) {
let div = document.createElement('div');
div.innerHTML = data;
let find_el = div.querySelector('table.table');
if (old_elem !== find_el.innerHTML) {
old_elem = find_el.innerHTML;
container.append(find_el);
} else {
isLastPage = true;
return false;
}
},
error: function (xhr, status, error) {
console.log("AJAX request error:" + error);
},
complete: function() {
document.querySelector('.search-topic-loader').style.display = 'none';
page += page2;
loadData = false;
}
});
} else {
return;
}
});
</script>
In this code you need to configure three parameters:- Code:
let page = 5;
let page2 = 5;
let distance = 200;
page and page2 - here you need to specify the value you memorized in step 1 of this tutorial.
distance - parameter that affects when data is loaded from other pages. The higher it is, the earlier the data loading will start
Don't forget to save and publish the template. This item is required if you use my download indicator.
3. AP - Display - Colors&CSS - CSS Stylesheet
Insert this code:- Code:
.search-topic-loader {
margin: 10px auto;
width: 70px;
text-align: center;
}
.search-topic-loader > div {
width: 18px;
height: 18px;
background-color: blue;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.search-topic-loader .point1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.search-topic-loader .point2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
Save.
Razor12345- Support Moderator
-
Posts : 1464
Reputation : 262
Language : Ukr, Rus, Eng
Location : Ukraine
Ape, SLGray, YoshiGM, Niko, SarkZKalie, TonnyKamper, Obscure and كونان2000 like this post
Re: Autoloading list of topics when scrolling [All versions except phpbb2]
by YoshiGM June 6th 2023, 3:51 pm
Ooh, looks very nice.
Thank You Razor :3
Thank You Razor :3
YoshiGM- Active Poster
- Posts : 1501
Reputation : 144
Language : Spanish & English
Location : Mexico -
Razor12345 likes this post
Re: Autoloading list of topics when scrolling [All versions except phpbb2]
by Obscure June 6th 2023, 4:08 pm
Nice idea! Thank you!
Obscure- Forumember
-
Posts : 47
Reputation : 10
Language : English
Location : USA -
Razor12345 likes this post
Re: Autoloading list of topics when scrolling [All versions except phpbb2]
by TonnyKamper June 6th 2023, 6:42 pm
That's awesome @Razor12345
TonnyKamper- Active Poster
- Posts : 1050
Reputation : 78
Language : Dutch/English
Location : DSF Admin -
Razor12345 likes this post
Similar topics» How to load up a forum with topics & stay off the scrolling latest topics list
» Should the scrolling latest topics list on the help forum be extended?
» Scrolling list of the latest topics posted in a chosen subforum
» PHPBB2 | Quick PM List
» Add progress bar for inbox space in all versions (not only in PhpBB2)
» Should the scrolling latest topics list on the help forum be extended?
» Scrolling list of the latest topics posted in a chosen subforum
» PHPBB2 | Quick PM List
» Add progress bar for inbox space in all versions (not only in PhpBB2)
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum![Autoloading list of topics when scrolling [All versions except phpbb2] Fb11](https://i.servimg.com/u/f21/18/21/41/30/fb11.png)
Facebook![Autoloading list of topics when scrolling [All versions except phpbb2] Tw10](https://i.servimg.com/u/f21/18/21/41/30/tw10.png)
Twitter![Autoloading list of topics when scrolling [All versions except phpbb2] Pi10](https://i.servimg.com/u/f21/18/21/41/30/pi10.png)
Pinterest![Autoloading list of topics when scrolling [All versions except phpbb2] Yt10](https://i.servimg.com/u/f21/18/21/41/30/yt10.png)
Youtube
