Welcome Guest [Log In] [Register]
Welcome to the home of Viral's Modifications. We hope you enjoy your visit.

This forum is used for support and feedback purposes only. All modifications can also be found on the official site.

Username:   Password:
mQuote [-] mQuote [+]
Add Reply
  • Pages:
  • 1
  • 3
Topic Preview on Hover; Created: 26/08/2014
Topic Started: Aug 26 2014, 05:10 PM (4,915 Views)
Viral
Member Avatar
Administrator
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: Posted Image

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:
 
<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>
Attached to this post:
Attachments: topic_preview.png (26.53 KB)
Viral
ZetaBoard's Dynamo Developer
MEng Aeronautical Engineering @ Imperial College London


>> CULTURAL JETTISON <<
Offline Profile Quote Post Goto Top
 
Kankuro
Member Avatar
ぱ ぺっと ますたあ
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.
Offline Profile Quote Post Goto Top
 
WingNut125
Member Avatar

This sounds really useful. I'll definitely be adding this to my forum later today :D
Offline Profile Quote Post Goto Top
 
Kankuro
Member Avatar
ぱ ぺっと ますたあ
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.
Offline Profile Quote Post Goto Top
 
Viral
Member Avatar
Administrator
Hmm yes, it should actually be above the Dynamo code, will edit that in. Not broken.
Viral
ZetaBoard's Dynamo Developer
MEng Aeronautical Engineering @ Imperial College London


>> CULTURAL JETTISON <<
Offline Profile Quote Post Goto Top
 
Lex
Member Avatar

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.
Posted Image
Offline Profile Quote Post Goto Top
 
Viral
Member Avatar
Administrator
It's a CSS thing. Are you using the same theme as that on here?
Viral
ZetaBoard's Dynamo Developer
MEng Aeronautical Engineering @ Imperial College London


>> CULTURAL JETTISON <<
Offline Profile Quote Post Goto Top
 
Lex
Member Avatar

Oh, nope. I'm using another theme. It makes the topic preview outline gray like the example picture.
Posted Image
Offline Profile Quote Post Goto Top
 
Viral
Member Avatar
Administrator
This might help: http://support.viralsmods.com/topic/5785924/2/#post1677984 :) .
Viral
ZetaBoard's Dynamo Developer
MEng Aeronautical Engineering @ Imperial College London


>> CULTURAL JETTISON <<
Offline Profile Quote Post Goto Top
 
anaymohite
No Avatar

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.
Edited by Viral, May 23 2015, 05:12 PM.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Basic Modifications · Next Topic »
Add Reply
  • Pages:
  • 1
  • 3

Theme by Symbiote & Foxx of Outline