We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Advanced Award System v1.0; with tooltips
Topic Started: Nov 7 2009, 01:20 PM (46,966 Views)
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
What it Does: Adds awards to user's mini profiles (only in posts at the moment). When hovering over these awards, it will show a description of it and the date received in a tooltip.

I have tested this to work in the following browsers:
  • Google Chrome 2.0.172.43
  • Firefox 3.5.2
  • Internet Explorer 8.0.6001.18783 (lol)
  • Opera 9.26
  • Opera10.0
  • Safari 4.0


It works 100% in all of those browsers. Hopefully it works just as well in others, but I don't have them ready to test.

Preview: http://s1.zetaboards.com/zbAIO2/topic/2231766/1/

The Code:

Add the following Below The Board
Code:
 
<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Awards",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[user id,"award name","award image","award description","award date"],
[user id,"award name","award image","award description","award date"],
[user id,"award name","award image","award description","award date"],
[user id,"award name","award image","award description","award date"]
]
}
//]]>
</script>
<script type="text/javascript" src="http://z3.ifrm.com/142/141/0/p239659/tooltipawards.js"></script>


That's the base of the script, but it needs to be edited when adding awards and such.

name : "Awards", - You can change "Awards" to whatever you want to call it, be it achievements, or whatever. Just make sure you wrap it with speech marks " and have a comma after the last speech mark.

thumbnail : [20,20], - These are the dimensions of the thumbnail versions of the award images. Change the first 20 to the width, and the second 20 the height.

closeFunction : "remove", - This is the animation used when you move your mouse out of the image (when hiding the information box). You can set this to either: "remove" (no animation) or "fade" (fades out) or "slide" (slides upwards). Once again, it must be wrapped with speech marks, and there must be a comma after the last speech mark.

Each award is set out like:
[user id,"award name","award image","award description","award date"],

You can add as many as you want after each other, which will automatically award someone. If you remove the award from the script, it will be removed from all of their posts as well. Note how each part is wrapped with speech marks besides the user id. User ID is the number you see in the URL when viewing their profile. For example, my account here has a user id of 230248. After each award, their should be a comma (after the closing square bracket ]). However, you do not put a comma at the end of the last award. Think of it as a list, use commas after each one, but not the last.

When filling out the information, put a backslash in front of all apostrophes and speech marks (besides the ones wrapping it). So, ' changes to \' and " changes to \". Last but not least, you cannot use line breaks (hitting the enter/ return key). If you need a line break, use \n instead, and that will be replaced by a real line break on the forum.

I realise that's a lot to take in, so if anything goes wrong, just post here :) .
Edited by slayer766, Nov 22 2009, 12:01 PM.
Offline Profile Quote Post Goto Top
 
Replies:
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
Cory
May 25 2012, 07:05 PM
You can host the first portion externally, just like the second portion is hosted.
how tho?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Hosting JavaScript Externally Documentation: http://docs.zetaboards.com/pages/tips/board_wrappers_full
Offline Profile Quote Post Goto Top
 
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
EDIT: Fixed
Edited by Ferby, May 27 2012, 11:12 AM.
Offline Profile Quote Post Goto Top
 
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
I'm going to be releasing an update to this code which will be integrated with ZetaBoards Dynamo. If you have any suggestions on any improvements to the code (like extra options, dynamic awards etc) then please share them here.
Offline Profile Quote Post Goto Top
 
Deleted User
Deleted User

Excellent code! Just wondering if there's anyway to have the thumbnail images as a different image to the actual award? I use awards that are this size:

Posted Image

But if you squeeze this into a little thumbnail, it doesn't look to good. So I'm thinking if there's way to add a bit into the code that allows you to have a seperate image for each award.
Quote Post Goto Top
 
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
Not with this code, sorry.
Offline Profile Quote Post Goto Top
 
jsaner
Member
[ * ]
Is the award image a URL?

and when you say use backslashes, where do you put those? by the ones wrapping it? im not sure if you meant "not counting..." by "besides"
Here is what i put, and it doesn't work, what am i doing wrong???

