HomePreview the forum threads list in a thread
2 posters
Page 1 of 1
Preview the forum threads list in a thread
by mSyx December 13th 2021, 10:32 am
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 7th 2022, 4:41 am; 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 18th 2022, 9:53 am
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 : 1442
Reputation : 220
Language : English -
TonnyKamper likes this post
Re: Preview the forum threads list in a thread
by mSyx March 7th 2022, 4:41 am
Hey there,
Just added the phpbb2 version.
Just added the phpbb2 version.
mSyx- Forumember
- Posts : 155
Reputation : 47
Language : French & English
Location : France -
skouliki, Sir Chivas™ and TonnyKamper like this post
Similar topics» 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
» Link image preview meta tag for each thread
» How do I make threads that doesn't show the thread maker?
» thread preview when you hover the mouse over the thread title , can we do it ?
» Simple First Thread Post Preview
» Link image preview meta tag for each thread
» How do I make threads that doesn't show the thread maker?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
