Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Custom Widgets > Ladder of Rank Progression
Lidesh (Member) 6/20/2011 6:07 PM EST : Ladder of Rank Progression
Lidesh
Posts: 10

0
Like

0
Dislike

Hi Guys and Dolls
I have a project that I am stumped on. I need to make a ladder showing the Rank Progression for the Guild @


                                                                          Gm
                                                
                                                            Asst Gm       Asst Gm
                          
                                                  Raid Leader             Battle Master
   
                                        Dg Master                        Teams Leader    Bg Leader

                                                            Veterens

                                                            Apprentice

                                                            Recruit in Training

                                                            Bucket of Ghoul
and have this interactive so the names can be changed. With boxes and colors
I'm sure it wouldnt be hard for the IT people, but for me I'm web dumb
Ty
All the World is a Stage, Some people are hand Puppets, Some people are String Puppets,and some just sit in a box.
Im the one who Watches the Show
TopBottom

Mottie (SuperAdmin) 6/22/2011 10:34 PM EST : RE: Ladder of Rank Progression
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Lidesh!

I'm wasn't sure how long eash list could be, so I put together a script to make this table style... would it work for you?



Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Lidesh (Member) 6/23/2011 9:40 AM EST : RE: Ladder of Rank Progression
Lidesh
Posts: 10

0
Like

0
Dislike

Oh Ya!!! ...That would be GREAT!!!
My Attempt was Feeble at best
TY
All the World is a Stage, Some people are hand Puppets, Some people are String Puppets,and some just sit in a box.
Im the one who Watches the Show
TopBottom

Mottie (SuperAdmin) 6/23/2011 11:23 AM EST : RE: Ladder of Rank Progression
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Ok, here is the code I used.

Rank Tree

GuildPortal admin site link to the original post



Add this code inside of a Free Form Text/HTML widget while the editor is in HTML mode.

Code
<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>
Customizing
  • 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
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Lidesh (Member) 6/23/2011 5:30 PM EST : RE: Ladder of Rank Progression
Lidesh
Posts: 10

0
Like

0
Dislike

Mottie has Any1 ever told you that you ROCK!!
Ty for taking on my headache...lol   
All the World is a Stage, Some people are hand Puppets, Some people are String Puppets,and some just sit in a box.
Im the one who Watches the Show
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%