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
  • Pages:
  • 1
  • 5
  • 25
Advanced Award System v1.0; with tooltips
Topic Started: Nov 7 2009, 01:20 PM (46,982 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:
TGP
Member
[ * ]
Viral.
Nov 7 2009, 01:20 PM
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 :) .
[990197,"Staffer","http://i49.tinypic.com/1zgephw.png","Awarded_to_those_with_a_staff_position","1/13/10"]
Wasn't sure if I should use <img src=> or anything. And yes, it's a Nintendo forum.
I tried the \ thing but that also didn't work out.
Excuse the quote, that was a mistake.
Edited by TGP, Jan 13 2010, 09:44 PM.
Offline Profile Quote Post Goto Top
 
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
Try this:

Code:
 
<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Awards",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[990197,"Staffer","http://i49.tinypic.com/1zgephw.png","Awarded to those with a staff position","1/13/10"]
]
}
//]]>
</script>
<script type="text/javascript" src="http://z3.ifrm.com/142/141/0/p239659/tooltipawards.js"></script>


That should work :) .
Edited by Viral, Apr 11 2010, 10:14 AM.
Offline Profile Quote Post Goto Top
 
TGP
Member
[ * ]
Viral.
Jan 14 2010, 08:08 AM
That should work :) .
Ah, thank you, we got the mod working. It turns out that the problem was that my copy/paste messed up the layout, so the other tech admin eventually repaired the error.

Working fine now, but whenever I access a page my window freezes for about 5 minutes (it has always done this with Zetaboards, though) and when it unfreezes, the mouseover stops working.
But eh, I suppose it's just my browser (IE 6), since it seems to work perfectly for the members.

Great idea, and great code. :lol:
Offline Profile Quote Post Goto Top
 
StormyWolf
Member Avatar
Member
[ * ]
O_o IE 6?! You really need to upgrade to 8 asap, or switch to a different (but still updated) browser.
Offline Profile Quote Post Goto Top
 
Gee2909-ZNR
Member Avatar
Member
[ * ]
Viral.
Jan 13 2010, 08:54 AM
Remove top and bottom lines of the code (the script tags). Then copy the remaining code and paste it in notepad and save it as something.js . Upload it to zetaboards or something then in your board templates add:

Code:
 
<script type="text/javascript" src="link here.js"></script>
I tried this but it didn't work.
I followed the instructions and posted the code below the board.
Can you let me know which parts of the original code I remove, pretty sure I removed the right parts.

Thank you.
Offline Profile Quote Post Goto Top
 
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
Post the link to the code you uploaded.
Offline Profile Quote Post Goto Top
 
Gee2909-ZNR
Member Avatar
Member
[ * ]
Quote:
 
<script type="text/javascript">
//<![CDATA[
var t_award = {
name : "Awards",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[10999,"We Are The SPS","http://bit.ly/amNteo","You have posted the clan URL in your Xbox profile","24/12/09"],
]
}
//]]>
</script>
<script type="text/javascript" src="http://z3.ifrm.com/142/141/0/p239659/tooltipawards.js"></script>
</script>



I removed the parts in red.
Offline Profile Quote Post Goto Top
 
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
Put this in the code you upload:

Code:
 
//<![CDATA[
var t_award = {
name : "Awards",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[10999,"We Are The SPS","http://bit.ly/amNteo","You have posted the clan URL in your Xbox profile","24/12/09"],
]
}
//]]>


And follow the instructions I gave above. Then underneath the hosted code, add this:

Code:
 
<script type="text/javascript" src="http://z3.ifrm.com/142/141/0/p239659/tooltipawards.js"></script>
Offline Profile Quote Post Goto Top
 
Gee2909-ZNR
Member Avatar
Member
[ * ]
It's working now, thank you so much for your help
Offline Profile Quote Post Goto Top
 
Rosencrantz
Member
[ * ]
I'd actually like to know how to do that too (add more awards). I'm not sure I follow though, would you walk me through it step-by-step?

When I upload the .js file, does it matter where it's hosted? i.e., can I use filefactory.com (free file hosting) and link from there? If not, how do I upload it to Zetaboards?

Thank you for your help ahead of time. I love the code. :)
Offline Profile Quote Post Goto Top
 
Xero
Member Avatar
Member
[ *  *  *  * ]
:yes: The emoticons agree. :yes:
:yes: This is a great code. :yes:
I could help if a mod would edit your first post, Viral, so that it includes the code in post #62. That's the one that worked for me and I only saw it because I decided to read the whole topic.
(Can't edit, sorry about the double post.)

How would you fix the part where there is text without the box around it? It's the name of the award in the box that appears when mouse-over.
Edited by Xero, Mar 4 2010, 01:11 PM.
Offline Profile Quote Post Goto Top
 
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
Sorry, I'm not quite understanding >< .
Offline Profile Quote Post Goto Top
 
Rosencrantz
Member
[ * ]
Not sure if you were responding to Mythos or myself.

If it was to me, I was worried about running out of space where I put the code and if I understand, there's a way to add an unlimited amount of awards by uploading a file? I'd love to know how that works in detail. I tried it, but I don't think I understood properly because it didn't work.
Offline Profile Quote Post Goto Top
 
remnightfall-ZNR
Member
[ * ]
ahhh >.< this code isnt worknig >.< im doing everything you sayyy
wait its working now, just a person cant have more then 1 award?

sorta lame :(
Edited by remnightfall-ZNR, Mar 5 2010, 09:02 PM.
Offline Profile Quote Post Goto Top
 
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
Viral.
Feb 4 2010, 10:06 AM
Put this in the code you upload:

Code:
 
//<![CDATA[
var t_award = {
name : "Awards",
thumbnail : [20,20],
closeFunction : "fade",
users : [
[10999,"We Are The SPS","http://bit.ly/amNteo","You have posted the clan URL in your Xbox profile","24/12/09"],
]
}
//]]>


And follow the instructions I gave above. Then underneath the hosted code, add this:

Code:
 
<script type="text/javascript" src="http://z3.ifrm.com/142/141/0/p239659/tooltipawards.js"></script>
Rosen, follow the steps above. To upload it to Zetaboards, make a post somewhere on your board (maybe an extra hidden forum) and attach the file to it. Then to update it, edit the post and click replace file next to the uploaded file.
remnightfall
Mar 5 2010, 08:48 PM
ahhh >.< this code isnt worknig >.< im doing everything you sayyy
wait its working now, just a person cant have more then 1 award? <br /><br /> sorta lame :(
Just add another line with the same user id, it will work.
Edited by Viral, Mar 6 2010, 10:11 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
  • Pages:
  • 1
  • 5
  • 25