<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Badges",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[3402106,"Presidential Badge/","http://imageshack.us/scaled/landing/404/presidentbadge.png/","former or current president/","October 14th/"],
[user id,"award name","award image","award description","award date"],
[user id,"award name","award image","award description","award date"],
[user id,"award name","award image","award description","award date"]
]
}
//]]>
</script>
<script type="text/javascript" src="http://z3.ifrm.com/142/141/0/p239659/tooltipawards.js"></script>
Edited by jsaner, Oct 13 2012, 02:50 PM.
Offline Profile Quote Post Goto Top
 
wodrum
Member Avatar
Member
[ * ]
Viral
Aug 9 2012, 11:08 AM
I'm going to be releasing an update to this code which will be integrated with ZetaBoards Dynamo. If you have any suggestions on any improvements to the code (like extra options, dynamic awards etc) then please share them here.
If they were viewable when you clicked on a user's profile, I would be eternally grateful :)
Offline Profile Quote Post Goto Top
 
Aracind-ZNR
Member
[ * ]
Hi All!

Is this code not working anymore? I have placed it in my below the board:

Code:
 
<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Awards",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[54832,"Founder","http://i18.photobucket.com/albums/b120/Aracind/Founder_zps3f5f25ca.jpg","Founding Member,"25th April 2006"],
[3230471,"Test","3230471","000","4/23/2012"]
]
}
//]]>
</script>
<script type="text/javascript" src="http://z3.ifrm.com/142/141/0/p239659/tooltipawards.js"></script>


But it does not appear - the board is: http://w11.zetaboards.com/DanseMacabre/index/

I appreciate your help and your pointers!
Offline Profile Quote Post Goto Top
 
sadiee
Member Avatar
Member
[ * ]
It's not working for me neither.
Offline Profile Quote Post Goto Top
 
jragonizer
Member Avatar
Member
[ *  * ]
not to bump but where and how would I change the .js file so that my multi peice header will work? www.w11.zetaboards.com/the_round_table
There isn't a header in it. Could you tell me how I'd change the "td" to an image?
Offline Profile Quote Post Goto Top
 
polocolo
Member Avatar
Member
[ *  *  * ]
Use notepad to change js file. After you have done with changes on notepad, store the file somewhere on the site and then get the url from it for coding.
Offline Profile Quote Post Goto Top
 
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
Aracind-ZNR
Oct 16 2012, 05:12 PM
Hi All!

Is this code not working anymore? I have placed it in my below the board:

Code:
 
<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Awards",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[54832,"Founder","http://i18.photobucket.com/albums/b120/Aracind/Founder_zps3f5f25ca.jpg","Founding Member","25th April 2006"],
[3230471,"Test","3230471","000","4/23/2012"]
]
}
//]]>
</script>
<script type="text/javascript" src="http://z3.ifrm.com/142/141/0/p239659/tooltipawards.js"></script>


But it does not appear - the board is: http://w11.zetaboards.com/DanseMacabre/index/

I appreciate your help and your pointers!
Fixed the code ^^ - you missed out a `"`.
Offline Profile Quote Post Goto Top
 
SupernovaMFGG
Member
[ * ]
Hey I just moved my forums to Zetaboards. But I have problem with my code:
Code: HTML
 
<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Badges",
thumbnail : [25,25],
closeFunction : "fade",
users : [
[161332,"Founder","https://dl.dropbox.com/u/106539740/SITE/Badges/staff-admin.png","The founder of SNFG","Feb 5, 2013"],
[161332,"Disciplined 3","https://dl.dropbox.com/u/106539740/SITE/Badges/good-3.png","Extremely Disciplined","Feb 5, 2013"],
[161332,"GM User","https://dl.dropbox.com/u/106539740/SITE/Badges/game-maker-user.png","Game Maker user","Feb 5, 2013"],
[161332,"MLVSTF","https://dl.dropbox.com/u/106539740/SITE/Badges/MLVSTF.png","Mario & Luigi vs the Furbies project veterans","Feb 5, 2013"]
]
}
//]]>
</script>
<script type="text/javascript" src="http://z3.ifrm.com/142/141/0/p239659/tooltipawards.js"></script>


I check everything but it does not appear under my avatar in my forums.
Offline Profile Quote Post Goto Top
 
RihannaRTT
Member
[ * ]
EDIT: nevermind, I posted this in the wrong thread :facepalm:
Edited by RihannaRTT, Feb 6 2013, 08:09 AM.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · ZetaBoards Codes & Modifications · Next Topic »
Add Reply