Welcome Guest [Log In] [Register]
Search Members Calendar | Rules ZB Code Index IF Code Index
ZBCode
  • Navigation
  • ZBCode
  • Coding Resources
  • Zetaboards Modifications
  • Topic Preview Tooltip
Hey, welcome to ZBCode, the premier coding forum for ZB. Here you fill find some of the best Invisionfree and Zetaboards Codes on the network! Unfortunately, you're sorta hovering around in guest mode at the moment; why not join in on the fun? Register an account and you can start accessing the wealth of resources we have available here. Enjoy your stay at ZBCode, and remember to tell all your friends about us; the more members, the more codes available. ;)

Interested in joining? Click here.


If you are already a member of ZBCode, feel free to login right here:

Username:   Password:
Locked Topic
  • Pages:
  • 1
  • 2
  • 3
Topic Preview Tooltip; Shows a preview of topic on mouseover
Tweet Topic Started: Jul 22 2009, 09:48 AM (1,812 Views)
Choco Jul 22 2009, 09:48 AM Post #1
Member Avatar
¡ʎɹoʇɔɐɟ ʎʇıʌɐɹƃ ɐ uı pǝddɐɹʇ ɯ,ı 'dןǝɥ

Posts:
589
Group:
Admins
Member
#3,272
Joined:
Jun 30, 2009
Coding language
Everything
Name: Topic Preview Tooltip
Description: When your mouse is held over a topic link for more than 1 second, it'll show a little box next to your mouse with some of the first post of the topic, to let you know what it's like.
Bugs: If you hover over a topic link and display the box, then clicking that topic link will bring you to the last post in the topic.
Installation: Place it in the last wrapper box.
Code:
Code:
 
<script type="text/javascript">
//Topic Preview code
//By Choco of zbcode.com
var timer,hold;
var sub = 150;
$("<div id='tip' class='description tip_hidden' style='width:200px;display:none;position:fixed;'><img src='http://aquate.us/u/ajax-lo8.gif' /><br /><strong>Loading...</strong></div>").appendTo("body");
function tip(x,y) {
$("#tip").css("left",x+5).css("top",y+15).fadeIn("fast").removeClass("tip_hidden").addClass("tip_shown");
if(hold.match(/topic\/(\d+)/i)) {
$.get(main_url+"topic/"+RegExp.$1+"/1/",function(d) {
$(".tip_shown").slideUp("fast",function(){$(this).html($(".c_post:eq(0)",d).text().substring(0,sub)+"...");$(this).slideDown("fast");});
});
}
}
function unTip(){
$("#tip").fadeOut("fast",function() {
$(this).html("<img src='http://aquate.us/u/ajax-lo8.gif' /><br /><strong>Loading...</strong>");
});
}$(function(){
$("a[href*=topic]").attr("title","").attr("alt","").mouseover(function(e) {
timer=setTimeout("tip("+e.clientX+","+e.clientY+")",1000);
hold=$(this).attr("href");
}).mouseout(function() {
clearTimeout(timer);
unTip();
hold=null;
});});</script>


Customization:
You can style the box in your Theme Appearance section.
Just add some CSS:
#tip {
background:white;
border:1px dashed grey;
padding:8px;
text-align:center;
}
Also, at the top of the code, you should see this:
var sub = 150;
Change the numbers to how much content you want to display of the first post. So if you wanted 300 characters to display instead, use var sub=300;

That's about it. Enjoy!
Posted ImageIt's a magical world, Hobbes, ol'd buddy... ...let's go exploring!
In progress: Something Special ;)
Offline Profile Goto Top
 
Lout Jul 22 2009, 09:51 AM Post #2
Member Avatar


Posts:
402
Group:
Dedicated
Member
#2,400
Joined:
Feb 19, 2009
If we wanted it to take say 2 seconds before it displayed, am I correct in assuming that we would change the 1000 to 2000 here?
Code:
 
timer=setTimeout("tip("+e.clientX+","+e.clientY+")",1000);
Posted Image
Offline Profile Goto Top
 
Choco Jul 22 2009, 10:03 AM Post #3
Member Avatar
¡ʎɹoʇɔɐɟ ʎʇıʌɐɹƃ ɐ uı pǝddɐɹʇ ɯ,ı 'dןǝɥ

Posts:
589
Group:
Admins
Member
#3,272
Joined:
Jun 30, 2009
Coding language
Everything
LagerLout
Jul 22 2009, 09:51 AM
If we wanted it to take say 2 seconds before it displayed, am I correct in assuming that we would change the 1000 to 2000 here?
Code:
 
timer=setTimeout("tip("+e.clientX+","+e.clientY+")",1000);
Exactly. I was trying it out however and anything above 1.5 seconds gets sorta boring to wait around for (believe it or not!)

