inherit
*this CT deserves an achievement*
136400
0
Jun 25, 2021 18:23:00 GMT -8
Trill
hola
6,232
January 2009
ghbraingle
|
Post by Trill on Jan 14, 2010 13:05:16 GMT -8
Yes, if you could have them resized, that would be great. I'm not sure about a certain pixel height/width, but you can put them at whatever size you think would be appropriate, and then I can fiddle around with the code to adjust the size, if needed. Displaying them all, but grayed out (or a low opacity) would be great, if they haven't earned the award yet. One concern is about members with slow internet / bandwidth issues... I'd assume displaying 126 images at one time would take a while to load... so if maybe, before viewing all the awards, there's like a link or image that says "View Chocolate Frog Cards" or something like that. Would that help those with slow internet, or would the images render in the browser automatically either way, even if they weren't being displayed yet? I don't have all the descriptions prepared yet (sorry!), but I'm fairly competent when editing codes, so I should be able to add them in later. If you wanted to use some descriptions/titles for testing: Card 1: #1: Merlin Awarded for reaching 2000 posts. Card 2: #2: Cornelius Agrippa Awarded for purchasing a subscriber package. (just examples) If you could break the awards up into rows of 10, that would be great. Then, when they reach awards #102-126, the specialized cards, can they be separated into the groups somehow? Thanks so much for all your help Todge.
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,290
January 2004
todge
|
Post by Todge on Jan 14, 2010 14:15:48 GMT -8
Hmmm.. 126 images at around 15kb each adds up to 1.8mb. That could be a little slow with a dial-up connection, about 5 minutes or so..
The images 'should' be cached, so once they have been loaded onto the PC, every other view should be a lot quicker, so unless the member empties their cache they should only have to wait for the images to load once, there after they would be pulled from HD. I will write the code to load them automatically only on the main profile page and not on the posting page, so it shouldn't slow your forum down any in normal use.
|
|
inherit
*this CT deserves an achievement*
136400
0
Jun 25, 2021 18:23:00 GMT -8
Trill
hola
6,232
January 2009
ghbraingle
|
Post by Trill on Jan 14, 2010 14:25:22 GMT -8
Sounds great, thanks!
They'd only be loaded/seen in actual profiles then, right? Like at an action=viewprofile page? And not in the mini profile, the actual profile (so they can fit), kind of like the SZ example, right? Sorry for any confusion - my fault for not explaining that.
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,290
January 2004
todge
|
Post by Todge on Jan 15, 2010 12:37:09 GMT -8
Can you put this into your Main Footer then view a profile and tell me if the arrangement is to your liking please...
<script type="text/javascript"> <!-- // Awards system..
var cardcode = 'http://i802./yy303/iceblade_gh/cards/'; var awdtot = 126;
var awdimgs = new Array();
if(location.href.match(/action=viewprofile/)) {
var awardsCell = document.getElementsByTagName('td'); for(a=0; a<awardsCell.length; a++) { if(awardsCell[a].colSpan == '2' && awardsCell[a].innerHTML.match(/Recent Activity/)) { awardsCell = awardsCell[a].parentNode; break; }}
var newTR = document.createElement('TR'); var newTD = document.createElement('TD'); newTD.id = 'awards'; newTD.colSpan = 2; newTR.appendChild(newTD);
var awardContent = '<font size="2"><b>Awards Earned</b><hr size="1"></font><table width="100%"><tr><td align="center" width="66%" style="border-right: 1px solid black;">';
for(a=1; a<102; a++) { b=a-1; if(b.toString().match(/0$/)) {awardContent += '<br>';} if(a<16) {awardContent += '<img src="'+cardcode+a+'.gif" border="0" alt="'+0+a.toString(16)+'" width="9%">';} else {awardContent += '<img src="'+cardcode+a+'.gif" border="0" alt="'+a.toString(16)+'" width="9%">';} } awardContent += '<td/><td width="33%" valign="top" align="center"><br>'; for(a=102; a<127; a++) {awardContent += '<img src="'+cardcode+a+'.gif" border="0" alt="'+a.toString(16)+'" width="18%">';}
awardContent += '</td></tr></table>'; newTD.innerHTML += awardContent; awardsCell.parentNode.insertBefore(newTR,awardsCell);
} // --> </script>
|
|
inherit
*this CT deserves an achievement*
136400
0
Jun 25, 2021 18:23:00 GMT -8
Trill
hola
6,232
January 2009
ghbraingle
|
Post by Trill on Jan 15, 2010 12:53:37 GMT -8
LOVE IT! I can't wait to see how the rest turns out! So when an award is clicked on (or hovered, which would be cool, if possible), the image at a larger size as well as the description and title would be displayed under the special sets of cards? Thank you so much! Edit: This won't effect the Money code I have installed, which adds the the custom title, would it? Do I need to remove all custom title codes and legit custom titles before using this code?
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,290
January 2004
todge
|
Post by Todge on Jan 15, 2010 15:52:03 GMT -8
...So when an award is clicked on (or hovered, which would be cool, if possible), the image at a larger size as well as the description and title would be displayed under the special sets of cards? Thank you so much! That's the plan.. Yup..
|
|
inherit
*this CT deserves an achievement*
136400
0
Jun 25, 2021 18:23:00 GMT -8
Trill
hola
6,232
January 2009
ghbraingle
|
Post by Trill on Jan 15, 2010 15:53:32 GMT -8
Okay, great! Thanks.
I edited my post (above) at the same time you replied:
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,290
January 2004
todge
|
Post by Todge on Jan 15, 2010 16:19:16 GMT -8
You will certainly need to remove all legit Custom Titles to allow this code to work.. As for the money code, it MAY work with that, but I'm not going to say it will..
It could also screw up the mini-profile code you are using, depending on how it is gathering the information...
|
|
inherit
*this CT deserves an achievement*
136400
0
Jun 25, 2021 18:23:00 GMT -8
Trill
hola
6,232
January 2009
ghbraingle
|
Post by Trill on Jan 15, 2010 16:52:26 GMT -8
Okay, so I'll remove all custom titles now, then. Money code... we'll see how it goes. So when someone GAINS an award, that's when the award's code is put into the custom title, right? Or will ALL custom titles have ALL award codes but an "on" or "off" variation?
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,290
January 2004
todge
|
Post by Todge on Jan 16, 2010 9:31:57 GMT -8
When you click on a card in their profile, the code will be added to the Custom Title automatically (Or removed if they already have that award).. All you'll need to do is confirm it.
|
|
inherit
*this CT deserves an achievement*
136400
0
Jun 25, 2021 18:23:00 GMT -8
Trill
hola
6,232
January 2009
ghbraingle
|
Post by Trill on Jan 16, 2010 10:24:32 GMT -8
Okay, so if some members aren't eligible to be earning the awards (ie, secondary accounts), they could still keep a custom title? Thank you.
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,290
January 2004
todge
|
Post by Todge on Jan 17, 2010 2:12:09 GMT -8
Any Custom Title can be kept until an award is given..
The code will remove any existing Custom Title and replace it with the coding necessary for the Awards System, just don't use [AWD] in the title you give anyone.
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,290
January 2004
todge
|
Post by Todge on Jan 18, 2010 13:56:03 GMT -8
Here's a 'working copy' of the code... It's not quite finished, as there's some tidying up I would like to do, as well as add a couple of other functions etc.. But it is useable, and will give you something to play with in the mean time.. Put it in your Global Footer.. <style type="text/css"> <!-- .nope { opacity: 0.5; filter:alpha(opacity=40); } .yep { opacity: 1.0; filter:alpha(opacity=100); } --> </style>
<script type="text/javascript"> <!-- // Awards system..
// Edit Below...
var cardcode = 'http://i802./yy303/iceblade_gh/cards/'; var awdInfo = new Array(126);
awdInfo[1] = "Merlin|The Wizard"; awdInfo[2] = "Cornelius Agrippa|The Alchemist"; awdInfo[3] = "Elfrida Clagg|Chiefteness of the Wizard's Council"; // Edit Above...
var awdimgs = new Array(); var awdsofar = '';
// Get received awards from the mini-profile...
if(location.href.match(/action=viewprofile/)) { var miniPro = document.getElementsByTagName('td'); for(m=0; m<miniPro.length; m++) { if(miniPro[m].className.match(/windowbg/) && miniPro[m].width == '20%' && miniPro[m].innerHTML.match(/\[AWD\]/)) {
awdsofar = miniPro[m].innerHTML.split(/\[AWD\]/)[1].split(/<br/i)[0];
var tr = 'AWD]'+awdsofar;
tr = new RegExp(tr,'i');
miniPro[m].innerHTML = miniPro[m].innerHTML.replace(tr,'').replace(/br>\[<br/i,'br');
break; }} awdsofarlength = awdsofar.length-2; for(w=awdsofarlength; w>0; w=w-2) { awdsofar = awdsofar.replace(awdsofar.substring(0,w),awdsofar.substring(0,w)+'|'); }}
// Add award images to profile page..
if(location.href.match(/action=viewprofile/)) { var awardsCell = document.getElementsByTagName('td'); for(a=0; a<awardsCell.length; a++) { if(awardsCell[a].colSpan == '2' && awardsCell[a].innerHTML.match(/Recent Activity/)) { awardsCell = awardsCell[a].parentNode; break; }}
var newTR = document.createElement('TR'); var newTD = document.createElement('TD'); newTD.id = 'awards'; newTD.colSpan = 2; newTR.appendChild(newTD);
var awardContent = '<font size="2"><b>Awards Received</b><hr size="1"></font><table width="100%"><tr><td align="center" width="66%" style="border-right: 1px solid black;">';
for(a=1; a<102; a++) { b=a-1; if(b.toString().match(/0$/)){ awardContent += '<br>';} if(a<16){ var awd = new RegExp('0'+a.toString(16)); awardContent += '<img '; if(awdsofar.search(awd) == -1){awardContent += 'class="nope" ';} awardContent += 'src="'+cardcode+a+'.gif" border="0" alt="'+awdInfo[a]+'" id="award'+0+a.toString(16)+'" width="9%">';} else{ var awd = new RegExp(a.toString(16)); awardContent += '<img '; if(awdsofar.search(awd) == -1){awardContent += 'class="nope" ';} awardContent += 'src="'+cardcode+a+'.gif" border="0" alt="'+awdInfo[a]+'" id="award'+a.toString(16)+'" width="9%">';} }
awardContent += '<td/><td width="33%" valign="top" align="center"><br>';
for(a=102; a<awdInfo.length+1; a++){ var awd = new RegExp(a.toString(16)); awardContent += '<img '; if(awdsofar.search(awd) == -1){awardContent += 'class="nope" ';} awardContent += 'src="'+cardcode+a+'.gif" border="0" alt="'+awdInfo[a]+'" id="award'+a.toString(16)+'" width="18%">';}
awardContent += '<br><br><div id="awardInfo"></div></td></tr></table>'; newTD.innerHTML += awardContent; awardsCell.parentNode.insertBefore(newTR,awardsCell);
// Add mouseover and onclick functions to the awards..
for(a=1; a<awdInfo.length+1; a++) { if(a<16){ var awd = 'award0'+a.toString(16);} else{ var awd = 'award'+a.toString(16);}
document.getElementById(awd).onmouseover = function(){ document.getElementById('awardInfo').innerHTML = '<img src="'+this.src+'"><br><b>'+this.alt.replace('|','</b><br>');}
if(pb_username == 'admin'){document.getElementById(awd).style.cursor = 'pointer'; var modLink = document.links; for(m=0; m<modLink.length; m++) { if(modLink[m].href.match(/tion=modifyprofile/)) { modLink = modLink[m].href; break; }} document.getElementById(awd).onclick = function(){ location.href = modLink+'&award='+this.id.split('award')[1]; }}}}
// Add awards code to the Custom Title field..
if(document.modifyForm && document.modifyForm.customtitle && location.href.match(/&award=/)) {
var td = document.getElementsByTagName('td'); for(t=0; t<td.length; t++) { if(td[t].className == 'titlebg' && td[t].width == '100%' && td[t].firstChild.innerHTML.match(/Modify Profile<\/b>/i)) { td[t].firstChild.innerHTML = 'Confirm Award'; var confTR = document.createElement('tr'); var confTD = document.createElement('td'); confTD.id = 'confirmation'; confTD.className = 'windowbg'; confTD.align = 'center'; confTR.appendChild(confTD); td[t+1].parentNode.parentNode.insertBefore(confTR,td[t+1].parentNode); }}
var award = location.href.split('&award=')[1]; var awdsofar = document.modifyForm.customtitle.value;
awdsofarlength = awdsofar.length-2; for(w=awdsofarlength; w>4; w=w-2) { awdsofar = awdsofar.replace(awdsofar.substring(0,w),awdsofar.substring(0,w)+'|'); }
if(awdsofar.match(/\[AWD\]/) && awdsofar.match(award)) { awdsofar = awdsofar.replace(award,''); document.modifyForm.customtitle.value = awdsofar.replace(/\|/g,''); document.getElementById('confirmation').innerHTML = '<img src="'+cardcode+parseInt('0x'+award)+'.gif"><br><b>'+awdInfo[parseInt('0x'+award)].replace('|','<\/b><br>'); document.getElementById('confirmation').innerHTML += '<br><br>You have chosen to remove this award from '+document.modifyForm.name.value; document.getElementById('confirmation').innerHTML += '. Please "Modify Profile" to confirm, otherwise return to the previous page.'; } else if(document.modifyForm.customtitle.value.match(/\[AWD\]/) && !document.modifyForm.customtitle.value.match(award)) { document.modifyForm.customtitle.value += award; document.getElementById('confirmation').innerHTML = '<img src="'+cardcode+parseInt('0x'+award)+'.gif"><br><b>'+awdInfo[parseInt('0x'+award)].replace('|','<\/b><br>'); document.getElementById('confirmation').innerHTML += '<br><br>You have chosen to award '+document.modifyForm.name.value+' this award.'; document.getElementById('confirmation').innerHTML += ' Please "Modify Profile" to confirm, otherwise return to the previous page.'; } else { document.modifyForm.customtitle.value = '[AWD]'+award; document.modifyForm.customtitle.value += award; document.getElementById('confirmation').innerHTML = '<img src="'+cardcode+parseInt('0x'+award)+'.gif"><br><b>'+awdInfo[parseInt('0x'+award)].replace('|','<\/b><br>'); document.getElementById('confirmation').innerHTML += '<br><br>You have chosen to award '+document.modifyForm.name.value+' this award.'; document.getElementById('confirmation').innerHTML += ' Please "Modify Profile" to confirm, otherwise return to the previous page.'; }} // --> </script> The final version will be fully compatible with this code, so don't worry about the finished code rendering the awards you have added using this code useless... You need to add a title and description for each award.. Find this part of the code near the top.. awdInfo[1] = "Merlin|The Wizard"; awdInfo[2] = "Cornelius Agrippa|The Alchemist"; awdInfo[3] = "Elfrida Clagg|Chiefteness of the Wizard's Council"; Note I have done the first 3, just to show you the format.. The code will work without you doing this, but you will lose a couple of features. Give it a go, and let me know if there's anything wrong, or if you want anything added..
|
|
inherit
*this CT deserves an achievement*
136400
0
Jun 25, 2021 18:23:00 GMT -8
Trill
hola
6,232
January 2009
ghbraingle
|
Post by Trill on Jan 18, 2010 16:29:39 GMT -8
I love it! Thank you so much Todge! This code is so awesome! ;D If I wanted to give someone else the ability to add/subtract awards, I'd have to give them the ability to modify profiles and change this line: if(pb_username == 'admin'){document.getElementById(awd).style.cursor = 'pointer'; to this: if(pb_username == 'admin|username2'){document.getElementById(awd).style.cursor = 'pointer'; right? When I hover over the awards on the right side, everything looks nice, as the full-sized award shrinks to fit into it's little area, there. However, when I hover over awards on the left side, the FULL sized image appears and pushes the divider bar over and concurrently changes the width of each of the mini-awards. Would there be a way to fix this? If it's too much, don't worry about it. And if the left side could vertically align to the top, rather than jumping downwards when I hover over something, that would be excellent. I can't wait to see what else you have planned for the code! Thank you so much!
|
|
#00AF33
Official Code Helper
19529
0
1
Nov 19, 2012 14:18:28 GMT -8
Todge
**
17,290
January 2004
todge
|
Post by Todge on Jan 18, 2010 17:40:49 GMT -8
The problem with the table jumping out of alignment is due to the main awards, on the left, are actually larger than the ones on the right.. The awards on the right are not shrinking, they are just smaller.. To get over it, find this part of the code.. document.getElementById(awd).onmouseover = function(){ document.getElementById('awardInfo').innerHTML = '<img src="'+this.src+'" width="80%"><br><b>'+this.alt.replace('|','</b><br>');} and add the red bit... Change the 80% to a figure that works.. I'll add variable to the code so you can list other people with the ability to use the awards, so you won't need to alter the coding, just edit a variable at the top.
|
|