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:
Locked Topic
[ C ] Badge System; Half done for you.
Topic Started: Feb 21 2014, 07:38 AM (617 Views)
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
Board Address: http://thenerddomain.co.vu
Board Software: ZetaBoards
Description: For a while, I was using an award code that was provided on the resources but because I've got to that point where my board wrapper is full, I'm forced to create my own code to cut down on the character numbers. This is not a problem except I can't get my head around a certain issue. At the moment the code works: It adds a badge (or award) to a user's profile. But I also want it bring up a popup box revealing the details of the badge and why it was given. The code is below.
Code:
 
<style type="text/css">
.FpopupBG {
position:fixed;
left:0px;
top:0px;
bottom:0px;
right:0px;
width:100%;
height:100%;
z-index:99;
background:rgba(0,0,0,0.5);
}
.Fpopup {
position:fixed;
left:25%;
top:25%;
height:300px;
width:600px;
z-index:100;
background:#fff;
border:2px solid #404040;
}
</style>

<script type="text/javascript">
function addBadge(uid,name,desc,image,date) {
if($("td.c_username a[href*=/"+uid+"/]").parent().parent().next().find($("dl.user_info dt + dd[name*=badge]")).length == 0) $("td.c_username a[href*=/"+uid+"/]").parent().parent().next().find('dl.user_info:nth-of-type(1)').append("<dt>Badges:</dt><dd name='badge-"+uid+"'></dd>");
$("dl.user_info dd[name=badge-"+uid+"]").prepend("<a href='#'><img src='"+image+"' alt='Badge' style='height:20px;width:20px' /></a>");
}
addBadge(3714108,"Hello World","Cos I'm nice","http://i.imgur.com/2tG28N1.png","21/05/2253");
</script>

Would any coder be able to add-in a popup box `onmousedown` feature. I've provided the CSS for it and the code is mostly done but everything I've tried has resulted in errors. Normally I wouldn't care and keep working at it but I'm on a deadline to get this out soon. If anyone can help, I'll be forever thankful :)
Edited by Ferby, Feb 22 2014, 10:36 PM.
Offline Profile Goto Top
 
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
I've updated the code because there was an error I had missed. Is anyone able to help? :)
Offline Profile Goto Top
 
ksh
Member
[ *  * ]
By using this code, you abide by my terms and conditions as stated in my signature.

Place these in the Javascripts section in Board Template if you are not already running a jQuery UI library. By default, ZetaBoards does not come with it.
Code:
 

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>



Place these in the Below the Board OR Above the copyright section in Board Template.
Code:
 

<script type="text/javascript">
var badge_system_icons = [];
badge_system_icons["USER_ID"] = [
{ img_url: "IMG_URL_1", badge_title: "title 1", badge_reason: "reason 1", badge_giver: "Shion" },
{ img_url: "IMG_URL_2", badge_title: "title 2", badge_reason: "reason 2", badge_date: "2/23/2014" }
];
</script>
<script type="text/javascript" src="//z5.ifrm.com/30345/161/0/p1179641/badge_system.min.js"></script>


Since you appear to be a coder, I'm sure you can figure out syntax. Available options are: img_url, badge_title, badge_reason, badge_giver, and badge_date. If any are missing, the line item will not appear in the popup. So you do not have to use all of them. However, if img_url is NOT used, no badge will be displayed and the line would be meaningless. In other words, img_url is required.

You can add more badge_system_icons lines for multiple users.

I am aware that the setup is different and that I didn't use any of the code that you supplied. I find the code way too inefficient because it has to loop through the same elements every time you call addBadge.
Edited by ksh, Feb 23 2014, 08:38 PM.
Offline Profile Goto Top
 
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
As much as I thank you for your help ksh, I managed to fix the system on my own. The reason I wanted to use functions to add badges is because they're easier to host and still give me the ability to add more to the board template whilst the actual code is hosted. I know it's a bit more inefficient but it's the most beneficial.
Offline Profile Goto Top
 
ksh
Member
[ *  * ]
You can do the same with my code, or rather any code for that matter. It doesn't bother me either way so if this request is resolved, it'll be closed soon enough. All the best.
Offline Profile Goto Top
 
Helena
Member Avatar
M is for Mod

Completed!

Your request has been completed. If you have any questions or concerns regarding the state of your request, please feel free to contact me via PM.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Closed Requests · Next Topic »
Locked Topic