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,965 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:
Pikachuuuu
Member
[ * ]
I'm sorry if this has been asked before! Quite frankly, I don't want to go through 21 pages @__@ But I wanted to ask if there was any way to double up on this code? So basically, two or more of that code. I tried manipulating the code a bit but to no avail. Can anyone help?
Offline Profile Quote Post Goto Top
 
V1gilante
Member
[ * ]
Hello I am having trouble with the code it will not display at all. Here is my code and what am I doing wrong thanks
Code:
 
<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Awards",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[3491683,"Supreme Overlord","http://i46.tinypic.com/bz9ms.jpg","Supreme Leader of the Krogan Empire","20 January 2013],
[3469663,"System Alliance Marine","http://i45.tinypic.com/ehyko9.jpg","Private Second Class&Second
Lieutenant ","20 January 2013"],
[3513385,"The Illusive Woman","http://i45.tinypic.com/bafqe.jpg","Head Protector of Humanity","17 February 2013"],
[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
 
Akhil-10
Member Avatar
Imagination Is The Beginning Of Creation
[ *  * ]
that's really a better code for advancing awards..Nice!
Offline Profile Quote Post Goto Top
 
JAR
Member Avatar
Fortnite Noob
[ *  *  *  * ]
V1gilante
Feb 18 2013, 03:53 AM
Hello I am having trouble with the code it will not display at all. Here is my code and what am I doing wrong thanks
Code:
 
<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Awards",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[3491683,"Supreme Overlord","http://i46.tinypic.com/bz9ms.jpg","Supreme Leader of the Krogan Empire","20 January 2013],
[3469663,"System Alliance Marine","http://i45.tinypic.com/ehyko9.jpg","Private Second Class&Second
Lieutenant ","20 January 2013"],
[3513385,"The Illusive Woman","http://i45.tinypic.com/bafqe.jpg","Head Protector of Humanity","17 February 2013"],
[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>

Try this:
Code:
 
<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Awards",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[3491683,"Supreme Overlord","http://i46.tinypic.com/bz9ms.jpg","Supreme Leader of the Krogan Empire","20 January 2013],
[3469663,"System Alliance Marine","http://i45.tinypic.com/ehyko9.jpg","Private Second Class&Second
Lieutenant ","20 January 2013"],
[3513385,"The Illusive Woman","http://i45.tinypic.com/bafqe.jpg","Head Protector of Humanity","17 February 2013"]
]
}
//]]>
</script>
<script type="text/javascript" src="http://z3.ifrm.com/142/141/0/p239659/tooltipawards.js"></script>


The only problem was you need to remove any unneeded
Code:
 
[user id,"award name","award image","award description","award date"]
from the script. And after final User Id, be sure to remove the comma.

Hope this helps.
Offline Profile Quote Post Goto Top
 
ringthebellamy
Member Avatar
Dum Spiro Spero
[ * ]
This is absolutely gorgeous. Works well. Thank you so much!
Offline Profile Quote Post Goto Top
 
VeryColdAir
Member Avatar
Member
[ * ]
I have images that are 9x20, 10x20, 10x21, and 11x20 that I want to use, but whenever I add one that's a different size than the thumbnail size it makes the badge look mess-up. Is it possible to allow the award thumbnails to be the default size of the image and not expand/shrink to keep the thumbnail size?

(Sorry if there was already asked, but when I looked though the topic I didn't see the question [if it exists].)
Offline Profile Quote Post Goto Top
 
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
Hi everyone, thanks for your support with this script.

I've been looking through your comments and it's quite obvious to me that the whole idea of having to add line after line of code for separate awards is both tedious and annoying. So, I've made a second version of this which will be released in my Dynamo code (see here). It will work much like it currently does, but there will be no need to access the ACP to hand out awards. This will all be done through the forum page and it will not add any unnecessary code to your board template page! Look out for more info on the release date soon :) .
Offline Profile Quote Post Goto Top
 
polocolo
Member Avatar
Member
[ *  *  * ]
Great that you're back!
Offline Profile Quote Post Goto Top
 
Twinkle And Kessie
Member Avatar
Also Known As Carol And Nella
[ *  * ]
This is a fabulous set of codes, works flawlessly. :)
Thanks for sharing it with us. ^_^
Offline Profile Quote Post Goto Top
 
somax-
Member
[ * ]
Got 1 question. Im terrible at making codes. But when I see them I understand how to use them. Now. I was wondering if there was a way to make a webpage on my forum which has a list of all the available awards. Or all the awards presented up to this point.
Offline Profile Quote Post Goto Top
 
Vertigo22
Member
[ * ]
This works great! I have just one question.

Is it possible to change the word "Received:" in the tool tip pop up to something else so that I can input something other than date received for "award date"
Offline Profile Quote Post Goto Top
 
Sheyney Fox
Member Avatar
Member
[ *  * ]
What a lovely code, thank you Viral. :D
Offline Profile Quote Post Goto Top
 
Parasky
Member Avatar
Member
[ * ]
Sorry if I necro this thread, but I have been having some trouble getting this code to work. From what I can tell, it should be working. This is what I have under my Below the Board section:

Quote:
 

<script type="text/javascript" src="http://z3.ifrm.com/93/186/0/f677169/AwardTest.js"></script>
<script type="text/javascript" src="http://z3.ifrm.com/142/141/0/p239659/tooltipawards.js"></script>


The AwardTest.js file is linked to a file I uploaded using the upload manager, which contains the following code (warning, it's long):

AwardTest.js


I can't seem to find anything wrong with it. I've triple checked my code, but it doesn't show up on my members' mini-profiles. When I only had one award on there it showed up just fine, but now that I've added all these none of them will display. By all means this should be working. I don't appear to have overlooked any simple mistakes like a missing quotation or commas. Maybe a fresh set of eyes can find an error I missed? Or perhaps I've overlooked something else entirely? I'm at my wits end, I hope somebody here can help.

EDIT: Disregard this post. I just realized I forgot to put commas after each entry. It's working now.
Edited by Parasky, Feb 14 2014, 02:25 AM.
Offline Profile Quote Post Goto Top
 
beastboybrown
Member Avatar
Member
[ *  * ]
Just to try this I did a small test to see if it worked and placed some unserious awards up.....

Code:
 
<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Awards",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[Clarity,"Nagging Everyones head off","http://i45.tinypic.com/6hotic.jpg","Killing over 9000! people in chat with her nagging","today"],
[beastboybrown@yahoo.com,"Best person ALIVE","http://i46.tinypic.com/20771bn.jpg","Obvious","today"],
[Drderpypoodle,"Being Gay","http://i49.tinypic.com/347zm8z.jpg","Suck over 1 million dicks","today"],
[Golem,"For Nothing","http://i45.tinypic.com/21cxq2w.jpg","Being a rock guy","today"]
]
}
//]]>
</script>
<script type="text/javascript" src="http://z3.ifrm.com/142/141/0/p239659/tooltipawards.js"></script>


And it didnt work O.o Help.... please?

Offline Profile Quote Post Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Okay, I've added this code to my board and it looks weird when I hover (The Award Title doesn't have a background?)
My guess was that it was the CSS but even on a different theme (Zeta Original) it showed the same.
Posted Image


Also, is it possible to center the awards and the word "Awards:" so that all words are centered right below where it says "Awards:"?













beastboybrown
Feb 16 2014, 09:58 AM
Just to try this I did a small test to see if it worked and placed some unserious awards up.....

Code:
 
<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Awards",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[Clarity,"Nagging Everyones head off","http://i45.tinypic.com/6hotic.jpg","Killing over 9000! people in chat with her nagging","today"],
[beastboybrown@yahoo.com,"Best person ALIVE","http://i46.tinypic.com/20771bn.jpg","Obvious","today"],
[Drderpypoodle,"Being Gay","http://i49.tinypic.com/347zm8z.jpg","Suck over 1 million dicks","today"],
[Golem,"For Nothing","http://i45.tinypic.com/21cxq2w.jpg","Being a rock guy","today"]
]
}
//]]>
</script>
<script type="text/javascript" src="http://z3.ifrm.com/142/141/0/p239659/tooltipawards.js"></script>


