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,968 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:
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
In case you miss my post, I replied to your topic, Hussar. :)
Offline Profile Quote Post Goto Top
 
Halcorp
Member
[ * ]
Cory, I have a board that awards various medals for milestones, for instance board posts, we have 6 levels we want to award a medal for but we would like for the code to be written so that it does it automatic once a member reaches a number of posts. As an example, when a member reaches 1000, he gets a medal, when he reaches 2500 he gets another level award, and when he gets 5000 he gets another medal automatically. Can this be done with your code, at the moment I have to put it in manually each level.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
<script type="text/javascript">
$('dl.user_info').after('<dl class="awards"><dt>Awards</dt><dd style="margin-left: 8px"><em>None</em></dl>');

$('td.c_user dl.user_info dt:contains(Posts:)').next('dd').each(function() {
if (parseInt($(this).html()) >= 1000) {
$(this).parent().next('dl.awards').find('dd').html('<img src="IMAGE_URL" alt="Award" />');
}
});

$('td.c_user dl.user_info dt:contains(Posts:)').next('dd').each(function() {
if (parseInt($(this).html()) >= 2500) {
$(this).parent().next('dl.awards').find('dd').html('<img src="IMAGE_URL" alt="Award" /><img src="IMAGE_URL" alt="Award" />');
}
});

$('td.c_user dl.user_info dt:contains(Posts:)').next('dd').each(function() {
if (parseInt($(this).html()) >= 5000) {
$(this).parent().next('dl.awards').find('dd').html('<img src="IMAGE_URL" alt="Award" /><img src="IMAGE_URL" alt="Award" /><img src="IMAGE_URL" alt="Award" />');
}
});
</script>
Try that. All you have to do is change 'IMAGE_URL' and you can repeat one of the three snippets for another post count level.
Offline Profile Quote Post Goto Top
 
Halcorp
Member
[ * ]
It appears to be working, however in the mini profile it shows awards: none, so the count feature is not working.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Sorry about that, it appears you need the comma in the post count numbers.
Offline Profile Quote Post Goto Top
 
BanTheCow
Member
[ * ]
I just updated the file for the awards on my forum and now it's not working. I've tried looking for any errors in my additions which would have stuffed it up, but I can't find anything.

Not too sure what to do.

Here is the file: http://z1.ifrm.com/2511/52/0/f5016643/pgfawards.js
Offline Profile Quote Post Goto Top
 
RyuraGS-ZNR
Member Avatar
Generation Studio
[ *  * ]
BanTheCow
Jan 7 2012, 02:17 AM
I just updated the file for the awards on my forum and now it's not working. I've tried looking for any errors in my additions which would have stuffed it up, but I can't find anything.

Not too sure what to do.

Here is the file: http://z1.ifrm.com/2511/52/0/f5016643/pgfawards.js
You've got an extra " in one of your entries:
Code:
 
[4116902,"Scavenger Hunt (January 2011)","http://z1.ifrm.com/2511/52/0/f5016640/scavengerhuntawardsmall-01.png","Achieved for completing the January 2012 Scavenger Hunt","7th January 2012"],
[4116902,"1000 Posts","http://z1.ifrm.com/2511/52/0/f5016535/1000postssmall-01.png","Achieved for posting over 1000 times.","7th January 2012""],

Should be
Code:
 
[4116902,"Scavenger Hunt (January 2011)","http://z1.ifrm.com/2511/52/0/f5016640/scavengerhuntawardsmall-01.png","Achieved for completing the January 2012 Scavenger Hunt","7th January 2012"],
[4116902,"1000 Posts","http://z1.ifrm.com/2511/52/0/f5016535/1000postssmall-01.png","Achieved for posting over 1000 times.","7th January 2012"],
Offline Profile Quote Post Goto Top
 
BanTheCow
Member
[ * ]
Ohhhh, thanks for your help! :)
Offline Profile Quote Post Goto Top
 
chilbot
Member
[ * ]
Spoiler: click to toggle

Spoiler: click to toggle


