Change Hover/Preview to show latest post instead of first

[Football Buddah]

Forum URL: thebigleague.proboards.com


When we hover over a thread, the 'preview' that shows up is of the first message in that thread. 
Is there a way I can change that so when I hover over that thread, the 'preview' is the LATEST message instead?

Thanks!

[Football Buddah]

I forgot to login before posting this.

[Craig]

That is not possible i'm afraid. However, i will mark this as a feature request and perhaps the last post hover would be something that could be added.

[Football Buddah]

I played with the settings and found out that it IS possible:

Go to: Admin - Themes - Layout Templates
Template Name = Board
Tab = Thread List

Select the text shown below in blue: 
{foreach $[thread]}
<tr id="$[thread.content_id]" class="$[thread.content_class]">
<td class="icon">$[thread.icon]</td>
<td class="checkbox clickable">$[thread.checkbox]</td>
<td class="main clickable" title="$[thread.short_content]">

REPLACE WITH "$[thread.last_post.message]"


This can be done by going to 'Loops and Variables' under:
Thread > Last_Post > Message
and select that var to replace it.

When you're done, it should look like this:

{foreach $[thread]}
<tr id="$[thread.content_id]" class="$[thread.content_class]">
<td class="icon">$[thread.icon]</td>
<td class="checkbox clickable">$[thread.checkbox]</td>
<td class="main clickable" title="$[thread.last_post.message]">

Now when you hover over a thread - it "previews" the last message. 

[Brian]

Football Buddah, you might want to use $[thread.last_post.message.escaped] instead as any quotation marks in the message will otherwise break the title attribute.

[Football Buddah]

Thanks Brian. I updated the code, but haven't noticed a difference yet.

However, whenever I use $[thread.last_post.message] or even $[thread.last_post.message.escaped], I found something looks funky on threads that are created that have any kind of formatting in them.

If the first post in a thread has and FONT tags in them (bold, italics, underline, colors, etc) the message itself shows up in the Thread List where the Subject of the Thread should be.

I have two Themes on my forum; and one has $[thread.last_post.message] while the other still has the default $[thread.short_content]; and when I flip to that 2nd theme, the issue doesn't present itself.

Strange?

[Brian]

Can you link to a page that shows a visible example of the problem?

[Football Buddah]

try this:
thebigleague.proboards.com/board/8/2012-rfa-archives

[Brian]

It looks like the HTML tags don't seem to care if the quotation marks are escaped or not.

New idea then. Go to Themes > Layout Templates > Board and add this on a new line at the very top.

<script type="text/javascript">
function addTitles(){
$('.threads .item .main .preview').each(function(){
$(this).html($(this).html().replace(/\<br\>/gi,' '));
$(this).parents('.main').attr('title',$(this).text());
});
}

proboards.on('afterSearch', function() { addTitles(); });
$(document).ready(function(){ addTitles(); });
</script>

Then click on the Thread List tab and undo any of the changes you made prior to the instructions I've provided in this post. Find this line:

<td class="main clickable" title="$[thread.short_content]">

Add a new line after it and paste this on it:

<div class="preview" style="display: none;">$[thread.last_post.message]</div>

You should get the desired result after doing so.

[Football Buddah]

BRILLIANT!!!
Works like a charm. Thanks so much!

[SilverEyes]

Hello Brian, Football Buddah !

After my thread concerning the problems with preview hover: Preview on thread title hover displays bbcode, I used your solution specified here, and it works like a charm!

I would really suggest this solution be put forward in a clear and stickied post, or even better, implemented directly by ProBoards into a final cut of the preview on hover function. It's brilliant!

Thanks a lot to both of you, for raising the matter, and supplying the work-around!

[SilverEyes]

May 22, 2014 15:32:03 GMT -8 Brian said:

It looks like the HTML tags don't seem to care if the quotation marks are escaped or not.

New idea then. Go to Themes > Layout Templates > Board and add this on a new line at the very top.

<script type="text/javascript">
function addTitles(){
$('.threads .item .main .preview').each(function(){
$(this).html($(this).html().replace(/\<br\>/gi,' '));
$(this).parents('.main').attr('title',$(this).text());
});
}

proboards.on('afterSearch', function() { addTitles(); });
$(document).ready(function(){ addTitles(); });
</script>

Then click on the Thread List tab and undo any of the changes you made prior to the instructions I've provided in this post. Find this line:

<td class="main clickable" title="$[thread.short_content]">

Add a new line after it and paste this on it:

<div class="preview" style="display: none;">$[thread.last_post.message]</div>

You should get the desired result after doing so.

Hello Brian, sorry to call you out on this thread, but is there any way we can limit the numbers of chars showed by the preview on hover using these changes of yours?

I've tried setting this at the top of the Thread List template, but even though it DOES affect the div itself (can be seen by removing the display:none), it doesn't affect how many chars the preview script picks up.

<script type="text/javascript">//
$(function(){
 $("div.preview").each(function(i){
   len=$(this).text().length;
   if(len>100)
   {
     $(this).text($(this).text().substr(0,100)+'...');
   }
 });
});
</script>

Furthermore, I'm not super fan of replacing the line jumps by spaces, within the preview on hover. I'd like for the lines to jump within the preview container.
If we can reduce the number of chars shown on the hover preview, introduce an ellipse (...), and keep the line jumps, I would be super happy. Unfortunately, I'm still quite a beginner on all this. Would you mind providing a modified javascript code for the Board template?

Thanks a bunch.

[SilverEyes]

Okay, through trial and error, I've been able to find by myself where to put the .substr within the javascript to reduce the preview size to 150 chars, and introduce an ellipse.

<script type="text/javascript">
function addTitles(){
$('.threads .item .main .preview').each(function(){
$(this).html($(this).html().replace(/\<br\>/gi,' '));
$(this).parents('.main').attr('title',$(this).text().substr(0, 150)+'...');
});
}

proboards.on('afterSearch', function() { addTitles(); });
$(document).ready(function(){ addTitles(); });
</script>

Still wondering if there is a way to make the preview container respect line jumps, or if that is impossible.

[Brian]

You mean line breaks?

You'd want to change this line:

$(this).html($(this).html().replace(/\<br\>/gi,' '));

To this:

$(this).html($(this).html().replace(/\<br\>/gi,'\n'));

[SilverEyes]

Purrfect Brian! Didn't know the (\n) yet... still learning as I go along. Thank you!!