The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Thread navigation with messages listing

2 posters

Go down

Thread navigation with messages listing Empty Thread navigation with messages listing

Post by mSyx December 12th 2021, 3:46 pm

Hey there,
Here's a way to list all the current page messages in a block and allow users to navigate through them easily.

Previews:
Thread navigation with messages listing GvWBLe2 -> Thread navigation with messages listing 7TWLxCd

CSS

The following CSS is common to every versions. Refer to the version of your forum below for the adequate template modifications.
Code:
postnav.container {
    background-color: white;
    position: fixed;
    right: 0;
    top: 30vh;
    width: 20vw;
    z-index: 999;
    height: 30vh;
    padding: 1%;
    box-sizing: border-box;
    transform: translateX(19vw);
    transition: all .5s ease-in-out;
    box-shadow: 0 0 30px #15151525;
}

a.post--ref {
    display: block;
    margin: 10px 0;
    font-size: 9.5pt;
    color: #454545;
    font-family: Arial, sans-serif;
    opacity: .7;
    transition: all .5s ease-in-out;
    text-decoration: none !important;
}

postnav.title {
    text-align: center;
    display: block;
    font-size: 13pt;
    border-bottom: 1px solid #15151515;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

postnav.preview {
    color: #858585;
    font-size: 9pt;
}

a.post--ref:hover {
    opacity: 1;
}

postnav.--button {
    background-color: white;
    position: fixed;
    right: 20vw;
    top: 30vh;
    z-index: 999;
    height: 30vh;
    padding: 1%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    transform: translateX(20vw);
    cursor: pointer;
    transition: all .5s ease-in-out;
    box-shadow: 0 0 15px #15151525;
}

postnav.--button img {
    width: 13pt;
}

.notrsf {
    transform: none !important;
}

ModernBB

Blue Arrow In the viewtopic_body template, add the following code at the beginning of the template:
Code:
<postnav class="container"><postnav class="title">Thread navigation</postnav></postnav>
<postnav class="--button"><img src="https://i.imgur.com/XNUHwwq.png" /></postnav>

Blue Arrow In the same template, find:
Code:
<div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>

Replace it with:
Code:
<div style="position: relative; top: -30px; width: 1px;" class="post--id" id="{postrow.displayed.U_POST_ID}"></div>

Blue Arrow At the end of the template, add the following code aswell:
Code:
<script type="text/javascript">
$('postnav.--button').on('click', function() {
  $('postnav.container').toggleClass('notrsf');
  $(this).toggleClass('notrsf');
});
  
$(function() {
$('div.post').each(function() {
  var $plink = $(this).find('h2.topic-title a').attr('href');
  var $pauth = $(this).find('.postprofile-name a').html();
  var $pid = $(this).find('.post--id').attr('id');
  var str = $(this).find('.postbody .content div').text();
  var $length = '32';
  var $preview = str.substring(0,$length);


$('postnav.container').append('<a class="post--ref" href="' + $plink + '">' + $pauth + ' - Message # ' + $pid + '<br /><postnav class="preview">' + $preview + '...</postnav></a>');
  });
}, 500);</script>

You can customize the number of characters of the previews to show by changing the number 32 in the var $length = '32'; part with the number of your choice.

phpBB2

Blue Arrow In the viewtopic_body template, add the following code at the beginning of the template:
Code:
<postnav class="container"><postnav class="title">Thread navigation</postnav></postnav>
<postnav class="--button"><img src="https://i.imgur.com/XNUHwwq.png" /></postnav>

Blue Arrow In the same template, find:
Code:
<span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />

Replace it with:
Code:
<span class="name"><a name="{postrow.displayed.U_POST_ID}" class="post--id" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />

Blue Arrow Also find:
Code:
               <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}&nbsp; &nbsp;<img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>

Replace this part with:
Code:
               <td><span class="topic-title postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a>&nbsp; &nbsp;<img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>

Blue Arrow At the end of the template, add the following code aswell:
Code:
<script>$('postnav.--button').on('click', function() {
  $('postnav.container').toggleClass('notrsf');
  $(this).toggleClass('notrsf');
});
 
$(function() {
$('tr.post').each(function() {
  var $plink = $(this).find('span.topic-title.postdetails a').attr('href');
  var $pauth = $(this).find('span.name > strong a').html();
  var $pid = $(this).find('.post--id').attr('id');
  var str = $(this).find('.postbody > div:first').text();
  var $length = '32';
  var $preview = str.substring(0,$length);


$('postnav.container').append('<a class="post--ref" href="' + $plink + '">' + $pauth + ' - Message #' + $pid + '<br /><postnav class="preview">' + $preview + '...</postnav></a>');
  });
}, 500);</script>

You can customize the number of characters of the previews to show by changing the number 32 in the var $length = '32'; part with the number of your choice.


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. ♥
mSyx
mSyx
Forumember

Male Posts : 155
Reputation : 46
Language : French & English
Location : France

View user profile https://help.forumotion.com/

skouliki, SarkZKalie and TonnyKamper like this post

Back to top Go down

Thread navigation with messages listing Empty Re: Thread navigation with messages listing

Post by SarkZKalie January 1st 2022, 2:03 am

Thank you for sharing us! That's a brilliant idea


Thread navigation with messages listing Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1332
Reputation : 214
Language : English

View user profile https://rotavn.forumotion.com/

TonnyKamper and mSyx like this post

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum