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,971 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:
Quozzo
Member Avatar
By the blood of Sanguinius!
[ *  *  *  *  * ]
the last awards has a comma at the end, it shouldn't

oh, the code gets the awards in a loop from top to bottom, if the last three wont work, its because it came across a problem that could not be executed and broke the code. so theres probably nothing wrong with the latter two, but its the third one.
Edited by Quozzo, Jun 23 2011, 12:22 PM.
Offline Profile Quote Post Goto Top
 
Ephatha
Member
[ * ]
I'm having a problem with this code. =x I've tried everything and would sososo appreciate some help. It works fine like this, when I have just one user awarded:

Code:
 
<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Awards",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[3398645,"Triple Cool","http://z4.ifrm.com/30253/122/0/f5176661/01.gif","For wearing three pairs of sunglasses. B)","6-05-2011"],
]
}
</script>
<script type="text/javascript" src="http://z3.ifrm.com/142/141/0/p239659/tooltipawards.js"></script>


As soon as I add one (or an number) of extra awards, all awards (even that one user that it worked on before) disappear.

Code:
 
<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Awards",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[3398645,"Triple Cool","http://z4.ifrm.com/30253/122/0/f5176661/01.gif","For wearing three pairs of sunglasses. B)","6-05-2011"],
[3400243,"Character of The Month","http://z4.ifrm.com/30253/122/0/f5176658/comaward.gif
","This achievement goes to well-authored characters and is awarded by the OOC community.","6-20-2011"],
[3399976,"Villain","http://z4.ifrm.com/30253/122/0/f5176662/villainaward.gif","The inverse to the Hero Award, whoever gets this probably has a thing for laughing maniacally and furiously stroking fluffy cats in their spare time. That, or they're really good at scaring the pants off people.","6-23-2011"]
]
}
</script>
<script type="text/javascript" src="http://z3.ifrm.com/142/141/0/p239659/tooltipawards.js"></script>


I have it at the top of "Below the Board" and tried putting it at the bottom. Didn't seem to make any difference. Does anyone know why they don't work when I add more than one?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Awards",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[3398645,"Triple Cool","http://z4.ifrm.com/30253/122/0/f5176661/01.gif","For wearing three pairs of sunglasses. B)","6-05-2011"],
[3400243,"Character of The Month","http://z4.ifrm.com/30253/122/0/f5176658/comaward.gif","This achievement goes to well-authored characters and is awarded by the OOC community.","6-20-2011"],
[3399976,"Villain","http://z4.ifrm.com/30253/122/0/f5176662/villainaward.gif","The inverse to the Hero Award, whoever gets this probably has a thing for laughing maniacally and furiously stroking fluffy cats in their spare time. That, or they're really good at scaring the pants off people.","6-23-2011"]
]
}
</script>
<script type="text/javascript" src="http://z3.ifrm.com/142/141/0/p239659/tooltipawards.js"></script>
Try that instead.
Offline Profile Quote Post Goto Top
 
Vicks.Louise
Member Avatar
Member
[ *  *  * ]
I tried to use this but nothing came up on my profile

Can it be done without an award image? just text?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
If you want to use text only, I suggest using the Admin Only Edit profile field.
Offline Profile Quote Post Goto Top
 
Vicks.Louise
Member Avatar
Member
[ *  *  * ]
Cory
Jul 17 2011, 12:14 PM
If you want to use text only, I suggest using the Admin Only Edit profile field.
I don't mind using graphics just wonders if it could be done. I couldn't get the system to work though dunno what I did wrong
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Please post the code you tried to use.
Offline Profile Quote Post Goto Top
 
Vicks.Louise
Member Avatar
Member
[ *  *  * ]
This was exact coding i used, do i have to put a pic in for it to show?

Code: HTML
 
<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Achievements",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[3588776,"club50","award image","Achieved by reaching 50 posts","16th July 2011"],
[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>
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Achievements",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[3588776,"club50","","Achieved by reaching 50 posts","16th July 2011"]
]
}
//]]>
</script>
<script type="text/javascript" src="http://z3.ifrm.com/142/141/0/p239659/tooltipawards.js"></script>
Try that instead.
Offline Profile Quote Post Goto Top
 
Ephatha
Member
[ * ]
Thank you SO much, Cory. The code you gave me worked. I am soooo happy. That gave me some trouble. I'm a cellshading artist and can do graphics too. Shoot me a message if you want anything in that department. ^^
-heads off-
Offline Profile Quote Post Goto Top
 
Vicks.Louise
Member Avatar
Member
[ *  *  * ]
Ok so the code is working fine for me but now how do i add images as ive had some time to make some
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
In this code, add the image URL in between the two quotation marks ("").
Offline Profile Quote Post Goto Top
 
Vicks.Louise
Member Avatar
Member
[ *  *  * ]
Tried that and the whole system just dissapeared :S

Code: HTML
 
<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Achievements",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[3588776,"Club25","<img src="http://img194.imageshack.us/img194/4895/club25.jpg" alt="Image Hosted by ImageShack.us"/>","Achieved by reaching 25 posts","17th July 2011"]
]
}
//]]>
</script>
<script type="text/javascript" src="http://z3.ifrm.com/142/141/0/p239659/tooltipawards.js"></script>




^^^Exact coding used all i changed was adding the <img> code in between the " "
I am useless with coding :annoyed:
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
<img src="http://img194.imageshack.us/img194/4895/club25.jpg" alt="Image Hosted by ImageShack.us"/>
Remove that and just use this:
Code:
 
http://img194.imageshack.us/img194/4895/club25.jpg
Offline Profile Quote Post Goto Top
 
Vicks.Louise
Member Avatar
Member
[ *  *  * ]
That worked thanks :)

Without getting too complicated is there a way to make awards show in profiles? If not it doesn't matter just wondered :)
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