Forum Display - Thread Preview Text Animation


 
Thread Tools Search this Thread
The Lounge What is on Your Mind? Forum Display - Thread Preview Text Animation
# 1  
Old 07-25-2018
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.

Code:
<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>

# 2  
Old 07-25-2018
Ditto for search results including (search, new topics, today's post, etc):

Code:
<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)
# 3  
Old 07-25-2018
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:

Code:
<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>

# 4  
Old 07-25-2018
Having preview on every thread makes the forum display pretty cluttered, imo.

Last edited by CarloM; 07-26-2018 at 05:18 AM..
This User Gave Thanks to CarloM For This Post:
# 5  
Old 07-25-2018
Your image link does not work:

Code:
[IMG]https://img42.com/jHxs3+[/IMG]

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.
# 6  
Old 07-25-2018
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?
These 2 Users Gave Thanks to vgersh99 For This Post:
# 7  
Old 07-25-2018
OK. Thanks for the feedback. Done...

Code:
<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()"
These 2 Users Gave Thanks to Neo For This Post:
Login or Register to Ask a Question

Previous Thread | Next Thread

5 More Discussions You Might Find Interesting

1. What is on Your Mind?

Forum Description Animation with jQuery

I found that the pages that lists all the forums were too cluttered with the forum descriptions, so I added a bit of jQuery to hide the forum descriptions and to fade them in and out on mouseover: <script> $(document).ready(function() { jQuery(".neo-forum-description").hide();... (2 Replies)
Discussion started by: Neo
2 Replies

2. What is on Your Mind?

Updates to Forum Navbar and Thread Reply for Unregistered Users

Hey You may have noticed I changed the navbar at the top a bit. I've almost finished converting the navbar to divs from table tags. In addition, for unregistered users, instead of seeing a "New Reply" button, unregistered users see a "Login to Reply" and icon which looks the same as our... (2 Replies)
Discussion started by: Neo
2 Replies

3. UNIX for Dummies Questions & Answers

This forum is closed for new thread ... post here.

This forum is closed for new threads. Please post in this forum: UNIX for Beginners Questions & Answers (0 Replies)
Discussion started by: Neo
0 Replies

4. Post Here to Contact Site Administrators and Moderators

How to shift or move my thread/query from one forum to other?

I am not getting reply of my post :Switching between Linux and Windows OS in Linux forum. How to move the thread to a different forum like: "Windows & DOS: Issues & Discussions"? (1 Reply)
Discussion started by: ravisingh
1 Replies

5. What is on Your Mind?

How to move a thread into another forum

Hi there, Does anyone know how I can move a posting from one forum into another. I believe I posted one in the wrong forum, but have no idea how to move it. I don't want to ask the same question in multiple forums. Thanks (4 Replies)
Discussion started by: goodjuju
4 Replies
Login or Register to Ask a Question

Featured Tech Videos