Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Roster > Roster Medals
Mottie (SuperAdmin) 1/25/2011 6:04 PM EST : Roster Medals
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Roster Medals

GuildPortal admin site link to the original post

This script is designed to modify the build in GuildPortal roster. It removes the numerous medals from the display and adds a ranked medal (based on the number of medals) which when clicked will open a facebox popup window with all of that user's medals. Here are the before and after images.

Before
After

Code

Add the following code to a Free Form Text/HTML widget on the same page as your Roster or into the Footer Area HTML (Control Panel > Custom HTML & Script > Footer Area)
<style type="text/css">
/* Roster Medal & Text */
.allMedals { float: right; }
.allMedals img { height: 15px; width: 15px; vertical-align: middle; }
.count { padding-right: 10px; }

/* Roster Medal & Text in popup */
#facebox .popupMedal { height: 50px; width: 50px; display: block; margin: 0 auto !important; vertical-align: middle; padding: 5px; }
#facebox .popupMedalName { display: block; padding: 0 10px; color: #fff; text-align: center; }

/* Popup height & scrolling if taller */
#facebox .content { max-height: 400px; overflow-y: auto; }

/* Popup Styling */
#facebox .body {
 padding: 10px;
 background: #444;
 width: 500px;
}
#facebox .footer {
 border: 0px;
}
#facebox .footer img {
 display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
 var max = 30,
  levels = {
   1  : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_bronze_1.png',
   5  : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_bronze_2.png',
   10 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%203/award_star_bronze_3.png',
   15 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_silver_1.png',
   20 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_silver_2.png',
   25 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_gold_1.png',
   30 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_gold_2.png'
  },
  /*******************************
   * Don't change anything below *
   *******************************/

  i, c, m, l, s, t;
 $('.gpWidget-rosterlrg').find('table.StyledList').find('tr').each(function(){
  c = $(this).find('td:eq(0)');
  l = c.find('img[title*="Medal"]').wrapAll('<span class="medals" style="display:none;" />').length;
  s = (l > max) ? max : Math.round(l/5) * 5;
  if (l < 5) { s = 1; }
  if (l > 0) {
   i = $('<span class="allMedals tooltip" title="Click to see ' + (l > 1 ? 'all ' + l + ' medals' : 'the medal') + '"><img src="' + levels[s] + '"><span class="count">(' + l + ')</span>');
   i.appendTo(c)
    .click(function(){
     m = $(this).parent().find('.medals');
     if (!m.is('.modified')) {
      m.addClass('modified') // make popup medals easy to see
       .find('img').each(function(){
        t = (this.title || '').replace('Medal:','').replace(/\'(.*)\'/,'<strong>$1</strong>');
        $(this)
         .addClass('popupMedal')
         .after( '<span class="popupMedalName">' + t + '</span><br>' );
       });
     }
     $.facebox(m.html());
    });
  }
 });
});
</script>
Customizing
  • Medal Positioning & Style

    In the css, look for ".allMedals { float: right; }"... this positions the medal icon on the right side of the name block. If you changed it to "float: left", it will position the icons to the left of the character name. Remove the float: right to keep the medal in it's original position, but you may have to add "margin: 0; padding: 0" to the css to make it huge the right edge of the character name. The ".count" which is the number in parenthesis is styled using this bit of css.

  • Medal sizes

    • The roster medal icon can be resized by adjusting the height and width in the css below.

      .allMedals img { height: 12px; width: 12px; vertical-align: middle; }

    • The medal images inside the popup window can be styled using the bit of css in ".popupMedal". The medal title is added to the right of the icon and can be styled using ".popupMedalName".

      #facebox .popupMedal { height: 50px; width: 50px; display: block; margin: 0 auto !important; vertical-align: middle; padding: 5px; }
      #facebox .popupMedalName { display: block; padding: 0 10px; color: #fff; text-align: center; }

  • Popup Styling (aka Facebox)

    The facebox popup is styled as described in this post. Modify the css as desired below the "/* Popup Styling */" comment in the css.

  • Medal Icon Levels

    The script will add a different medal icon image for a certain number of metals that it finds. Set a max number of medals to look for, then modify or add more medal levels as desired.
     var max = 30,
      levels = {
       1  : '
    http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_bronze_1.png',
       5  : '
    http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_bronze_2.png',
       10 : '
    http://guildportal.com/Layout2006/CP/Awards/Star%20Set%203/award_star_bronze_3.png',
       15 : '
    http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_silver_1.png',
       20 : '
    http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_silver_2.png',
       25 : '
    http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_gold_1.png',
      
    30 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_gold_2.png'
      },
    • A level image is really just an icon to represent the range of medals a person has. So level 1 means the person has 1 medal. If a person has 17 medals, the script will show the next lowest level number, so you'll see the image for level 15. Someone with 34 medals will have the level 30 image showing.
    • The script will only count every 5 levels (except for level 1), so you can't add 4 or 13 into the level variable above. It only looks for multiples of 5.
    • If you want to add more levels, to say 50,  then change the max level to 50 and add a comma to the end of the "30" line, and add 35, 40, 45 and 50 to the list. I added an example below:
       var max = 50,
        levels = {
         1  : '
      http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_bronze_1.png',
         5  : '
      http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_bronze_2.png',
         10 : '
      http://guildportal.com/Layout2006/CP/Awards/Star%20Set%203/award_star_bronze_3.png',
         15 : '
      http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_silver_1.png',
         20 : '
      http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_silver_2.png',
         25 : '
      http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_gold_1.png',
         30 : '
      http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_gold_2.png',
         35 : '
      some image url',
         40 : '
      some other image url',
         45 : '
      yet another image url',
         50 : '
      and the last image url'
        },
    • Notice how the last level doesn't have a comma at the end. If it's there, IE will flip you off and ignore the script, then run into your kitchen and eat all the cheese in your refrigerator. MMmm 52 slices of American cheese....