Your choice though ;)
Posted ImageIt's a magical world, Hobbes, ol'd buddy... ...let's go exploring!
In progress: Something Special ;)
Offline Profile Goto Top
 
Viral Jul 22 2009, 10:08 AM Post #4


Posts:
342
Group:
Dedicated
Member
#48
Joined:
Jul 17, 2008
Coding language
PHP
I love this :P ! You should clearTimeout if you click the link though.

Posted Image
Offline Profile Goto Top
 
Lout Jul 22 2009, 10:11 AM Post #5
Member Avatar


Posts:
402
Group:
Dedicated
Member
#2,400
Joined:
Feb 19, 2009
Choco
Jul 22 2009, 10:03 AM
LagerLout
Jul 22 2009, 09:51 AM
If we wanted it to take say 2 seconds before it displayed, am I correct in assuming that we would change the 1000 to 2000 here?
Code:
 
timer=setTimeout("tip("+e.clientX+","+e.clientY+")",1000);
Exactly. I was trying it out however and anything above 1.5 seconds gets sorta boring to wait around for (believe it or not!)

Your choice though ;)
The thinking was that if the time was increased the topic wouldn't realise it was being loaded until the popup appeared. That way you could just click straight to the last unread, or doesn't it work like that?
Posted Image
Offline Profile Goto Top
 
Choco Jul 22 2009, 10:13 AM Post #6
Member Avatar
¡ʎɹoʇɔɐɟ ʎʇıʌɐɹƃ ɐ uı pǝddɐɹʇ ɯ,ı 'dןǝɥ

Posts:
589
Group:
Admins
Member
#3,272
Joined:
Jun 30, 2009
Coding language
Everything
LagerLout
Jul 22 2009, 10:11 AM
Choco
Jul 22 2009, 10:03 AM
LagerLout
Jul 22 2009, 09:51 AM
If we wanted it to take say 2 seconds before it displayed, am I correct in assuming that we would change the 1000 to 2000 here?
Code:
 
timer=setTimeout("tip("+e.clientX+","+e.clientY+")",1000);
Exactly. I was trying it out however and anything above 1.5 seconds gets sorta boring to wait around for (believe it or not!)

Your choice though ;)
The thinking was that if the time was increased the topic wouldn't realise it was being loaded until the popup appeared. That way you could just click straight to the last unread, or doesn't it work like that?
It certainly does. :) Good thinking.
Posted ImageIt's a magical world, Hobbes, ol'd buddy... ...let's go exploring!
In progress: Something Special ;)
Offline Profile Goto Top
 
Lout Jul 22 2009, 10:24 AM Post #7
Member Avatar


Posts:
402
Group:
Dedicated
Member
#2,400
Joined:
Feb 19, 2009
I can't code but I can think methodically ;)
Posted Image
Offline Profile Goto Top
 
Aerial Jul 22 2009, 11:21 AM Post #8
Member Avatar


Posts:
177
Group:
Member
Member
#2,952
Joined:
May 8, 2009
Coding language
HTML/CSS
wait a second... where does this go? i tried above the copyright, didn't work...

thanks
Offline Profile Goto Top
 
Lout Jul 22 2009, 11:40 AM Post #9
Member Avatar


Posts:
402
Group:
Dedicated
Member
#2,400
Joined:
Feb 19, 2009
Aerial
Jul 22 2009, 11:21 AM
wait a second... where does this go? i tried above the copyright, didn't work...

thanks
Make sure you add </script> to the end of it - Choco forgot to :P

EDIT: Doesn't seem to work for me either, and isn't working here now... :ermm:
Edited by Lout, Jul 22 2009, 11:57 AM.
Posted Image
Offline Profile Goto Top
 
Choco Jul 22 2009, 12:58 PM Post #10
Member Avatar
¡ʎɹoʇɔɐɟ ʎʇıʌɐɹƃ ɐ uı pǝddɐɹʇ ɯ,ı 'dןǝɥ

Posts:
589
Group:
Admins
Member
#3,272
Joined:
Jun 30, 2009
Coding language
Everything
Try now :)
Posted ImageIt's a magical world, Hobbes, ol'd buddy... ...let's go exploring!
In progress: Something Special ;)
Offline Profile Goto Top
 
2 users reading this topic (2 Guests and 0 Anonymous)
ZetaBoards - Free Forum Hosting
Enjoy forums? Start your own community for free.
Learn More · Register for Free
Go to Next Page
« Previous Topic · Zetaboards Modifications · Next Topic »
Locked Topic
  • Pages:
  • 1
  • 2
  • 3

Track Topic · E-mail Topic Time: 7:49 PM Jul 10
Hosted for free by ZetaBoards · Privacy Policy