Forum Display - Thread Preview Text Animation

Instead of the slow and not readable tooltips with the preview of the thread content in forum view, I have added the preview with mouseover (see attached movie).

Let me know if you want a different kind of preview (animation, duration font-color, size, etc,)

Thanks.

<script>
jQuery(".neo-threadbit").hover(function(){
   jQuery(this).css({"cursor":"pointer"});
   jQuery(this).find(".neo-threadbit-threadpreview").css({"color":"rgba(15, 31, 132,0.95)","padding":"20px 10px 20px 20px","margin":"20px 0px; 20px 20px","word-wrap": "break-word"});;
   jQuery(this).find(".neo-threadbit-threadpreview").fadeIn(1000);
});
</script>

Ditto for search results including (search, new topics, today's post, etc):

<script>
jQuery(".neo-threadbit").hover(function(){
   jQuery(this).css({"cursor":"pointer"});
   jQuery(this).find(".neo-threadbit-threadpreview").css({"color":"rgba(15, 31, 132,0.95)","padding":"20px 10px 20px 20px","margin":"20px 0px; 20px 20px","word-wrap": "break-word"});;
   jQuery(this).find(".neo-threadbit-threadpreview").fadeIn(1000);
});
</script>

Comments welcome (color, size, margins, timing, effect, etc)

(see attached screen recording)

Maybe change the animation to just have all the thread previews appear at one time, and not by thread individually?

Or just leave it "as is" with the previews on a per thread basis?

Update:

Changed this to preview all the threads at once:

<script>
jQuery(".neo-threadbit").hover(function(){
jQuery(this).css({"cursor":"pointer"});
   jQuery(".neo-threadbit-threadpreview").css({"color":"rgba(15, 31, 132,0.95)","padding":"20px 10px 20px 20px","margin":"20px 0px; 20px 20px","word-wrap": "break-word"});;
  // jQuery(this).find(".neo-threadbit-threadpreview").fadeIn(1000);
     jQuery(".neo-threadbit-threadpreview").fadeIn(1000);
});
</script>

Having preview on every thread makes the forum display pretty cluttered, imo.

Your image link does not work:

https://img42.com/jHxs3+

It's best to add attachments using the forum attachments for at least two reason:

(1) Third party services come and go. Their links often are dead after a year or more.

(2) It's possible for others to change those external links to malicious code.

Please upload using the forum attachment function; or put in your forum album and put the IMG link from your album.

I like the dea, but tend to agree with CarloM - the display does look too "busy" for my taste.
Also I couldn't find a way to "collapse" the expanded threads to get tot a "minimalistic" display.
How about compromise: the mouseover expands the hovered thread and collapses it once the focus is gone?

OK. Thanks for the feedback. Done...

<script>
jQuery(".neo-threadbit").hover(function(){
   jQuery(this).css({"cursor":"pointer"});
   jQuery(".neo-threadbit-threadpreview").css({"color":"rgba(15, 31, 132,0.95)","padding":"20px 10px 20px 20px","margin":"20px 0px; 20px 20px","word-wrap": "break-word"});;
   jQuery(this).find(".neo-threadbit-threadpreview").fadeToggle(1000);
   //jQuery(".neo-threadbit-threadpreview").fadeIn(1000);
});
</script>

Let me know if this is better "fadeToggle()"

well... I don't see the expanded threads collapse once the focus is gone - they stay expanded...

Sorry, I had a typo in the script. Should be toggle'n now

Lovely - I like it.
Let's see others' reactions..
Thanks!

My request if possible, would be not to resize those thread windows on hover.
But start to scroll text in the empty space in between Thread/Thread Starter and Last Post

Or if possible a disable option of course

Regards
Peasant.

Yeah, I was thinking to not use hover and go with some scrolling trigger, so today I downloaded the popular Waypoints.js library but no joy yet, LOL. I could not get "Infinite Scrolling" to work in showthread view.

Maybe I will try getting it to work with the thread previews.

Neo,
any idea why clicking New Topics brings up the Home page? This is something new...
Happens only if there're NO New Topics

Yes, if there are no new topics, it used to give an "error message" and redirect, and wherever it redirects when there are "no new topics" someone will complain about it the redirect location.

LOL

Where would you like to see it redirect?

no,no - this is just fine!
Thanks Neo!

Haha... I'm happy to redirect the "no new topics state" somewhere else.

What i am trying to avoid are "error messages" and "intermediate redirect messages" which add little value.

I used to redirect to "Today's Posts" and can do that if you like.

Normally, I use "Today's Posts" and don't use "New Topics" often.

Hey Neo,

I want to take this chance and appreciate your efforts which you are putting to make this forum look better, you ROCK, you are truly a GEM . I am really happy, proud to be part of forums always.

NOTE: New code tags and quote tags look is AWESOME simply.

Thanks,
R. Singh

Update:

Still cannot get waypoints.js to work properly for scrolling effects to make these thread previews work as we want.

Hmm. I have worked on waypoints.js for scrolling for the threadpreview function versus using mouse hover; and so far I cannot get it to work.

I disabled the "on hover" thread preview for now, since it seems folks don't like how the "on hover" thread preview works.

Update:

I have fixed the issue with thread preview animation in forumdisplay, search results, new topics, today's topics, etc. by changing the animation to toggle() and remove fadeToggle().

The code also has a UserCP option to turn it off completly ("Disable Thread Preview Animation"); so the code is now:

<if condition="$bbuserinfo[field23] != 'Disable'">
<script>
jQuery(".neo-threadbit").hover(function(){
jQuery(this).css({"cursor":"pointer"});
   jQuery(".neo-threadbit-threadpreview").css({"color":"rgba(15, 31, 132,0.95)","padding":"20px 10px 20px 20px","margin":"20px 0px; 20px 20px","word-wrap": "break-word"});;
  jQuery(this).find(".neo-threadbit-threadpreview").toggle();
   //jQuery(".neo-threadbit-threadpreview").fadeToggle(1000);
});
</script>
</if>

I think the preview animation is OK now, but if you don't like it, you can turn it off here (see below):

(The default is "Enabled")

Note: If I get the waypoints.js scrolling animation working and working well, I will let you know Until then it is "mouseover / hover" or "turn it off"