And it didnt work O.o Help.... please?

The error is the beginning of each award string.
You can't put the user's name or Email. You have to put their ID.
To find the user's ID you go to their profile and you will see a number in the URL, that is their ID.

For example, here is the link to your profile on here: http://if.invisionfree.com/profile/2097297/

What you need to put in the beginning of each string is highlighted in blue here: http://if.invisionfree.com/profile/2097297/

So this is how the code should look:
Code:
 

<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Awards",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[2097292,"Nagging Everyones head off","http://i45.tinypic.com/6hotic.jpg","Killing over 9000! people in chat with her nagging","today"],
[2097292,"Best person ALIVE","http://i46.tinypic.com/20771bn.jpg","Obvious","today"],
[2097292,"Being Gay","http://i49.tinypic.com/347zm8z.jpg","Suck over 1 million dicks","today"],
[2097292,"For Nothing","http://i45.tinypic.com/21cxq2w.jpg","Being a rock guy","today"]
]
}
//]]>
</script>
<script type="text/javascript" src="http://z3.ifrm.com/142/141/0/p239659/tooltipawards.js"></script>


You need to change where you see "2097292" to the ID of the user you want to give the award to.
Edited by Kankuro, Feb 25 2014, 01:32 AM.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
ZetaBoards - Free Forum Hosting
Fully Featured & Customizable Free Forums
Learn More · Sign-up for Free
Go to Next Page
« Previous Topic · ZetaBoards Codes & Modifications · Next Topic »
Add Reply