How to add a World of Warcraft Guild Progression Box

GuildPortal admin site link to original post

I made two versions. The first one is a basic box with images. To update it, you need to manually change how many bosses you've downed. The second one requires you to change a variable from a zero to one to indicate a specific boss that you've downed. It will update the number and show detailed information in a popup window. Examples of both on are the Home page of this site.

1. Basic Progression Box

Custom StyleSheet (How to add CSS)

.progBox {font-size: 90%;}
.s_Kara {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left top no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_ZulAman {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left -31px no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_DLKazzak {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left -62px  no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_Doomwalker {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left -93px  no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_Gruul {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left -124px  no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_Mags {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left -155px  no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_Serpent {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left -186px  no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_theEye {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left -217px  no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_MtHyjal {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left -248px  no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_BlackTemple {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left -279px  no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_Sunwell {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left bottom no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }

Context Box "Free Form Text/HTML" (How to add HTML)

<center>
<table class="progBox" border="0">
<tbody><tr><td class="s_Kara">Karazhan</div></td><td>(12/12)
</td></tr><tr><td class="s_ZulAman">Zul'Aman</td><td>(6/6)
</td></tr><tr><td class="s_DLKazzak">Doom Lord Kazzak</td><td>(1/1)
</td></tr><tr><td class="s_Doomwalker">Doom Walker</td><td>(1/1)
</td></tr><tr><td class="s_Gruul">Gruul's Lair</td><td>(2/2)
</td></tr><tr><td class="s_Mags">Magtheridon's Lair</td><td>(1/1)
</td></tr><tr><td class="s_Serpent">Serpentshrine Cavern </td><td>(6/6)
</td></tr><tr><td class="s_theEye">The Eye</td><td>(4/4)
</td></tr><tr><td class="s_MtHyjal">Mount Hyjal</td><td>(5/5)
</td></tr><tr><td class="s_BlackTemple">Black Temple</td><td>(9/9)
</td></tr><tr><td class="s_Sunwell">Sunwell Plateau</td><td>(6/6)
</td></tr>
</tbody></table>
</center>

---

2. Detailed Progression Box

How to use this and customize this script:

• Hide/Show rows: One neat feature of this code is if you've never killed a boss in an instance, it won't display it at all. If you want an instance to show, just change the class="hide" to class="show" in the Context box code below - I colored these orange so you can see it easier.

• Boss Status: To update a boss status, simply change the "0" into a "1" in the appropriate variable in the Javascript. (e.g. YAY you just killed the Prince in Karazhan, look in the code and find these variables:
  • var b_Kara = [ "Animal Boss", "Attumen the Huntsman", "Moroes", "Maiden of Virtue", "Opera Event", "Nightbane", "The Curator", "Shade of Aran", "Terestian Illhoof", "Netherspite", "Chess Event", "Prince Malchezaar" ];
    var k_Kara = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0];
  • You'll notice the "0" at the end of the variable "k_Kara". It corresponds to the Prince, the order of the numbers matches the name in the "b_Kara" variable. Don't change anything in the "b_Kara" variable, you should only be changing the numbers in red.

• Text Colors: To change the colors of the text for all components of the progression box, change the CSS below that is colored blue.
  
  • Progression Box = ".progBox"
  • Killed boss color = ".killedBoss"
  • Non-killed bosses = ".toKillBoss"
  • If you want to change the style of the text. you can edit or add "text-decoration" (options are "line-through", "underline", etc... look here for other options).
  • You can also add CSS within the brackets {} to make the text bold: add "font-weight:bold;" after the previous semi-colon (see more options here).

• Custom Images: If you want to use your own images...
  • Change the Custom StyleSheet so that the url () has your image url inside the parenthesis.
  • I put all of the images for these instances into a single image, so if you customize, drop the "left", "top", "bottom" and "-***px" that follows the url().
  • Change the "height" to the height of your custom image.
  • Change the "padding-left" to the width plus a few extra pixels. The "padding-left" tells the CSS to jump right however many pixels so whatever text you put in that box won't be on top of the image.
  • So you may end up with something like this:
    .s_Kara {background: url(http://../kara.gif); height:50px; padding-left:50px; font-size: 80%; width:100% }

I bet some of you that know Javascript and CSS better than me are cringing... I'm still learning, but I like to mess around with code to make it work. If you know of a more efficient way of doing this, please feel free to post.

Custom StyleSheet (How to add CSS)

.s_Kara {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left top no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_ZulAman {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left -31px no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_DLKazzak {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left -62px  no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_Doomwalker {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left -93px  no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_Gruul {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left -124px  no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_Mags {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left -155px  no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_Serpent {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left -186px  no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_theEye {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left -217px  no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_MtHyjal {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left -248px  no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_BlackTemple {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left -279px  no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.s_Sunwell {background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/RaidsTBC.gif) left bottom no-repeat; height:30px; padding-left:30px; font-size: 80%; width:100% }
.hide { display: none; width:100%; }
.show { display: inline; width:100%; }

.progBox {font-size: 90%; padding:4px; color: #ffffff; }
.killedBoss { color:#888888; text-decoration: line-through; }
.toKillBoss { color: #dddddd; text-decoration: none; }
.killed { color: #ff0000; }

Content Box "Free Form Text/HTML" (How to add HTML)

<script language="javascript">
// *************************************
// BOSS VARIABLES TO SET
// set which bosses you"ve killed here
// in the k_(instance) variable
// 1 = killed
// 0 = not killed
// *************************************

// Karazhan
var b_Kara = [ "Animal Boss", "Attumen the Huntsman", "Moroes", "Maiden of Virtue", "Opera Event", "Nightbane", "The Curator", "Shade of Aran", "Terestian Illhoof", "Netherspite", "Chess Event", "Prince Malchezaar" ];
var k_Kara = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0];

// Zul'Aman
var b_ZulAman = ["Nalorakk", "Akil\'Zon", "Jan\'Alai", "Halazzi", "Malacrass", "Zul\'jin"];
var k_ZulAman = [1, 1, 1, 1, 1, 0];

// Doom Lord Kazzak
var b_DLKazzak = ["Doom Lord Kazzak"];
var k_DLKazzak = [1];

// Doomwalker
var b_Doomwalker = ["Doomwalker"];
var k_Doomwalker = [1];

// Gruul's Lair
var b_Gruul = ["High King Maulgar", "Gruul"];
var k_Gruul = [1, 0];

// Magtheridon's Lair
var b_Mags = ["Magtheridon"];
var k_Mags = [1];

// Serpentshrine Cavern
var b_Serpent = ["Lurker", "Hydross", "Morogrim", "Leotheras", "Karathress", "Lady Vashj"]
var k_Serpent = [1, 1, 1, 1, 1, 0];

// The Eye, Tempest Keep
var b_theEye = ["Void Reaver", "Al\'ar", "Solarian", "Kael\'thas"]
var k_theEye = [1, 1, 1, 0];

// Battle for Mount Hyjal
var b_MtHyjal = ["Rage Winterchill", "Anetheron", "Kaz\'rogal", "Azgalor", "Archimonde"]
var k_MtHyjal = [1, 1, 1, 1, 0];

// Black Temple
var b_BlackTemple = ["High Warlord Naj\'entus", "Supremus", "Shade of Akama", "Teron Gorefiend", "Gurtogg Bloodboil", "Reliquary of Souls", "Mother Shahraz", "The Illidari Council", "Illidan Stormrage"]
var k_BlackTemple = [1, 1, 1, 1, 1, 1, 1, 1, 0];

// Sunwell Plateau
var b_Sunwell = ["Kalecgos", "Brutallus", "Felmyst", "Eredar Twins", "M\'uru", "Kil\'jaeden"]
var k_Sunwell = [1, 1, 1, 1, 1, 0];

// *************************************
// Don't change anything below this line
// *************************************
function showKills (list,kills) {
var i = 0;
var tipstr = "<table>";
 for (var j=0; j<list.length; j++) {
  if (kills[j] == 1) {
   var tmp = "<td class=killedBoss>" + list[j] + "</td><td class=killed>(Killed)";
   i++
  } else {
   var tmp = "<td class=toKillBoss>" + list [j] + "</td><td>";
  }
 tipstr += "<tr>" + tmp + "</td></tr>";
 }
 tipstr += "</table>";
 return tipstr;
}

function kills (rowEl, x) {
if (String(top.name).substring(0,4) == "Edit") { return; }
var s = 0;
 for (var j = 0; j < x.length; j++) {
  s += (typeof x[j] == 'number') ? x[j] : 0;
 }
 if (s != 0) {
  rowEl.className="show";
 }
var s2 = "(" + s + "/" + x.length + ")";
document.write (s2);
return;
};
</script>

<center>
<table class=progBox border=0>
<tbody>
<tr class="hide" id="r_Kara" ="ddrivetip(showKills(b_Kara,k_Kara),'','250');" ="hideddrivetip();">
 <td class="s_Kara">Karazhan</td><td><script language="javascript">kills(r_Kara,k_Kara);</script></td>
</tr>
<tr class="hide" id="r_ZulAman" ="ddrivetip(showKills(b_ZulAman,k_ZulAman),'','150');" ="hideddrivetip();">
 <td class="s_ZulAman">Zul'Aman</td><td><script language="javascript">kills(r_ZulAman,k_ZulAman);</script></td>
</tr>
<tr class="hide" id="r_DLKazzak" ="ddrivetip(showKills(b_DLKazzak,k_DLKazzak),'','200');" ="hideddrivetip();">
 <td class="s_DLKazzak">Doom Lord Kazzak</td><td><script language="javascript">kills(r_DLKazzak,k_DLKazzak);</script></td>
</tr>
<tr class="hide" id="r_Doomwalker" ="ddrivetip(showKills(b_Doomwalker,k_Doomwalker),'','150');" ="hideddrivetip();">
 <td class="s_Doomwalker">Doom Walker</td><td><script language="javascript">kills(r_Doomwalker,k_Doomwalker);</script></td>
</tr>
<tr class="hide" id="r_Gruul" ="ddrivetip(showKills(b_Gruul,k_Gruul),'','180');" ="hideddrivetip();">
 <td class="s_Gruul">Gruul's Lair</td><td><script language="javascript">kills(r_Gruul,k_Gruul);</script></td>
</tr>
<tr class="hide" id="r_Mags" ="ddrivetip(showKills(b_Mags,k_Mags),'','150');" ="hideddrivetip();">
 <td class="s_Mags">Magtheridon's Lair</td><td><script language="javascript">kills(r_Mags,k_Mags);</script></td>
</tr>
<tr class="hide" id="r_Serpent" ="ddrivetip(showKills(b_Serpent,k_Serpent),'','150');" ="hideddrivetip();">
 <td class="s_Serpent">Serpentshrine Cavern </td><td><script language="javascript">kills(r_Serpent,k_Serpent);</script></td>
</tr>
<tr class="hide" id="r_theEye" ="ddrivetip(showKills(b_theEye,k_theEye),'','150');" ="hideddrivetip();">
 <td class="s_theEye">The Eye</td><td><script language="javascript">kills(r_theEye,k_theEye);</script></td>
</tr>
<tr class="hide" id="r_MtHyjal" ="ddrivetip(showKills(b_MtHyjal,k_MtHyjal),'','170');" ="hideddrivetip();">
 <td class="s_MtHyjal">Mount Hyjal</td><td><script language="javascript">kills(r_MtHyjal,k_MtHyjal);</script></td>
</tr>
<tr class="hide" id="r_BlackTemple" ="ddrivetip(showKills(b_BlackTemple,k_BlackTemple),'','220');" ="hideddrivetip();">
 <td class="s_BlackTemple">Black Temple</td><td><script language="javascript">kills(r_BlackTemple,k_BlackTemple);</script></td>
</tr>
<tr class="hide" id="r_Sunwell" ="ddrivetip(showKills(b_Sunwell,k_Sunwell),'','160');" ="hideddrivetip();">
 <td class="s_Sunwell">Sunwell Plateau</td><td><script language="javascript">kills(r_Sunwell,k_Sunwell);</script></td>
</tr>
</tbody>
</table>
</center>

Edit (08/26/2008): Updated the code because it wasn't displaying the parenthesis correctly and if you had no bosses killed in an instance and the class set to "show", it wouldn't display anything. All fixed & updated in the code above