Forum Display - Thread Preview Text Animation


Login or Register for Dates, Times and to Reply

 
Thread Tools Search this Thread
The Lounge What is on Your Mind? Forum Display - Thread Preview Text Animation
# 1  
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  
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  
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  
Having preview on every thread makes the forum display pretty cluttered, imo.

Last edited by CarloM; 07-26-2018 at 06:18 AM..
This User Gave Thanks to CarloM For This Post:
# 5  
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  
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  
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 for Dates, Times and to Reply

Previous Thread | Next Thread
Thread Tools Search this Thread
Search this Thread:
Advanced Search

Test Your Knowledge in Computers #869
Difficulty: Medium
Fortran introduced the concept of automatic garbage collection.
True or False?

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