Hitskin.com
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
Facebook
Twitter
Pinterest
Youtube
