Hats on Avatars

[Wormopolis]

Browser Tested: IE and FF
placement: global footer ( the lower the better)

puts little hats on member's avatars depending on certain times of year.

if you want to add your own new hats, the array entry would be

[start day,end day,Url to image,hover title,offset], (comma after unless its the last one)

start day is month-day like 12-1
same with end day
url to image is a direct URL and I suggest .png or transparent .gif
hover title is what appears when the mouse pointer goes on the hat
offset is the vertical offset from the top of the avatar. you might have to play with that number to get it right.


code:

<script type="text/javascript">
<!--
// Hats v2.2
// by Wormo - original request by Absinthe
// www.wormocodes.com
//  Do not repost - keep header intact

var inclusiveMembersOnly=false;  //set true to only put hats on certain members
var includedMembers="admin|user2|user3";  //seperate by |    only valid if above variable is true

var hatArray=[
['12-1','12-27','http://i197.photobucket.com/albums/aa250/WORMOPOLIS/santahatfinal.png','Happy Holidays!',10],
['12-30','1-2','http://i197.photobucket.com/albums/aa250/WORMOPOLIS/happyNYfinal.png','Happy New Year!',25],
['3-16','3-18','http://i197.photobucket.com/albums/aa250/WORMOPOLIS/stpattyfinal.png','St Pattys Day!',30],
['2-13','2-15','http://i197.photobucket.com/albums/aa250/WORMOPOLIS/cupidfinal.png','Will you be my valentine?',20],
['10-29','10-31','http://i197.photobucket.com/albums/aa250/WORMOPOLIS/halloweenfinal.png','Happy Halloween!',30]
];

var goForHat=false;
var hatImage, hatMsg,hatOffset;
for (hc=0; hc<hatArray.length; hc++) {
 var stDate=hatArray[hc][0];
 var endDate=hatArray[hc][1];
 hatImage=hatArray[hc][2];
 hatMsg=hatArray[hc][3];
 hatOffset=hatArray[hc][4];
 curDate=new Date(); tmpDate1=new Date(); tmpDate2=new Date();
 tmpDate1.setMonth(parseInt(stDate.split('-')[0])-1);  tmpDate1.setDate(parseInt(stDate.split('-')[1]));
 tmpDate2.setMonth(parseInt(endDate.split('-')[0])-1);  tmpDate2.setDate(parseInt(endDate.split('-')[1]));
 if (tmpDate2<tmpDate1) {
   if (curDate>tmpDate1) tmpDate2.setFullYear(tmpDate2.getFullYear()+1);
   else tmpDate1.setFullYear(tmpDate1.getFullYear()-1);
 }
 if (curDate>=tmpDate1 && curDate<tmpDate2) {
   goForHat=true;
   break;
 }
}

var avCount=0;
function hat_me(avid) {
 var avvy=document.getElementById(avid);
 if (avvy.complete) {
     avvy.border=1;
     var offsetH=avvy.height;      var offsetW=avvy.width;
     var shImg=document.createElement('img');  shImg.src=hatImage;
     shImg.style.position='relative';  shImg.style.zIndex='9';  shImg.style.verticalAlign='top';
     shImg.title=hatMsg;
     avvy.parentNode.insertBefore(document.createElement('br'), avvy);
     avvy.parentNode.insertBefore(shImg, avvy.nextSibling);
     avvy.parentNode.insertBefore(document.createElement('br'), avvy.nextSibling);
     shImg.style.marginTop=('-'+(hatOffset+parseInt(offsetH))+'px');
     shImg.style.marginLeft=('-'+(document.all ? parseInt(offsetW/2)+20: parseInt(offsetW)-5)+'px');
 } else {
   setTimeout("hat_me("+avid+")",1000);
 }
}
if (goForHat && pb_action.match(/(display|viewprofile|recentposts)/)) {
 var regchk=new RegExp('user=('+includedMembers+')$','');
 for (tds=document.getElementsByTagName('td'), vt=0; vt<tds.length; vt++) {
   if (tds[vt].className.match(/windowbg/) && tds[vt].width=='20%' && tds[vt].vAlign=='top' && tds[vt].getElementsByTagName('center')[0] && tds[vt].getElementsByTagName('center')[0].firstChild &&  tds[vt].getElementsByTagName('center')[0].firstChild.nodeName.match(/img/i)) {
     if (!inclusiveMembersOnly || (tds[vt].getElementsByTagName('b')[0] && tds[vt].getElementsByTagName('b')[0].firstChild && tds[vt].getElementsByTagName('b')[0].firstChild.nodeName.toLowerCase()=='a' && tds[vt].getElementsByTagName('b')[0].firstChild.href.match(regchk))) {
       var avchk= tds[vt].getElementsByTagName('center')[0].firstChild;
       avchk.id='avWatch'+(avCount++);
       hat_me(avchk.id);
     }
   }
 }
}
// -->
</script>


preview.. well its running here, but you wont see it except on certain holidays

[rhondairv]

What a cute idea! Thanks

[Wormopolis]

If youhave any ideas for other hats/holidays let me know.

[rhondairv]

Maybe an egg or something for Easter and a turkey for thanksgiving?

[Wormopolis]

thanksgiving hat maybe?

perhaps a broken egg shell.. like a decorated egg?

[rhondairv]

sounds good

[Rei Kon]

How about making it so only certain people can have hats? Could work wonders for people who are trying to organise scavenger hunts ^^

[Wormopolis]

version update 2.2: member inclusion

[Reese]

Awesome! Adding to my site...

[Suzee]

Love this code!! Our Avatars are pretty big so it actually peeks out into the space between the boards and the left column.

THANKS!!

usstalon.proboards.com/index.cgi

[Wormopolis]

not a lot I can do about that actually... unless you want it to force the mp width to be wider which is going to mess with your layout. I have it floating the hats on top of the avatar for that reason so it doesnt affect any layouts.

[rita]

I've just added this wonderful code to my test forum, but it doesn't work.

[Suzee]

No, no, I like it that way Wormo!! it makes the hat's cuter if that is possible. I have noticed like Rita though that sometimes they don't seem to show up on all the avatars. I put them down near the bottom of the global footer but if I put it on the very bottom then the hat sits in the little post count graphic. That made me laugh but I moved it up so it would sit on the actual picture avatar.

[Jua]

I dont like this hat.

[rita]

Dec 10, 2011 7:49:24 GMT -8 Suzee said:

No, no, I like it that way Wormo!! it makes the hat's cuter if that is possible. I have noticed like Rita though that sometimes they don't seem to show up on all the avatars. I put them down near the bottom of the global footer but if I put it on the very bottom then the hat sits in the little post count graphic. That made me laugh but I moved it up so it would sit on the actual picture avatar.

I put the code right at the bottom of the global footer ..... I'll move it to the top and see what happens.