Longevity Bar

[Wormopolis]

Browser Tested: IE and FF
placement: global footer

calculates how long a user has been on your site based off a start date, and puts a slider along a bar.

code:

<script type="text/javascript">
<!--
//  longevity meter in MP  v1.3
//  by Wormopolis - www.wormocodes.com
//  keep header intact - do not repost
//  thanks to rhondairv for the idea

var forumStartDate="Nov 2008";
var pgStartColor="FF0000";  //starting fade color
var pgEndColor="00FF00";  //ending fade color

function intToHex(num_i) {
res=(num_i.toString(16).length>1? num_i.toString(16): "0"+num_i.toString(16));
return res.toUpperCase();
}

function hexToInt(num_h) {
tot=0; num_h=num_h.toUpperCase();
for (a=num_h.length-1; a>=0; a--) {
if (num_h.charAt(a).match(/\d/)) tot+=(Math.pow(16, num_h.length-1-a)*parseInt(num_h.charAt(a)));
else tot+=(Math.pow(16, num_h.length-1-a)*(num_h.charCodeAt(a)-55));
}
return tot;
}

function blendColor(stcolor, endcolor, pos) {
 var st_red=stcolor.substr(0,2), en_red=endcolor.substr(0,2),  st_green=stcolor.substr(2,2), en_green=endcolor.substr(2,2),
 st_blue=stcolor.substr(4,2), en_blue=endcolor.substr(4,2);
 var moddy=pos/100;
 var redspan=Math.round((hexToInt(en_red)-hexToInt(st_red))*moddy);
 var greenspan=Math.round((hexToInt(en_green)-hexToInt(st_green))*moddy);
 var bluespan=Math.round((hexToInt(en_blue)-hexToInt(st_blue))*moddy);
 var nwRed=intToHex(hexToInt(st_red)+redspan);
 var nwGreen=intToHex(hexToInt(st_green)+greenspan);
 var nwBlue=intToHex(hexToInt(st_blue)+bluespan);
 return nwRed+nwGreen+nwBlue;
}


tstArray=['jan','feb','mar','apr','may','jun','jul','aug','sept','oct','nov','dec'];
stDate=new Date();
for (m=0; m<tstArray.length; m++) {
 if (forumStartDate.split(' ')[0].toLowerCase()==tstArray[m]) break;
}
stDate.setMonth(m); stDate.setDate(1); stDate.setFullYear(forumStartDate.split(' ')[1]);
curDate=new Date();
monthsAlive=Math.round((curDate-stDate)/(1000*60*60*24*30.5));
monthsAlive=(monthsAlive<1 ? 1 : monthsAlive);

for (tds=document.getElementsByTagName('td'), t=0; t<tds.length; t++) {
 if (tds[t].width=='20%' && tds[t].className.match(/windowbg/) && tds[t].vAlign=='top' && tds[t].innerHTML.match(/joined: (.*?) (\d+)<br>/i)) {
   datechkM=RegExp.$1;
   datechkY=RegExp.$2;
   for (m=0; m<tstArray.length; m++) {
     if (datechkM.toLowerCase()==tstArray[m]) break;
   }
   jDate=new Date();
   jDate.setDate(1); jDate.setYear(datechkY); jDate.setMonth(m);
   cDate=new Date();
   timeSpan=Math.round((cDate-jDate)/(1000*60*60*24*30.5));
   //timeSpan=(timeSpan<1 ? 1 : timeSpan);
   longet=parseInt(100*(timeSpan/(monthsAlive*1.0)));
   notch=(longet>100 ? 100 : longet);
   for (br=tds[t].getElementsByTagName('br'), b=0; b<br.length; b++) {
     if (br[b].nextSibling && br[b].nextSibling.nodeName.match(/text/) && br[b].nextSibling.nodeValue.match(/joined:/i)) {
       spot=br[b].nextSibling.nextSibling;
       break;
     }
   }
   nwdv=document.createElement('div'); nwdv.className='longetBar';
   nwdv.width='100%'; nwdv.vAlign='middle'; nwdv.style.height=20; nwdv.align='center'
   hdr=nwdv.appendChild(document.createElement('font'));
   hdr.innerHTML='Longevity';
   hdr.size=1;
   nwtbl=nwdv.appendChild(document.createElement('table'));
   nwtbl.cellSpacing=nwtbl.cellPadding=0;
   nwtbl.insertRow(0);
   for (i=0; i<=100; i++) {
     nwcl=nwtbl.rows[0].insertCell(-1);
     nwcl.style.width='1';  nwcl.style.height='20'; nwcl.vAlign='middle';
     cdiv=nwcl.appendChild(document.createElement('div'));
     cdiv.style.width='1';
     if (i==notch) {
       cdiv.style.height='20';
       cdiv.style.backgroundColor='ffffff';
     } else {
       cdiv.style.height='5';
       cdiv.style.backgroundColor=blendColor(pgStartColor, pgEndColor, i);
     }
   }
   spot.parentNode.insertBefore(nwdv,spot);

 }
}
// -->
</script>



[wildgoosespeeder]

Is it at all possible to have the option to change the direction of the Longevity Bar? I like to think of this as a timeline where the green is when the forum started, red where that is today's date, and the white line be where you joined. I can't help but feel that the green should be on the left not the right. It would be nice to have the option though to decide which direction to go in (finish-start or start-finish kind of way).

[Wormopolis]

the new version lets you choose starting and end colors. I just havent posted it yet.

[wildgoosespeeder]

What about actual direction? My bar currently:

- true

- false

var order = true; // true for finish-start, false for start-finish

Catch my drift?

[Wormopolis]

what would the name change to?

[wildgoosespeeder]

I don't think you are getting what I'm saying? I don't understand what you mean.

[Wormopolis]

Its not really longevity if you are using the bar as a timeline. longevity implies how long you have been somewhere, so the higher the notch is the longer you have been around.

having the notch at the beginning for people that have been on the longest, and at the end for newcomers, doesnt convey longevity anymore. but rather it conveys a moment in time. so I can change the code to invert the notch, but leaving longevity as the title wouldnt make sense anymore.

[wildgoosespeeder]

...but at the same time it implies a time line but in reverse which is why I want an option to switch directions. It's like why use something for just one use? The code you made is somewhat versatile.

[Wormopolis]

just change this line

notch=(longet>100 ? 100 : longet);


to this

notch=100-(longet>100 ? 100 : longet);

[Wormopolis]

version update 1.2: added id='longetBar' to div for fetching

[Wormopolis]

version update 1.3: changed it from id="longetBar" to be className="longetBar".