But it is not working can you help me?

Here's the code I have put in Notepad and saved it as a .js but it's not working.

Spoiler: click to toggle

I know not to put the script tags in so.

Any suggestions?

Got it to work
thanks great code :)


Also is there a way to classify users ID's so that it doesn't get mixed up so like if I wanted to do just myself then do another space in the code where I can just have another users id so I can keep them separated and organized?
Edited by chilbot, Jan 12 2012, 06:18 AM.
Offline Profile Quote Post Goto Top
 
Nimtai-ZNR
Member
[ * ]
Is there anyway to add a line break between "Awards:" and the beginning of the actual icons? On my boards, they're showing up on the same line, I would rather they start on the following line.

So it would look like this -

Awards:
[awards here] [and here] [and here] [etc]

Thanks!
Offline Profile Quote Post Goto Top
 
Ithens
Member
[ * ]
I can't get it to work,I mean the original one by Viral, nothing shows up! :cry:
Code:
 
<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Awards",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[3152600,"LVL 30","Http://i.imgur.com/cof7w.png","Reward to the Necromancer whom reached Lvl 30 , Congratualation!","18-01-2012"],
[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>


Is it my fault?Please help.

My site if you need to see:
Code: HTML
 
W11.zetaboards.com/royal_necro_warriors/
Offline Profile Quote Post Goto Top
 
blackluster.rose
Member Avatar
Member
[ *  * ]
Nimtai
Jan 16 2012, 06:22 PM
Is there anyway to add a line break between "Awards:" and the beginning of the actual icons? On my boards, they're showing up on the same line, I would rather they start on the following line.

So it would look like this -

Awards:
[awards here] [and here] [and here] [etc]

Thanks!
This. I was thinking the same thing. <3

That or is there a way to create a whole new category for this? Instead of having it all in one block, is there a way I could make a new one and have the awards fit into that block only? That would even be better for I want. :3
Offline Profile Quote Post Goto Top
 
RyuraGS-ZNR
Member Avatar
Generation Studio
[ *  * ]
Ithens
Jan 18 2012, 03:17 AM
I can't get it to work,I mean the original one by Viral, nothing shows up! :cry:
Code:
 
<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Awards",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[3152600,"LVL 30","Http://i.imgur.com/cof7w.png","Reward to the Necromancer whom reached Lvl 30 , Congratualation!","18-01-2012"],
[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>


Is it my fault?Please help.

My site if you need to see:
Code: HTML
 
W11.zetaboards.com/royal_necro_warriors/
You need to take away the part that says

Code:
 
[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"]


Those are just placeholders intended for you to edit or remove.
blackluster.rose
Jan 19 2012, 05:02 PM
Nimtai
Jan 16 2012, 06:22 PM
Is there anyway to add a line break between "Awards:" and the beginning of the actual icons? On my boards, they're showing up on the same line, I would rather they start on the following line.

So it would look like this -

Awards:
[awards here] [and here] [and here] [etc]

Thanks!
This. I was thinking the same thing. <3

That or is there a way to create a whole new category for this? Instead of having it all in one block, is there a way I could make a new one and have the awards fit into that block only? That would even be better for I want. :3
Creating a new category is a total pain, but to move the awards down:

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>
<script>$('dt:contains("Awards")').css("float","none").next().css("margin","0");</script>


If you already have it installed, you just need to add the last line (<script>$('dt:contains("Awards")').css("float","none").next().css("margin","0");</script>).
Edited by RyuraGS-ZNR, Jan 22 2012, 01:05 PM.
Offline Profile Quote Post Goto Top
 
Ithens
Member
[ * ]
It still not working...
<3 Thank u!
Edited by Ithens, Jan 23 2012, 09:30 AM.
Offline Profile Quote Post Goto Top
 
RyuraGS-ZNR
Member Avatar
Generation Studio
[ *  * ]
Ithens
Jan 23 2012, 09:29 AM
It still not working...
<3 Thank u!
Oh, then remove the comma at the end of the one award you do have.
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