Overview DescriptionWhen 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.
Demonstration
Technical limitations› This tutorial is dedicated to the forums powered by Forumotion free forum service
› Requires to be the Founder of the #Forumotion Forum
› It works with all Forumotion forums' versions, but phpBB2
Installation IntroductionYou should not use the standard pagination and this tutorial, as this will cause errors in the forum.
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_topicsFind: - 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 StylesheetInsert 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_topicsFind: - 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 StylesheetInsert 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_topicsFind: - 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 StylesheetInsert 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_topicsFind: - 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 StylesheetInsert 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_topicsFind: - 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 StylesheetInsert 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.
Final considerationsFor now, this tutorial is about displaying search results by topic. Displaying search results by posts is in development.
Notes| | Approved by | Tiffany! | | | Approved on | December 7th, 2023 | | | Tested on | Most recent browsers | | | Difficulty level | / | | | Source | Razor12345 |
|
Home
