<div id="ranks"></div>
<script>
$(function(){
 var ranks = {
    '1:Guild Master'  : [ 'Aaron' ],
    '2:Assistant GM'  : [ 'Barbara', 'Charles' ],
    '3:Raid Leader'   : [ 'Doug', 'Elaine', 'Frieda', 'George' ],
    '3:Battle Master' : [ 'Hanna' ],
    '4:Dg Master'     : [ 'Izzy', 'Jack' ],
    '4:Teams Leader'  : [ 'Karen', 'Louis' ],
    '4:Bg Leader'     : [ 'Mike' ],
    '5:Veterans'      : [ 'Nicki', 'Orlando', 'Paul', 'Quintin', 'Roger', 'Sara', 'Teresa', 'Uma', 'Violet' ],
    '6:Apprentice'    : [ 'William', 'Xavier' ],
    '7:Recruit'       : [ 'Yanni' ],
    '8:Bucket'        : [ 'Zoey' ]
 }
 // ****************************
 // Don't change anything below
 // ****************************
 ,j, t = '', row = 0, rank, indx = 1;
 $.each(ranks, function(k,v){
  rank = k.split(':');
  if (rank[0] > row) {
   t += '</div><div class="rank-row-' + ++row + '">';
  }
  t += '<div class="rank-block rank-block-' + indx++ + '"><h2>' + rank[1] + '</h2><ul>';
  for (j=0; j < v.length; j++) {
   t += '<li>' + v[j] + '</li>';
  }
  t += '</ul></div>';
 });
 t += '</div>';
 $('#ranks').html(t);
});
</script>
<style>
#ranks {
  width: 650px;
  margin: 0 auto;
  text-align: center;
}
.rank-block {
  display: inline-block;
  margin: 5px;
  border: #555 1px solid;
  background: #444 url();
  width: 200px;
  min-height: 50px;
  border-radius: 1em;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  vertical-align: top;
}
.rank-block h2 {
  margin: 5px 0;
}
.rank-block ul {
  margin: 5px 0;
  list-style: none;
  padding: 0;
}
</style>

• Adding Names to the Ranks
  
  
  • In the ranks variable you will see that each line has this format:
    
    '2:Assistant GM'  : [ 'Barbara', 'Charles' ],
    
    
  • The first part (or key) is broken into two sub-parts.
    
  • The "2" at the beginning tells the script which tier to add the list of names to.
  • "Assistant GM" is the name of the block, and it is separated from the tier number by a colon ":".
  • There is another colon which separates the first part (or key) from the second part (value).
  • The value must be wrapped in square brackets - this means it's an array of names. It's needed even if there is only one name.
    
  • Each name inside the brackets is separated by a comma, but you can't have a comma after the last name or IE will break.
    
  • Each key:value pair as shown above must be followed by a comma, except for the very last one. As stated before, a trailing comma will break IE.
  • Hopefully there are enough examples in the code above so you can see how to add names.
    
    
• Styling
  
  
  • The overall size and appearance of this tree can be modified using the CSS
    
    #ranks {
      width: 650px;        /* Overall width of the tree, adjust it to fit inside the widget you put it in */
      margin: 0 auto;      /* Center the whole thing */
      text-align: center;  /* Center all of the text */
    }
    
    
  • Each block is styled as follows:
    
    .rank-block {
      display: inline-block;        /* Center the block inside the ranks block; this won't work in IE6-IE7  */
      margin: 5px;                  /* Add some spacing around the block */
      border: #555 1px solid;       /* Add border around the block */
      background: #444 url();       /* Set background color; add an image here if you want */
      width: 200px;                 /* Width of the block */
      min-height: 50px;             /* Minimum height of the block; won't work in IE6-7 */
      border-radius: 1em;           /* Add a rounded corner; next three lines do this */
      -moz-border-radius: 1em;
      -webkit-border-radius: 1em;
      vertical-align: top;          /* Align the blocks across the top (see the "Battle Master" block in the image) */
    }
    
    
  • The rest of the css adds some spacing around the block title and content, and removes the bullets from the list