Moderators: Dynamo Support, Moderator

Topic Preview on Hover

Joined: August 3rd, 2008, 11:45 am

August 26th, 2014, 5:10 pm #1

What this does: When you hover over the title of a topic on a forum page it will bring up a preview of the topics' first post so you can decide whether or not you want to actually click into the topic or not! It even retains all BB code from the topic.

Preview:

Prerequisites: You must be using ZetaBoards Dynamo for this to work.

Notes: I decided not to host this one as it's such a small file size :) .

Where does it go: Admin CP >> Themes >> Board Template >> Anywhere above the ZetaBoard's Dynamo main code.

Instructions: The first four lines can be edited (so you can change the title of the little box that appears, change the loading text and also increase or decrease the maximum width and height of the box). Please make sure you keep the speech marks otherwise it will not work. If you don't want any title to appear, then leave it empty (var title = "";).

Code:

Code: Select all

<script type="text/javascript">
//<![CDATA[
// Topic previews on hover by Viral of http://viralsmods.com/
// Requires ZetaBoards Dynamo to function. http://dynamo.viralsmods.com/
$("body").on("dynamo_onbeforeload", function() {
var title = "Topic Preview";
var loading_text = "Loading...";
var max_width = '400px';
var max_height = '50px';
// no more editing!
$("table.posts td.c_cat-title a").filter(function(a) {
return /topic/.test($(this).attr("href"));
}).each(function() {
dynamo.tip.tooltip.show({
selector : $(this),
title : title,
message : loading_text,
hide : {
fixed : true,
delay : 200
}
});
}).hover(function() {
(function(that) {
$.get(that.attr("href") + "?forceads", function(d) {
var content = $("#topic_viewer td.c_post:first", d);
content.find(".editby").remove();
content = content.html();
that.qtip("api").set("content.text", '<div style="max-width:' + max_width + ';max-height:' + max_height + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">' + content + '</div>');
});
})($(this));
});
})();
//]]>
</script>
topic_preview.png
topic_preview.png
Last edited by Viral on April 6th, 2015, 12:19 pm, edited 5 times in total.
Quote
Like
Share

Joined: March 8th, 2014, 3:48 am

August 26th, 2014, 5:56 pm #2

Nice work :)

2 perks for this:
1 - Advertises Dynamo more, making more people want to get it for simple mods like this that require it.

2 - A great mod that I know will be used often.
Quote
Like
Share

Joined: February 9th, 2012, 2:46 am

August 27th, 2014, 5:58 pm #3

This sounds really useful. I'll definitely be adding this to my forum later today :D
Quote
Like
Share

Joined: March 8th, 2014, 3:48 am

December 23rd, 2014, 3:02 am #4

This is broken. It only works when I put it above the Dynamo coding. And I'm worried that will cause issues with Dynamo if I leave it there.
Quote
Like
Share

Joined: August 3rd, 2008, 11:45 am

December 23rd, 2014, 3:52 am #5

Hmm yes, it should actually be above the Dynamo code, will edit that in. Not broken.
Quote
Like
Share

Lex
Joined: March 25th, 2015, 2:02 am

March 26th, 2015, 12:18 am #6

This is probably a very dumb question, but how would I go about changing the color of the Topic Preview box and outline much like it is Orange on here. I'd like it to be Orange on my forum too, matching our color scheme.
Quote
Like
Share

Joined: August 3rd, 2008, 11:45 am

March 27th, 2015, 12:07 am #7

It's a CSS thing. Are you using the same theme as that on here?
Quote
Like
Share

Lex
Joined: March 25th, 2015, 2:02 am

March 27th, 2015, 12:27 am #8

Oh, nope. I'm using another theme. It makes the topic preview outline gray like the example picture.
Quote
Like
Share

Joined: August 3rd, 2008, 11:45 am

April 5th, 2015, 8:04 pm #9

Quote
Like
Share

Joined: May 23rd, 2015, 5:47 am

May 23rd, 2015, 5:49 am #10

This is broken. It only works when I put it above the Dynamo coding. And I'm worried that will cause issues with Dynamo if I leave it there.
Last edited by Viral on May 23rd, 2015, 5:12 pm, edited 1 time in total.
Quote
Like
Share