Want to have a simple census widget for the usergroups on my site

Okay, so I saw a census widget used on a friend's fairy tail site. And I don't have permission to use that friend's site's coding so i was wondering if anyone had their own code for a usergroup census widget that they wouldn't mind sharing with me. All I want is for the census to show the number of members in each group with a colored bar next to each one that's the color of each usergroup. If anyone could help me get a full code for that, I'd appreciate it~

My Forum: 

http://fairytailetherealrp.my-freeforum.com/

Hi @Rin Moriyama,

You can find your answer here. You'll most likely need to change some titles, or ids depending on your groups. If you need any help with that let me know.

that's the friends fairy tail site's coder.... i can't use that code period. So I need a completely different code if possible or at least a different base code

Oh, then I'm sure there's no problem if I take out the part I programmed and expand upon it ?

Add this to a widget :

Code:

<style type="text/css">#faCensus { color:#CCC; font-size:13px; font-family:"Trebuchet MS", Arial, Vedana, Sans-serif; background:#333; border:1px solid #444; border-radius:3px; padding:3px; width:240px; }
#censusMainTitle { font-size:16px; font-weight:bold; text-align:center; margin-bottom:6px; }
.censusRow { background:#222; border-radius:3px; padding:3px; margin:3px 0; }
.censusTitle { font-size:12px; display:inline-block; margin-right:4px; }
.censusValue { background:#666; border-radius:3px 0 0 3px; display:inline-block; position:relative; height:15px; vertical-align:middle; }
.censusCount { background:#555; text-align:center; border-radius:0 3px 3px 0; display:inline-block; position:absolute; width:16px; right:-16px; }</style>

<div id="censusNode"></div>

<script type="text/javascript">//<![CDATA[
(function() {
  window._faCensus = {
    title : 'Group census', // main title
   
    // syntax : 'GROUP_NAME' : 'GROUP_ID'
    groups : {
      'Administrators' : 1,
      'Moderators' : 2,
      'Developers' : 3,
      'Wizard Saints' : 4,
      'Chaos Lords' : 5,
      'Fairy Tail' : 6,
      'Blue Pegasus' : 7,
      'Sabertooth' : 8,
      'Lamia Scale' : 9,
      'Dragon Heart' : 10,
      'Sacred Skies' : 11,
      'Orobourus Spiral' : 12,
      'Crime Sorciere' : 13,
      'Tartaros' : 14,
      'Succubus Eye' : 15,
      'Grimoire Heart' : 16,
      'Hydra Sin' : 17,
      'Magic Council' : 18,
      'Rune Knights' : 19,
      'Mage' : 20,
      'Contractors' : 21,
      'Seirei' : 22,
      'Citizen' : 23
    },

    // get group member count from AJAX or storage
    getCount : function(id, callback) {
      var count = 0, pages, storage = window.localStorage;

      if (storage && storage['group_count_' + id] && storage['group_count_' + id + '_exp'] > +new Date - 1*60*60*1000) callback(storage['group_count_' + id]);
      else jQuery.get('/g' + id + '-?change_version=prosilver', function(d) {
        count = jQuery('.forumbg-table a[href^="/u"]', d).length;
        pages = jQuery('.pagination span a:not(.pag-img):last', d);


        if (pages[0]) {
          pages = +jQuery(pages).text();
          count = count * pages;
        }

        if (storage) {
          storage['group_count_' + id] = count;
          storage['group_count_' + id + '_exp'] = +new Date;
        }

        callback(count);
      });
    }
  };

  var census = document.createElement('DIV'),
      node = document.getElementById('censusNode'),
      i,
      row;
  census.id = 'faCensus';
  census.innerHTML = '<div id="censusMainTitle">' + _faCensus.title + '</div>';

  // set content
  for (i in _faCensus.groups) {
    row = document.createElement('DIV');
    row.innerHTML = 'loading...';
    row.className = 'censusRow';

    _faCensus.getCount(_faCensus.groups[i], function(count) {
      row.innerHTML = '<span class="censusTitle">' + i + '</span><span id="census_' + i.replace(/\s/g, '_') + '" class="censusValue" style="width:' + (count * 3) + 'px;"><span class="censusCount">' + count + '</span></span>';
    });

    census.appendChild(row); // add the row to the census
  }

  censusNode.appendChild(census); // append the census to the drop point
})();
// par ange tuteur
//]]></script>

It's mainly JavaScript oriented, so if you need to make changes you have to edit the JavaScript object named groups which contains all your groups + ids already.



Then to color each bar add this to your CSS stylesheet :

Code:

#census_Administrators { background-color:#666 }
#census_Moderators { background-color:#666 }
#census_Developers { background-color:#666 }
#census_Wizard_Saints { background-color:#666 }
#census_Chaos_Lords { background-color:#666 }
#census_Fairy_Tail { background-color:#666 }
#census_Blue_Pegasus { background-color:#666 }
#census_Sabertooth { background-color:#666 }
#census_Lamia_Scale { background-color:#666 }
#census_Dragon_Heart { background-color:#666 }
#census_Sacred_Skies { background-color:#666 }
#census_Orobourus_Spiral { background-color:#666 }
#census_Crime_Sorciere { background-color:#666 }
#census_Tartaros { background-color:#666 }
#census_Succubus_Eye { background-color:#666 }
#census_Grimoire_Heart { background-color:#666 }
#census_Hydra_Sin { background-color:#666 }
#census_Magic_Council { background-color:#666 }
#census_Rune_Knights { background-color:#666 }
#census_Mage { background-color:#666 }
#census_Contractors { background-color:#666 }
#census_Seirei { background-color:#666 }
#census_Citizen { background-color:#666 }

I have a default color ( 666, or shorthand hex for gray ) I didn't know which colors you wanted, so replace those with what you want.

OMG!!! THANK YOU SOOOO MUCH! It looks perfect! This topic can now be archived~!

You're welcome ^^

Topic archived

Have a nice day.