Welcome Guest [Log In] [Register]
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 (33,084 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
 
Poui-ZNR
Member Avatar
Member
[ * ]
Hi, I'm continuing my question from before if you don't mind :)

It's using the regular thead th, which the 3-piece code apparently nullifies. After taking a closer look at the coding I found the popups really didn't have a class, so I tried adding one (hopefully you don't mind my messing with your code for testing purposes ^^;), and styling that in the CSS worked fine.

Also, is there a way to give multiple members the same award, other than copy-pasting the descriptions etc. for each one?

But this is a really great code; thanks a lot for making it :D
Offline Profile Quote Post Goto Top
 
Niss
Member Avatar
Member
[ * ]
Poui
Nov 14 2009, 03:50 PM


Also, is there a way to give multiple members the same award, other than copy-pasting the descriptions etc. for each one?

But this is a really great code; thanks a lot for making it :D
Me too
I have the same question ... ^^Uu

( Sorry ,if my english is bad :unsure: )

Offline Profile Quote Post Goto Top
 
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
At the moment, I'd rather keep it simple by having one line for each award, but I might expand on that in the future. I don't mind if you edit, just as long as the copyright stays intact and the code isn't redistributed :) .
Offline Profile Quote Post Goto Top
 
Niss
Member Avatar
Member
[ * ]
Viral.
Nov 14 2009, 09:17 PM
At the moment, I'd rather keep it simple by having one line for each award, but I might expand on that in the future. I don't mind if you edit, just as long as the copyright stays intact and the code isn't redistributed :) .
whatever

Viral.. you're Genial, I'm your fan ^ ^

Thanks for your work <3.
Offline Profile Quote Post Goto Top
 
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
Preview: http://s1.zetaboards.com/zbAIO2/topic/2231766/1/

(can't edit first post)
Offline Profile Quote Post Goto Top
 
slayer766-ZNR
Member
[ *  *  *  * ]
Edited that for ya' Viral. ^_^
Offline Profile Quote Post Goto Top
 
n2thecubs
Member Avatar
Member
[ *  *  * ]
That's odd. On my forum when I hover over the awards it sticks to the mouse. It doesn't fade or anything. Also, the top-bar is missing on the top (must be an issue with my template) - but hopefully you can tell me what's wrong.

Posted Image

Please ignore the award images, as they're just test examples.

Thanks, I truly appreciate your help, Viral. You're an amazing coder.
Offline Profile Quote Post Goto Top
 
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
What's the link to your forum, and a topic with the awards showing? Also, please post the code you are using and the browser you are using.
Offline Profile Quote Post Goto Top
 
Reid
Member Avatar
una trappola!

Viral.
Nov 25 2009, 02:15 PM
What's the link to your forum, and a topic with the awards showing? Also, please post the code you are using and the browser you are using.
The top bar not showing is part of the 3-piece h2 code. Unfortunately, they are not stored in functions, so there's no way for coders to compensate as far as I know.
Offline Profile Quote Post Goto Top
 
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
Yeah, I realised that, and I wish choco made that in to a function =\ . It's obvious the person who created the skin didn't fix the defaults though, but I'm more interested in the multiple overlays >.< .
Offline Profile Quote Post Goto Top
 
n2thecubs
Member Avatar
Member
[ *  *  * ]
Viral.
Nov 25 2009, 05:49 PM
Yeah, I realised that, and I wish choco made that in to a function =\ . It's obvious the person who created the skin didn't fix the defaults though, but I'm more interested in the multiple overlays >.< .
Well, it seemed to be a problem with my computer. I wasn't sure what the problem was. My only concern is that it'd show like that for other people. I recently reinstalled XP and all of a sudden it's working. It's a shame those top bars won't show, though.

:no:
Offline Profile Quote Post Goto Top
 
thebawp-ZNR
Member
[ * ]
Very nice code, I don't suppose there's a way to allow the awards to be also clickable so they take you to another location - for instance, our forums have awards for writing, art etc. So I love the idea of the tooltip, but I'd still like people to be able to click the award and see the piece of writing or art that earned them the award in the first place!
Offline Profile Quote Post Goto Top
 
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
I'll think about that for the next version ;) .
Offline Profile Quote Post Goto Top
 
thebawp-ZNR
Member
[ * ]
Cool, I shall look forward to it!
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Codes & Modifications · Next Topic »
Add Reply