Home
Preview the forum threads list in a thread
2 posters
Page 1 of 1
Preview the forum threads list in a thread
by mSyx December 12th 2021, 9:47 pm
Hey there,
Here's a way to list all the current subforum threads in a block after clicking on an icon without leaving a thread.
Previews:
-> 
Although my JS knowledges are very limited, let me know if there's any (realistically feasible) feature you'd like to see implemented. Also, I'll be adding the codes for other forum versions soon on request only.
Here's a way to list all the current subforum threads in a block after clicking on an icon without leaving a thread.
Previews:
-> - ModernBB:
ModernBB
In the viewtopic_body template, find this part:- Code:
<h1 class="page-title">
<a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
</h1>
Replace it with:- Code:
<h1 class="page-title">
<div class="topic-list-button"><img src="https://i.imgur.com/XNUHwwq.png" alt="Show the thread list" title="Show the thread list" /></div>
<div class="topic-list" style="display: none;"></div>
<a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
</h1>
At the end of the same template, add the following code:- Code:
<script type="text/javascript">
$('.topic-list-button').on('click', function() {
var $tl = $('.topic-list');
if ($tl.is(':hidden')) {
$tl.load('/f{FORUM_ID}- ul.topiclist.topics.bg_none', function() {
$tl.fadeIn('150');
});
}
});
$(document).mouseup(function(e) {
var $tl = $('.topic-list');
if (!$tl.is(e.target) && $tl.has(e.target).length === 0) {
$tl.fadeOut('150'); }
});
</script>
<style>* {scroll-behavior: smooth;}</style>
Finally, add the following code to your CSS (stylesheet):- Code:
.topic-list-button {
display: inline-block;
margin-right: 15px;
cursor: pointer;
}
.topic-list-button img {
width: 18pt;
}
.topic-list {
position: absolute;
z-index: 999;
left: 0;
top: 50px;
width: 55vw;
background-color: white;
box-shadow: 0 0 20px #32323225, 0 0 0 500vw #10101030;
}
h1.page-title {
position: relative;
}
- phpBB2:
phpBB2
In the viewtopic_body template, find this part:- Code:
<td align="center" class="t-title">
<h1 class="cattitle"> {TOPIC_TITLE}</h1>
</td>
Replace it with:- Code:
<td align="center" class="t-title">
<div class="topic-list-button"><img src="https://i.imgur.com/XNUHwwq.png" alt="Show the thread list" title="Show the thread list" /></div>
<div class="topic-list" style="display: none;"></div>
<a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
</td>
At the end of the same template, add the following code:- Code:
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script type="text/javascript">
$('.topic-list-button').on('click', function() {
var $tl = $('.topic-list');
if ($tl.is(':hidden')) {
$tl.load('/f{FORUM_ID}- .qlthreads', function() {
$tl.fadeIn('150');
});
}
});
$(document).mouseup(function(e) {
var $tl = $('.topic-list');
if (!$tl.is(e.target) && $tl.has(e.target).length === 0) {
$tl.fadeOut('150'); }
});
</script>
In the topics_list_box template, find this part:- Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap"> {topics_list_box.row.L_TITLE} </th>
Replace it with:- Code:
<table class="forumline qlthreads" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap"> {topics_list_box.row.L_TITLE} </th>
Finally, add the following code to your CSS (stylesheet):- Code:
.quicklist_bs {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: .75;
z-index: 998;
}
.quicklist {
display: none;
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: 55vw;
background-color: white;
z-index: 999;
box-shadow: 0 0 30px #30303050;
}
.topic-list-button {
display: inline-block;
margin-right: 15px;
cursor: pointer;
}
.topic-list-button img {
width: 18pt;
}
.topic-list {
position: absolute;
z-index: 999;
left: 0;
top: 50px;
width: 55vw;
background-color: white;
box-shadow: 0 0 20px #32323225, 0 0 0 500vw #10101030;
}
.topic-list-button, .topic-list-button + div + a {
vertical-align: middle;
}
.t-title {
position: relative;
}
Although my JS knowledges are very limited, let me know if there's any (realistically feasible) feature you'd like to see implemented. Also, I'll be adding the codes for other forum versions soon on request only.
Last edited by mSyx on March 6th 2022, 3:56 pm; edited 1 time in total
mSyx- Forumember
-
Posts : 155
Reputation : 47
Language : French & English
Location : France -
skouliki, SarkZKalie and TonnyKamper like this post
Re: Preview the forum threads list in a thread
by SarkZKalie February 17th 2022, 9:08 pm
Hi, will this project support for other forum versions?
Keep up the good work, mister
Keep up the good work, mister
SarkZKalie- Support Moderator
- Posts : 1390
Reputation : 217
Language : English -
TonnyKamper likes this post
Re: Preview the forum threads list in a thread
by mSyx March 6th 2022, 3:56 pm
Hey there,
Just added the phpbb2 version.
Just added the phpbb2 version.
mSyx- Forumember
- Posts : 155
Reputation : 47
Language : French & English
Location : France -
skouliki and TonnyKamper like this post
Similar topics» Is there a way to set a preview function for each new thread in a forum?
» Threads are visible only for registered users (not visible for guest)
» thread preview when you hover the mouse over the thread title , can we do it ?
» Simple First Thread Post Preview
» Thread preview
» Threads are visible only for registered users (not visible for guest)
» thread preview when you hover the mouse over the thread title , can we do it ?
» Simple First Thread Post Preview
» Thread preview
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