Edit 6/9/2012: Updated to work with roster changes.
Edit 6/14/2012: Updated css &amp; script to add big images in the popup.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

davpa (Applicant) 6/9/2012 11:50 AM EST : RE: Roster Medals
davpa
Posts: 1982

0
Like

0
Dislike

Sorry for the necro of this thread, but I really really would love to get this to work.  Sadly, it does not seem to work at the moment.  Did something change in GP to make this script non-functional?  I copied the script unaltered in both the Footer as well as trying it in a Free Form HTML box.  Neither works.

This option would be fabular, so any help would be awesome.
TopBottom

Mottie (SuperAdmin) 6/9/2012 4:07 PM EST : RE: Roster Medals
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Davpa!

Ok, I've updated the code to work with the roster changes. Enjoy!
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

davpa (Applicant) 6/9/2012 7:05 PM EST : RE: Roster Medals
davpa
Posts: 1982

0
Like

0
Dislike

The script almost works.  It collects everything into the single icon with a medal total fine.  But in the Facebook-like window it does not display the medal icons, only the description of the medal.


TopBottom

davpa (Applicant) 6/14/2012 12:13 PM EST : RE: Roster Medals
davpa
Posts: 1982

0
Like

0
Dislike

Any word on the issue of the medal images not appearing in the Facebook box?
TopBottom

Mottie (SuperAdmin) 6/14/2012 4:38 PM EST : RE: Roster Medals
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Davpa!

Opps again! One css change needs to be made... look for this line:
.popupMedal { display: none; }
and change it to this:
.allMedals .popupMedal { display: none; }

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

davpa (Applicant) 6/14/2012 6:43 PM EST : RE: Roster Medals
davpa
Posts: 1982

0
Like

0
Dislike

Yep, that worked.  The medals now show up in the facebook window.

One thing I did try to do is make the medals in the facebook window bigger.  In the original explination of the code you just needed to add a little extra code.  It does not seem to be working now.  This is how I have the lines in the code, but again, I probably have something wrong:

 /* Roster Medal & Text in popup */
    .allMedals .popupMedal { height: 30px; width: 30px; vertical-align: middle;  padding: 5px; }
    .popupMedalName { color: #fff; }


Also, is there a way to replace "Medal" with the medal name from the info?  For instance, when you click on the list you see "Medal:blah blah blah"  Anyway to have the code replace the word "Medal" with "Medal Name" that is part of its description info?
TopBottom

Mottie (SuperAdmin) 6/14/2012 11:41 PM EST : RE: Roster Medals
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Ok updated again... I had to change the css and I changed the script to remove "Medal:" completely.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

davpa (Applicant) 6/15/2012 12:35 AM EST : RE: Roster Medals
davpa
Posts: 1982

0
Like

0
Dislike

Mottie said:
Ok updated again... I had to change the css and I changed the script to remove "Medal:" completely.

Woot!  Looks very slick.  I've updated the Entropy Legion site with this style of medal box and things are back to being nice and clean looking.  I had a lot of medals all over the place and it crushed the rest of the Roster page info to the right.  Now things look good.

thanks a million for this code.
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%