"Progression Box" : Archive : Help-Site - World of Warcraft Durotan server - Guild Hosting - GuildPortal

• Login: Password: Save New User? Forgot?

Home

Forums

Code

Forums

: > Progression Box

1 2 3 4 5 6 7 8 9 10Next

Mottie (SuperAdmin)

6/9/2008 8:47 AM EST : Progression Box

ACK!

Posts: 3873

0
Like

0
Dislike

Progression Box: Basic (no tooltip) | v1.0 | v2 (Latest) | v3.0 (Images Only)

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

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems

•

Mottie (SuperAdmin)

8/27/2008 12:13 PM EST : WoW Progression Box v2

ACK!

Posts: 3873

0
Like

0
Dislike

Progression Box: Basic (no tooltip) | v1.0 | latest version (Ruby Sanctum) | v3.0 (Images Only)

Progression Box version 2.24 (Ruby Sanctum)

This is a change in the way I plan on doing things. Instead of always adding a post about updates, I will just replace this post with the most recent progression box, since it's most likely you won't want the progression box from when The Burning Crusade expansion was out. I'll also include 3 boxes: (1) Changes from the last update (if applicable), (2) Code for just the WotLK expansion and (3) Code for all expansions. I hope it makes it easier for everyone!

If your tooltips are messed up, you are probably missing the modified tooltip script.

Code - Pick a box below

Ruby Sanctum - Updated Portion Only

Progression - WotLK only

<style type="text/css">
/* Progression box */
#progBox { font-size: 90%; color: #ffffff; text-align:center; padding:4px; }
#progBox tr, #progSelect { cursor:pointer; }

/* Instance name text */
.instance { color: #cccccc; font-size: 10pt; }

/* Instance image and image cell */
.instanceImgCell { width:30px; }
.instance img { vertical-align: middle; border: 0px; }

/* bosses killed "(5/6)" in the progression box */
.bossCount { color: #cccccc; vertical-align: middle; }

/* Tooltip styles */
.tooltipHeader { color: #0080ff; font-weight: bold; vertical-align: top; }
.killedBoss { color: #888888; text-decoration: line-through; }
.toKillBoss { color: #dddddd; text-decoration: none; }
.killedText { color: #ff0000; }
.attemptedBoss { color: #00ff00; }

.hide { display: none; }
.show { display: inline; }
</style>
<div style="text-align:center">
<div id="progBox"></div>
</div>

<script type="text/javascript">
var wowWotLK = [];

// Tooltip width and progression icon size
var tooltipWidth = 300;
var tooltipBossWidth = 250;
var tooltipKilledWidth = 80;
var iconHeight = 30;
var iconWidth = 30;

// Text in progression box and tooltip, see CSS for color
var raidingKeyWord = "No|closed";
var bossKilledKeyWord = "Killed";
var bossAttemptedKeyWord = "Attempted|%";

// The displayed count will default to 10 man bosses until the instance is 100% completed,
// it will then switch to the 25 man boss count. If either of the variables below are true,
// the count will start and display only that progression.
var ignore10manCount = false;
var ignore25manCount = false;

// The 10 man or 25 man column can be hidden using the variables below, these variables
// will override the ignore10manCount and ignore25manCount variables above
var hide10manColumn = false;
var hide25manColumn = false;

// Setting this to true will show ALL rows, even if you have never been there
// setting it to false will hide rows with nothing entered into the boss variables
var showAllRows = true;

// Setting this to true will only hide the selector bar, but you can ignore or delete the
// variables below for wowOrig or wowTBC or wowWotLK if they aren't selected by the defaultWoW below
var hideExpansionSelector = false;

// Default displayed progression: "wowWotLK"
var defaultWoW = wowWotLK;

/*
Boss Information
********************************************
- Each progression variable is set up as follows:
   progress.push ([
    ["Thumbnail Image URL"]
   ,["Instance Name", "Instance Status"]
   ,["Instance Boss #1", "Boss #1 Status"]
   ,["Instance Boss #2", "Boss #2 Status"]
   ,   ...
   ,["Last Instance Boss", "Last Boss Status"]
   ]);
******************************************** */

/* ********************************************
   Wrath of the Lich King
   ******************************************** */
// NAXXRAMAS II
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2.gif"]
,["Naxxramas II", "(10 man)", "(25 man)"]
,["AW:Patchwerk", "", ""]
,["AW:Grobbulus", "", ""]
,["AW:Gluth", "", ""]
,["AW:Thaddius", "", ""]
,["PW:Noth the Plaguebringer", "", ""]
,["PW:Heigan the Unclean", "", ""]
,["PW:Loatheb", "", ""]
,["SW:Anub'Rekhan", "", ""]
,["SW:Grand Widow Faerlina", "", ""]
,["SW:Maexxna", "", ""]
,["DW:Instructor Razuvious", "", ""]
,["DW:Gothik the Harvester", "", ""]
,["DW:The Four Horsemen", "", ""]
,["FL:Sapphiron", "", ""]
,["KC:Kel'Thuzad", "", ""]
]);

// VAULT OF ARCHAVON
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/VoA.gif"]
,["Vault of Archavon", "(10 man)", "(25 man)"]
,["Archavon the Stone Watcher", "", ""]
,["Emalon the Storm Watcher", "", ""]
,["Kolaron the Flame Watcher", "", ""]
]);

// CHAMBER OF ASPECTS - OBSIDIAN SANCTUM
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/OS.gif"]
,["Obsidian Sanctum", "(10 man)", "(25 man)"]
,["Sartharion the Onyx Guardian", "", ""]
,["Sartharion + 1 Drake", "", ""]
,["Sartharion + 2 Drakes", "", ""]
,["Sartharion + 3 Drakes", "", ""]
]);

// THE EYE OF ETERNITY
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EoE.gif"]
,["The Eye of Eternity", "(10 man)", "(25 man)"]
,["Malygos", "", ""]
]);

// ULDUAR
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ulduar.gif"]
,["Ulduar", "(10 man)", "(25 man)"]
,["Flame Leviathan", "", ""]
,["Ignis the Furnace Master", "", ""]
,["Razorscale", "", ""]
,["XT-002 Deconstructor", "", ""]
,["The Iron Council", "", ""]
,["Kologarn", "", ""]
,["Auriya", "", ""]
,["Mimiron", "", ""]
,["Watcher Freya", "", ""]
,["Watcher Thorim", "", ""]
,["Watcher Hodir", "", ""]
,["General Vezax", "", ""]
,["Yogg-Saron", "", ""]
,["Algalon the Observer", "", ""]
]);

// TRIAL OF THE CRUSADER
wowWotLK.push([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Crusader.gif"]
,["Trial of the Crusader", "(10 Man)", "(25 Man)"]
,["Northrend Beasts", "", ""]
,["Lord Jaraxxus", "", ""]
,["Faction Champions", "", ""]
,["Twin Val'kyr", "", ""]
,["Anub'arak", "", ""]
]);

// TRIAL OF THE GRAND CRUSADER
wowWotLK.push([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/GrandCrusader.gif"]
,["Trial of the Grand Crusader", "(10 Heroic)", "(25 Heroic)"]
,["Northrend Beasts", "", ""]
,["Lord Jaraxxus", "", ""]
,["Faction Champions", "", ""]
,["Twin Val'kyr", "", ""]
,["Anub'arak", "", ""]
]);

// ONYXIA
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/onx.gif"]
,["Onyxia", "(10 Heroic)", "(25 Heroic)"]
,["Onyxia", "", ""]
]);

// ICECROWN CITADEL
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/icc.png"]
,["Icecrown Citadel", "(10 man)", "(25 man)"]
,["Lord Marrowgar", "", ""]
,["Lady Deathwhisper", "", ""]
,["Gunship Battle", "", ""]
,["Deathbringer Saurfang", "", ""]
,["Festergut", "", ""]
,["Rotface", "", ""]
,["Professor Putricide", "", ""]
,["Blood Princes", "", ""]
,["Blood Queen Lana'thel", "", ""]
,["Valithria Dreamwalker", "", ""]
,["Sindragosa", "", ""]
,["The Lich King", "", ""]
]);

// ICECROWN CITADEL HEROIC
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/icc.png"]
,["Icecrown Citadel Heroic", "(10 Heroic)", "(25 Heroic)"]
,["Lord Marrowgar", "", ""]
,["Lady Deathwhisper", "", ""]
,["Gunship Battle", "", ""]
,["Deathbringer Saurfang", "", ""]
,["Festergut", "", ""]
,["Rotface", "", ""]
,["Professor Putricide", "", ""]
,["Blood Princes", "", ""]
,["Blood Queen Lana'thel", "", ""]
,["Valithria Dreamwalker", "", ""]
,["Sindragosa", "", ""]
,["The Lich King", "", ""]
]);

// CHAMBER OF ASPECTS - RUBY SANCTUM
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/RS2.gif"]
,["Ruby Sanctum", "(10 Man)", "(25 Man)"]
,["Baltharus the Warborn", "", ""]
,["General Zarithrian", "", ""]
,["Saviana Ragefire", "", ""]
,["Halion", "", ""]
]);

// CHAMBER OF ASPECTS - RUBY SANCTUM HEROIC
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/RS2.gif"]
,["Ruby Sanctum Heroic", "(10 Heroic)", "(25 Heroic)"]
,["Baltharus the Warborn", "", ""]
,["General Zarithrian", "", ""]
,["Saviana Ragefire", "", ""]
,["Halion", "", ""]
]);

// ******************************************************
// Don't change anything below this line
// ******************************************************
pickExp(defaultWoW);
function pickExp(ex) {
if (String(top.name).substring(0,4) == "Edit") { return; }
if (hideExpansionSelector) $('#progSelect').css('display','none');
var tmp;
var sQ = """;
var pb = "<center><table class=progBox border=0 width='100%'><tbody>";
raidClassic = (ex[0][1][0].match("Zul'Gurub|Karazhan")) ? true : false;
if (hide10manColumn && !raidClassic){ ignore10manCount=true; ignore25manCount=false; }
if (hide25manColumn){ ignore25manCount=true; ignore10manCount=false; }
for (var inst=0; inst < ex.length; inst++) {
var killed10 = 0;
var killed25 = 0;
pb += "<tr class='tooltip'";
if (!showAllRows&&(ex[inst][1][1].match(raidingKeyWord)||(ex[inst][1][1].replace(/$10 man$/,'')==""&&ex[inst][2][1]==""))) pb += " class=hide";
pb += " title=\"<table><tr><td class=tooltipHeader width=" + tooltipBossWidth + "px>" + ex[inst][1][0].replace(/\"/g,sQ);
pb += (hide10manColumn&&!raidClassic) ? "" : "</td><td align=center valign=top nowrap width=" + tooltipKilledWidth + "px>" + ex[inst][1][1].replace(/\"/g,sQ);
pb += (raidClassic||hide25manColumn) ? "" : "</td><td align=center valign=top nowrap width=" + tooltipKilledWidth + "px>" + ex[inst][1][2].replace(/\"/g,sQ);
pb += "</td></tr>";
for (var boss=2; boss<(ex[inst].length); boss++) {
   pb += "<tr><td";
   var tmp2 = " class=killedBoss";
   var boss10 = (ex[inst][boss][1].match(bossKilledKeyWord)) ? true : false;
   if (boss10) killed10++;
   if (!raidClassic){
    var boss25 = (ex[inst][boss][2].match(bossKilledKeyWord)) ? true : false;
    if (boss25) killed25++;
   }
   if (raidClassic||hide25manColumn ) {
    pb += (boss10) ? tmp2 : "";
   } else {
    tmp = (boss10&&boss25) ? tmp2 : "";
    if (hide10manColumn&&boss25||hide25manColumn&&boss10) tmp = tmp2;
    if (ignore10manCount&&boss25||ignore25manCount&&boss10) tmp = tmp2;
    pb += tmp;
   }
   pb += ">" + ex[inst][boss][0].replace(/\"/g,sQ) + "</td>";
   if (raidClassic||!hide10manColumn){
    pb += "<td align=center class=";
    pb += (boss10) ? "killedText" : "";
    pb += (ex[inst][boss][1].match(bossAttemptedKeyWord)) ? " attemptedBoss" : " toKillBoss";
    pb += ">" + ex[inst][boss][1] + "</td>";
   }
   if (!raidClassic&&!hide25manColumn){
    pb += "<td align=center class=";
    pb += (boss25) ? "killedText" : "";
    pb += (ex[inst][boss][2].match(bossAttemptedKeyWord)) ? " attemptedBoss" : " toKillBoss";
    pb += ">" + ex[inst][boss][2] +"</td>";
   }
   pb += "</tr>";
}
pb += "</table>\" rel='" + (tooltipBossWidth + tooltipKilledWidth) + "'>";
pb += "<td><img src=\"" + ex[inst][0] + "\" height=\"" + iconHeight + "\" width=\"" + iconWidth;
pb += "\"></td><td class=\"instance\">" + ex[inst][1][0] + "</td><td class=bossCount>(";
tmp = (raidClassic||!ignore10manCount||ignore25manCount) ? killed10 : killed25;
if (!raidClassic&&(killed10 == ex[inst].length-2)&&!ignore25manCount) tmp = killed25;
pb += tmp + "/" + (ex[inst].length-2) + ")</td></tr>";
}
pb += "</table>";
$('#progBox').html(pb);
}
</script>

Progression - All Expansions

<style type="text/css">
/* Progression box */
#progBox { font-size: 90%; color: #ffffff; text-align:center; padding:4px; }
#progBox tr, #progSelect { cursor:pointer; }

/* Instance name text */
.instance { color: #cccccc; font-size: 10pt; }

/* Instance image and image cell */
.instanceImgCell { width:30px; }
.instance img { vertical-align: middle; border: 0px; }

/* bosses killed "(5/6)" in the progression box */
.bossCount { color: #cccccc; vertical-align: middle; }

/* Tooltip styles */
.tooltipHeader { color: #0080ff; font-weight: bold; vertical-align: top; }
.killedBoss { color: #888888; text-decoration: line-through; }
.toKillBoss { color: #dddddd; text-decoration: none; }
.killedText { color: #ff0000; }
.attemptedBoss { color: #00ff00; }

.hide { display: none; }
.show { display: inline; }
</style>
<div style="text-align:center">
<span id="progSelect">
<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wow-1.png" title="World of Warcraft" onclick="pickExp(wowOrig);">
<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wow-2.png" title="The Burning Crusade" onclick="pickExp(wowTBC);">
<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wow-3.png" title="Wrath of the Lich King" onclick="pickExp(wowWotLK);">
</span>
<div id="progBox"></div>
</div>

<script type="text/javascript">
var wowOrig = [];
var wowTBC = [];
var wowWotLK = [];

// Tooltip width and progression icon size
var tooltipWidth = 300;
var tooltipBossWidth = 250;
var tooltipKilledWidth = 80;
var iconHeight = 30;
var iconWidth = 30;

// Text in progression box and tooltip, see CSS for color
var raidingKeyWord = "No|closed";
var bossKilledKeyWord = "Killed";
var bossAttemptedKeyWord = "Attempted|%";

// The displayed count will default to 10 man bosses until the instance is 100% completed,
// it will then switch to the 25 man boss count. If either of the variables below are true,
// the count will start and display only that progression.
var ignore10manCount = false;
var ignore25manCount = false;

// The 10 man or 25 man column can be hidden using the variables below, these variables
// will override the ignore10manCount and ignore25manCount variables above
var hide10manColumn = false;
var hide25manColumn = false;

// Setting this to true will show ALL rows, even if you have never been there
// setting it to false will hide rows with nothing entered into the boss variables
var showAllRows = true;

// Setting this to true will only hide the selector bar, but you can ignore or delete the
// variables below for wowOrig or wowTBC or wowWotLK if they aren't selected by the defaultWoW below
var hideExpansionSelector = false;

// Default displayed progression: choose "wowOrig", "wowTBC" or "wowWotLK"
var defaultWoW = wowWotLK;

/*
Boss Information
********************************************
- Each progression variable is set up as follows:
   progress.push ([
    ["Thumbnail Image URL"]
   ,["Instance Name", "Instance Status"]
   ,["Instance Boss #1", "Boss #1 Status"]
   ,["Instance Boss #2", "Boss #2 Status"]
   ,   ...
   ,["Last Instance Boss", "Last Boss Status"]
   ]);
******************************************** */

/* ********************************************
   Original WoW
   ******************************************** */
// Zul'Gurub
wowOrig.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/zg.gif"]
,["Zul'Gurub", ""]
,["High Priestess Jeklik (Bat)", ""]
,["High Priest Venoxis (Snake)", ""]
,["High Priestess Mar'li (Spider)", ""]
,["High Priest Thekal (Tiger)", ""]
,["High Priestess Arlokk (Panther)", ""]
,["Hakkar the Soulflayer", ""]
,["Bloodlord Mandokir", ""]
,["Jin'do the Hexxer", ""]
,["Gahz'ranka", ""]
,["Edge of Madness", ""]
]);

// AQ20
wowOrig.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/aq20.gif"]
,["Ruins of Ahn'Qiraj", ""]
,["Kurinnaxx", ""]
,["General Rajaxx", ""]
,["Moam", ""]
,["Buru the Gorger", ""]
,["Ayamiss the Hunter", ""]
,["Ossirian the Unscarred", ""]
]);

// Onyxia
wowOrig.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/onx.gif"]
,["Onyxia", ""]
,["Onyxia", ""]
]);

// Molten Core
wowOrig.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/mc.gif"]
,["Molten Core", ""]
,["Lucifron", ""]
,["Magmadar", ""]
,["Gehennas", ""]
,["Garr", ""]
,["Baron Geddon", ""]
,["Shazzrah", ""]
,["Sulfuron Harbinger", ""]
,["Golemagg the Incinerator", ""]
,["Majordomo Executus", ""]
,["Ragnaros", ""]
]);

// Black Wing Lair
wowOrig.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/bwl.gif"]
,["Black Wing Lair", ""]
,["Razorgore the Untamed", ""]
,["Vaelastrasz", ""]
,["Broodlord Lashlayer", ""]
,["Firemaw", ""]
,["Ebonroc", ""]
,["Flamegor", ""]
,["Chromaggus", ""]
,["Nefarian", ""]
]);

// AQ40
wowOrig.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/aq40.gif"]
,["Temple of Ahn'Qiraj", ""]
,["The Prophet Skeram", ""]
,["Vem, Yaul and Kri", ""]
,["Battleguard Sartura", ""]
,["Fankriss the Unyeilding", ""]
,["Viscidus", ""]
,["Princess Huhuran", ""]
,["The Twin Emperors", ""]
,["Ouro the Sandworm", ""]
,["C'Thun", ""]
]);

// Nax
wowOrig.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/nax.gif"]
,["Naxxramas", ""]
,["AW:Patrchwerk", ""]
,["AW:Grobbulus", ""]
,["AW:Gluth", ""]
,["AW:Thaddius", ""]
,["PW:Noth the Plaguebringer", ""]
,["PW:Heigan the Unclean", ""]
,["PW:Loatheb", ""]
,["SW:Anub'Rekhan", ""]
,["SW:Grand Widow Faerlina", ""]
,["SW:Maexxna", ""]
,["DW:Instructor Razuvious", ""]
,["DW:Gothik the Harvester", ""]
,["DW:The Four Horsemen", ""]
,["FL:Sapphiron", ""]
,["KC:Kel'Thuzad", ""]
]);

/* ********************************************
   The Burning Crusade
   ******************************************** */
// KARAZHAN
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Kar.gif"]
,["Karazhan", ""]
,["Animal Boss", ""]
,["Attumen the Huntsman", ""]
,["Moroes", ""]
,["Maiden of Virtue", ""]
,["Opera Event", ""]
,["Nightbane", ""]
,["The Curator", ""]
,["Shade of Aran", ""]
,["Terestian Illhoof", ""]
,["Netherspite", ""]
,["Chess Event", ""]
,["Prince Malchezaar", ""]
]);

// ZUL'AMAN
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ZA.gif"]
,["Zul'Aman", ""]
,["Nalorakk", ""]
,["Akil'Zon", ""]
,["Jan'Alai", ""]
,["Halazzi", ""]
,["Malacrass", ""]
,["Zul'jin", ""]
]);

// DOOM LORD KAZZAK
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DLK.gif"]
,["Doom Lord Kazzak", ""]
,["Doom Lord Kazzak", ""]
]);

// DOOMWALKER
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DW.gif"]
,["Doomwalker", ""]
,["Doomwalker", ""]
]);

// GRUUL'S LAIR
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/GL.gif"]
,["Gruul's Lair", ""]
,["High King Maulgar", ""]
,["Gruul", ""]
]);

// MAGTHERIDON'S LAIR
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Mag.gif"]
,["Magtheridon's Lair", ""]
,["Magtheridon", ""]
]);

// SERPENTSHRINE CAVERN
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/SSC.gif"]
,["Serpentshrine Cavern", ""]
,["Lurker", ""]
,["Hydross", ""]
,["Morogrim", ""]
,["Leotheras", ""]
,["Karathress", ""]
,["Lady Vashj", ""]
]);

// THE EYE, TEMPEST KEEP
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/TK.gif"]
,["The Eye", ""]
,["Void Reaver", ""]
,["Al'ar", ""]
,["Solarian", ""]
,["Kael'thas", ""]
]);

// BATTLE FOR MOUNT HYJAL
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/MH.gif"]
,["Battle for Mount Hyjal", ""]
,["Rage Winterchill", ""]
,["Anetheron", ""]
,["Kaz'rogal", ""]
,["Azgalor", ""]
,["Archimonde", ""]
]);

// BLACK TEMPLE
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/BT.gif"]
,["Black Temple", ""]
,["High Warlord Naj'entus", ""]
,["Supremus", ""]
,["Shade of Akama", ""]
,["Teron Gorefiend", ""]
,["Gurtogg Bloodboil", ""]
,["Reliquary of Souls", ""]
,["Mother Shahraz", ""]
,["The Illidari Council", ""]
,["Illidan Stormrage", ""]
]);

// SUNWELL PLATEAU
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/SP.gif"]
,["Sunwell Plateau", ""]
,["Kalecgos", ""]
,["Brutallus", ""]
,["Felmyst", ""]
,["Eredar Twins", ""]
,["M'uru", ""]
,["Kil'jaeden", ""]
]);

/* ********************************************
   Wrath of the Lich King
   ******************************************** */
// NAXXRAMAS II
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2.gif"]
,["Naxxramas II", "(10 man)", "(25 man)"]
,["AW:Patchwerk", "", ""]
,["AW:Grobbulus", "", ""]
,["AW:Gluth", "", ""]
,["AW:Thaddius", "", ""]
,["PW:Noth the Plaguebringer", "", ""]
,["PW:Heigan the Unclean", "", ""]
,["PW:Loatheb", "", ""]
,["SW:Anub'Rekhan", "", ""]
,["SW:Grand Widow Faerlina", "", ""]
,["SW:Maexxna", "", ""]
,["DW:Instructor Razuvious", "", ""]
,["DW:Gothik the Harvester", "", ""]
,["DW:The Four Horsemen", "", ""]
,["FL:Sapphiron", "", ""]
,["KC:Kel'Thuzad", "", ""]
]);

// VAULT OF ARCHAVON
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/VoA.gif"]
,["Vault of Archavon", "(10 man)", "(25 man)"]
,["Archavon the Stone Watcher", "", ""]
,["Emalon the Storm Watcher", "", ""]
,["Kolaron the Flame Watcher", "", ""]
]);

// CHAMBER OF ASPECTS - OBSIDIAN SANCTUM
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/OS.gif"]
,["Obsidian Sanctum", "(10 man)", "(25 man)"]
,["Sartharion the Onyx Guardian", "", ""]
,["Sartharion + 1 Drake", "", ""]
,["Sartharion + 2 Drakes", "", ""]
,["Sartharion + 3 Drakes", "", ""]
]);

// THE EYE OF ETERNITY
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EoE.gif"]
,["The Eye of Eternity", "(10 man)", "(25 man)"]
,["Malygos", "", ""]
]);

// ULDUAR
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ulduar.gif"]
,["Ulduar", "(10 man)", "(25 man)"]
,["Flame Leviathan", "", ""]
,["Ignis the Furnace Master", "", ""]
,["Razorscale", "", ""]
,["XT-002 Deconstructor", "", ""]
,["The Iron Council", "", ""]
,["Kologarn", "", ""]
,["Auriya", "", ""]
,["Mimiron", "", ""]
,["Watcher Freya", "", ""]
,["Watcher Thorim", "", ""]
,["Watcher Hodir", "", ""]
,["General Vezax", "", ""]
,["Yogg-Saron", "", ""]
,["Algalon the Observer", "", ""]
]);

// TRIAL OF THE CRUSADER
wowWotLK.push([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Crusader.gif"]
,["Trial of the Crusader", "(10 Man)", "(25 Man)"]
,["Northrend Beasts", "", ""]
,["Lord Jaraxxus", "", ""]
,["Faction Champions", "", ""]
,["Twin Val'kyr", "", ""]
,["Anub'arak", "", ""]
]);

// TRIAL OF THE GRAND CRUSADER
wowWotLK.push([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/GrandCrusader.gif"]
,["Trial of the Grand Crusader", "(10 Heroic)", "(25 Heroic)"]
,["Northrend Beasts", "", ""]
,["Lord Jaraxxus", "", ""]
,["Faction Champions", "", ""]
,["Twin Val'kyr", "", ""]
,["Anub'arak", "", ""]
]);

// ONYXIA
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/onx.gif"]
,["Onyxia", "(10 Heroic)", "(25 Heroic)"]
,["Onyxia", "", ""]
]);

// ICECROWN CITADEL
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/icc.png"]
,["Icecrown Citadel", "(10 man)", "(25 man)"]
,["Lord Marrowgar", "", ""]
,["Lady Deathwhisper", "", ""]
,["Gunship Battle", "", ""]
,["Deathbringer Saurfang", "", ""]
,["Festergut", "", ""]
,["Rotface", "", ""]
,["Professor Putricide", "", ""]
,["Blood Princes", "", ""]
,["Blood Queen Lana'thel", "", ""]
,["Valithria Dreamwalker", "", ""]
,["Sindragosa", "", ""]
,["The Lich King", "", ""]
]);

// ICECROWN CITADEL HEROIC
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/icc.png"]
,["Icecrown Citadel Heroic", "(10 Heroic)", "(25 Heroic)"]
,["Lord Marrowgar", "", ""]
,["Lady Deathwhisper", "", ""]
,["Gunship Battle", "", ""]
,["Deathbringer Saurfang", "", ""]
,["Festergut", "", ""]
,["Rotface", "", ""]
,["Professor Putricide", "", ""]
,["Blood Princes", "", ""]
,["Blood Queen Lana'thel", "", ""]
,["Valithria Dreamwalker", "", ""]
,["Sindragosa", "", ""]
,["The Lich King", "", ""]
]);

// CHAMBER OF ASPECTS - RUBY SANCTUM
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/RS2.gif"]
,["Ruby Sanctum", "(10 Man)", "(25 Man)"]
,["Baltharus the Warborn", "", ""]
,["General Zarithrian", "", ""]
,["Saviana Ragefire", "", ""]
,["Halion", "", ""]
]);

// CHAMBER OF ASPECTS - RUBY SANCTUM HEROIC
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/RS2.gif"]
,["Ruby Sanctum Heroic", "(10 Heroic)", "(25 Heroic)"]
,["Baltharus the Warborn", "", ""]
,["General Zarithrian", "", ""]
,["Saviana Ragefire", "", ""]
,["Halion", "", ""]
]);

// ******************************************************
// Don't change anything below this line
// ******************************************************
pickExp(defaultWoW);
function pickExp(ex) {
if (String(top.name).substring(0,4) == "Edit") { return; }
if (hideExpansionSelector) $('#progSelect').css('display','none');
var tmp;
var sQ = """;
var pb = "<center><table class=progBox border=0 width='100%'><tbody>";
raidClassic = (ex[0][1][0].match("Zul'Gurub|Karazhan")) ? true : false;
if (hide10manColumn && !raidClassic){ ignore10manCount=true; ignore25manCount=false; }
if (hide25manColumn){ ignore25manCount=true; ignore10manCount=false; }
for (var inst=0; inst < ex.length; inst++) {
var killed10 = 0;
var killed25 = 0;
pb += "<tr class='tooltip'";
if (!showAllRows&&(ex[inst][1][1].match(raidingKeyWord)||(ex[inst][1][1].replace(/$10 man$/,'')==""&&ex[inst][2][1]==""))) pb += " class=hide";
pb += " title=\"<table><tr><td class=tooltipHeader width=" + tooltipBossWidth + "px>" + ex[inst][1][0].replace(/\"/g,sQ);
pb += (hide10manColumn&&!raidClassic) ? "" : "</td><td align=center valign=top nowrap width=" + tooltipKilledWidth + "px>" + ex[inst][1][1].replace(/\"/g,sQ);
pb += (raidClassic||hide25manColumn) ? "" : "</td><td align=center valign=top nowrap width=" + tooltipKilledWidth + "px>" + ex[inst][1][2].replace(/\"/g,sQ);
pb += "</td></tr>";
for (var boss=2; boss<(ex[inst].length); boss++) {
   pb += "<tr><td";
   var tmp2 = " class=killedBoss";
   var boss10 = (ex[inst][boss][1].match(bossKilledKeyWord)) ? true : false;
   if (boss10) killed10++;
   if (!raidClassic){
    var boss25 = (ex[inst][boss][2].match(bossKilledKeyWord)) ? true : false;
    if (boss25) killed25++;
   }
   if (raidClassic||hide25manColumn ) {
    pb += (boss10) ? tmp2 : "";
   } else {
    tmp = (boss10&&boss25) ? tmp2 : "";
    if (hide10manColumn&&boss25||hide25manColumn&&boss10) tmp = tmp2;
    if (ignore10manCount&&boss25||ignore25manCount&&boss10) tmp = tmp2;
    pb += tmp;
   }
   pb += ">" + ex[inst][boss][0].replace(/\"/g,sQ) + "</td>";
   if (raidClassic||!hide10manColumn){
    pb += "<td align=center class=";
    pb += (boss10) ? "killedText" : "";
    pb += (ex[inst][boss][1].match(bossAttemptedKeyWord)) ? " attemptedBoss" : " toKillBoss";
    pb += ">" + ex[inst][boss][1] + "</td>";
   }
   if (!raidClassic&&!hide25manColumn){
    pb += "<td align=center class=";
    pb += (boss25) ? "killedText" : "";
    pb += (ex[inst][boss][2].match(bossAttemptedKeyWord)) ? " attemptedBoss" : " toKillBoss";
    pb += ">" + ex[inst][boss][2] +"</td>";
   }
   pb += "</tr>";
}
pb += "</table>\" rel='" + (tooltipBossWidth + tooltipKilledWidth) + "'>";
pb += "<td><img src=\"" + ex[inst][0] + "\" height=\"" + iconHeight + "\" width=\"" + iconWidth;
pb += "\"></td><td class=\"instance\">" + ex[inst][1][0] + "</td><td class=bossCount>(";
tmp = (raidClassic||!ignore10manCount||ignore25manCount) ? killed10 : killed25;
if (!raidClassic&&(killed10 == ex[inst].length-2)&&!ignore25manCount) tmp = killed25;
pb += tmp + "/" + (ex[inst].length-2) + ")</td></tr>";
}
pb += "</table>";
$('#progBox').html(pb);
}
</script>

Customizing the Script

CSS

Progress Box
- "#progBox" defines the progression box style and font size.
- ".instance" defines the instance name color & style.
- ".instanceImgCell" defines the size of the cell that contains the instance image (only change if you're using a different image).
- ".instance img" defines the styling and size of the instance image. Use the iconWidth & iconHeight variables below to set the img (icon) size.
- ".bossCount" defines the text color and alignment of the bosses killed count "(5/6)".

Tooltip

".tooltipHeader" defines the style and color of the tooltip title.
".killedBoss" defines the boss name style when it has been killed. The default is set to put a line through the name.
".toKillBoss" defines the boss name style when it hasn't been killed.
".killedText" defines the style for the boss status when it has been killed. The default style makes the text red.
".attemptedBoss" defines the style for an attempted boss.

Variables (in red)

Tooltips

tooltipWidth	sets the overall tooltip width.
tooltipBossWidth	sets the width of the left side of the tooltip, where the boss names are located.
tooltipKilledWidth	sets the width of the right side of the tooltip, where the counts are located.

Progress Box icons

iconHeight	sets the height of the icon image inside the progression box.
iconWidth	sets the width of the icon image inside the progression box.

Keywords - All keywords are case sensitive!

raidingKeyWord	The script looks for this keyword in the instance status. By default, the raidingKeyWord is "No" or "closed". So an instance status matching either of those case-sensitive words will make the script hide that instance row. The actual process looks to see if the "showAllRows" variable is false and either (1) The keyword is the instance status, or (2) If both the instance status and the first boss status are blank.
bossKilledKeyWord	The script looks for this keyword in the boss status. By default, the bossKilledKeyWord is "Killed" which when found signals the script to apply the "killedBoss" CSS style to that status. If the keyword is not present, the script adds the "toKillBoss" CSS style.
bossAttemptedKeyWord	The script looks for this keyword in the boss status. By default, the bossAttemptedKeyWord is "Attempted" which when found signals the script to apply the "attemptedBoss" CSS style to that status. If the keyword is not present, the script adds the "toKillBoss" CSS style.

Ignore or Hide Counts

ignore10manCount	Setting this variable to true will cause the script to display the instance count (e.g. the "(5/14)" display) to only show 25 man counts. By default (setting this to false), the script shows only 10 man counts until it is 100% complete, then switches to the 25 man boss count.
ignore25manCount	Setting this variable to true will cause the script to display the instance count (e.g. the "(5/14)" display) to only show 10 man counts even after the instance is 100% complete. By default (setting this to false), the script shows only 10 man counts until it is 100% complete, then switches to the 25 man boss count.
hide10manColumn	Setting this variable to true will hide the 10 man boss status in the tooltip. It does override the ignore 10/25 man count variables above.
hide25manColumn	Setting this variable to true will hide the 25 man boss status in the tooltip. It does override the ignore 10/25 man count variables above

Other Variables

showAllRows	If set to true, the script will show all instance rows regardless of what is in the status. If set to false, it will hide rows where the instance status keyword is found.
hideExpansionSelector	If set to true, the script will hide the icons across the top that allow you to switch between expansions. This variable isn't really necessary because if you only want to see WotLK progression, then select that code from above - the selector doesn't exist.
defaultWoW	The script will display this instance group by default. It is set to "wowTBC" to show The Burning Crusade instances by default. You can also pick "wowOrig" or "wowWotLK".

Progression status

Status Format:
Change your instance and boss status as desired (in orange). The script is set up as follows:

progress.push ([
["Thumbnail Image URL"],
,["Instance Name", "Instance 10 man Status", "Instance 25 man Status" ]
,["Instance Boss #1", "Boss #1 10 man Status", "Boss #1 25 man Status"]
,["Instance Boss #2", "Boss #2 10 man Status", "Boss #2 25 man Status"]
, ...
,["Last Instance Boss", "Last Boss 10 man Status", "Last Boss 25 man Status"]
]);

Add Instance:
To add a new instance, copy another instance from the same expansion (e.g. Onyxia because it only has one boss and the variable (in blue) matches the expansion "wowWotLK"). Then replace the Instance name & icon (in red) and then replace and/or add boss names (in purple).

// ONYXIA
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/onx.gif"]
,["Onyxia's Lair", "(10 Heroic)", "(25 Heroic)"]
,["Onyxia", "", ""]
]);
Add Boss:
To add an additional boss, just add the following line (inside or at the bottom of the instance variable)

,["NEW BOSS", "", ""]

// ONYXIA
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/onx.gif"]
,["Onyxia", "(10 Heroic)", "(25 Heroic)"]
,["Onyxia", "", ""]
,["NEW BOSS", "", ""]
]);

Edited (1/31/2010): Updated this post with the newest WoW Progression box.
Edited (7/10/2010): Updated with Ruby Sanctum. It is using the achievement icon

, but I made a second one that has the ruby color if you want to use it:

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems

•

Mottie (SuperAdmin)

9/27/2008 4:50 AM EST : Progression Box v3

ACK!

Posts: 3873

0
Like

0
Dislike

Progression Box: Basic (no tooltip) | v1.0 | v2 (Latest) | v3.0 (Images Only)

Progression Box Version 3

GuildPortal admin site link to original post

PBv3 open

PBv3 closed

Even though all the images are of instances and bosses in World of Warcraft, all it takes is the replacement of images for any other MMORPG.

*cue the infomerical music*
Welcome to Progression Box version 3 (PBv3)!. This Progression Box uses JQuery and an extra little addon for it called "accordian". I think it's pretty cool! It is uploaded to my GuildPortal account, so feel free to link to it.

I didn't want or have time to make all of these images on my own, so I borrowed images and screenshots from a couple of GuildPortal sites. I hope you're not offended, so I will replace them if you do want me to remove them. I borrowed the progression image from Loch Modan Yacht Club (LMYC). It's beautifully done. Click this link to see the original image. And, I obtained the boss kill screenshots (thumbnails only) from the Horde Honor Guard website. The other images I made with photoshop.

I chopped up the LMYC progression image to make it work with this progression box. The image on the small image on the right is the progression box closed and the far right image is what you see after you click on Hyjal Summit. When you click on a boss image, a pop up window will appear with either a screenshot of the boss or an information box (click on Black Temple > Illidan) - an example of this progression box can be found on my "Warcraft" tab of my test website.

*Note: Some of the progression images are faded out. This was LMYC's method of showing a boss that hadn't been killed as of yet. I left these images as they were, since I was more worried about making this work than making all the images perfect. It's also why I didn't add the other nine instances of The Burning Crusade... utter laziness, I admit it, I have accepted it and now I have made it my own... Procratinators of the world Unit....

Content Box

I modified the CSS and HTML from this "jQuery Accordion Example". I had to play around with the CSS to make it compatible with GuildPortal. ~~You can find other examples of what the accordian addon can do here.~~ *Removed the addon

<div align="center">
<style type="text/css">
/* Some list and link styling */
#instances { width: 220px; margin: 0px; }
ul#instances { margin-left:0px; }
ul#instances li { width: 200px; list-style-type: none; margin:0px; }
ul#instances ul { margin-top:5px; }
ul#instances ul li { width: 175px; border: 0px; margin: 0px auto; padding-right:20px; }

/* Header links styling */
h3 { border: 0px; margin: 0px; padding-left:0px; padding-right:20px; }
h3.head { background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/forum_bottom.png) right center no-repeat; }
h3.selected { background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/forum_top.png) right center no-repeat; }

/* A few IE bug fixes */
* ul,li { margin: 0; padding: 0; }
* html ul#instances li { height: 100%; list-style-type: none; }
* html ul#instances ul { margin-top:5px; }
* html ul#instances ul li { height: 100%; margin: 0px auto; }
* html ul#instances h3 { padding-right: 20px; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#instances h3').click(function(){
     var active = $(this).html();
$(this).toggleClass('selected').next().toggle(300);
$('#instances h3').each(function(){
   if ($(this).html()!=active) {
    $(this).removeClass('selected').next().hide(300);
   }
})
}).next().hide();
});
</script>

<ul id="instances">

<h3 class="head"><img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/MH.jpg"></h3>
<ul style="display: none;">
<li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/winterchill.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/MH-Rage.jpg">
   </a>
</li>
<li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/anetheron.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/MH-Anetheron.jpg">
   </a>
</li>
<li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/kazrogal.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/MH-Kaz.jpg">
   </a>
</li>
<li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/azgalor.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/MH-Azgalor.jpg">
   </a>
</li>
<li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/bosskilled.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/MH-Archimonde.jpg">
   </a>
</li>
</ul>

<h3 class="head"><img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT.jpg"></h3>
<ul style="display: none;">
<li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/najentus.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT-Naj.jpg">
   </a>
</li>
<li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/supremus.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT-Supremus.jpg">
   </a>
</li>
<li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/akama.jpg">
   <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT-Shade.jpg">
   </a>
</li>
<li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/gorefiend.jpg">
   <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT-Teron.jpg">
   </a>
</li>
<li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/bossattempted.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT-Gurtogg.jpg">
   </a>
</li>
<li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/bossattempted.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT-RoS.jpg">
   </a>
</li>
<li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/bossnoattempt.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT-Shahraz.jpg">
   </a>
</li>
<li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/bossnoattempt.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT-Council.jpg">
   </a>
</li>
<li>
   <a rel="facebox" href="#info1">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT-Illidan.jpg">
   </a>
</li>
</ul>

</ul>
</div>



<div style="display:none;">
<div id="info1">
<strong>ACK</strong><br>
Blah blah blah...
More info about this boss...
<br>
Illidan Strategy - watch this!!
<object width="638" height="516"><param name="movie" value="http://www.youtube.com/v/7iMbx0RbDY4&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/7iMbx0RbDY4&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="638" height="516"></embed></object>
</div>
</div>

Customizing

CSS

Updated this script to work without the accordion script since the newer updates to GuildPortal broke it. I also removed some of the HTML and CSS for hovering over the image since it only worked properly in Firefox. But I did find a way to make the arrows work with IE and Chrome. So an improvement overall I think.
*DANGER WILL ROBINSON!* Errr, I'm going to start off with a word of caution, this CSS is very touchy. It wasn't changed much from the original CSS. I wouldn't mess with the very top part (just below the /* A few IE bug fixes */ unless you have to.
The ID, "#instances" defines the entire content box. The instance images are 200px wide, but with the added up and down arrows, it was widened to 220px to make room ~~(ummm don't ask me why the arrows don't show up with IE LOL).~~ *Works now!
"ul#instances li" is set to 200px to match the width of the instance image.
"ul#instances ul li" is set to 175px to match the width of the boss image.
~~"ul#instances ul li a:hover" has the highlight color (border and background) of "#333333" that you can modify to your liking.~~ *Removed link
There is a right padding set to 20px to make room for the arrow on the side in two places in the CSS. ~~(Damn you IE for hidhing my cool arrows!)~~
The image URLs in green are for the up and down arrows that change when you expand or contract an instance group.

Script

~~The accordian script is set, by default, to allow the instance boxes to collapse. You can have them always open by setting "alwaysOpen" to "true".~~ *Removed
~~If you want to turn off the animation, set "animated" to "false". But it's too purdy to do that!~~ * Removed
To adjust the speed of the box animation, modify the "300" inside the "toggle" and "hide" parts of the code (in red)
~~"showSpeed" and "hideSpeed" I believe is~~ the time in milliseconds that it takes to expand and contract the instance box. So "100" would be extremely fast, while "1000" would be slow (1 second).

HTML

In the HTML above, each element is on a new line to make it easier to read because the URL to the image is so long. In the HTML below, each section is compressed and colorized to make it easier to see how the elements fit together.
The overview:
- The entire list of instances needs to have a <ul id="instances"> at the top and a </ul> at the bottom.
- Each instance starts out with:
  
  <h3 class="head"><img src="URL TO INSTANCE IMAGE"></h3>
  <ul style="display: none;">
- Each boss line will look like this:
  
  <li><a rel="facebox" href="URL TO BOSS IMAGE"><img src="URL TO BOSS KILL SCREENSHOT"></a></li>
- When put all together, you should see this basic format:
  
  <ul id="instances">
  
  <h3 class="head"><img src="URL TO INSTANCE IMAGE #1"></h3>
  <ul style="display: none;">
  <li><a rel="facebox" href="URL TO BOSS KILL SCREENSHOT #1"><img src="URL TO BOSS IMAGE #1"></a></li>
  <li><a rel="facebox" href="URL TO BOSS KILL SCREENSHOT #2"><img src="URL TO BOSS IMAGE #2"></a></li>
  </ul>
  
  <h3 class="head"><img src="URL TO INSTANCE IMAGE #2"></h3>
  <ul style="display: none;">
  <li><a rel="facebox" href="URL TO BOSS KILL SCREENSHOT #3"><img src="URL TO BOSS IMAGE #3"></a></li>
  <li><a rel="facebox" href="URL TO BOSS KILL SCREENSHOT #4"><img src="URL TO BOSS IMAGE #4"></a></li>
  <li><a rel="facebox" href="URL TO BOSS KILL SCREENSHOT #5"><img src="URL TO BOSS IMAGE #5"></a></li>
  </ul>
  
  </ul>
Each boss line (in grey above) can be set up in several different ways (both use facebox, the popup window that's now part of GuildPortal - read this post on how to modify it):
1. Screentshot: Clicking on the boss image opens up a popup window of the boss kill screenshot. Most of the lines in the above code are set up this way. The blue text is the boss kill screenshot and the teal text is to the mini boss image in the bar.
  
  <li>
  <a rel="facebox" href="URL TO BOSS KILL SCREENSHOT">
  <img src="URL TO BOSS IMAGE">
  </a>
  </li>
2. Information Box: Clicking on the boss image opens a popup window with information and/or a video about the boss.
  - The href points to the ID of the info box (in purple), so these must match (the href uses a number sign "#" to point to the ID). The example below used "info1", you can use any ID as long as it is unique.
  - The URL to the boss image in the bar is in teal.
  - Add any text, images or even embeded videos between the top two <div> and the last two </div> in grey.
    
    In the embded video example I have in the "Content Box" section, you'll see the the height and width are 1.5x bigger. The height was modified to from 344 -> 516 and the width was modified from 425 -> 638 - because the default size of the embeded youtube videos needs to be bigger
  <li>
  <a rel="facebox" href="#info1">
  <img src="URL TO BOSS IMAGE">
  </a>
  </li>
  
  
  <div style="display:none;">
  <div id="info1">
  <strong>ACK, Kill it!</strong>
  <br>
  More info about this boss...
  <br>
  <img src="URL TO ANY IMAGE">
  
  Watch this strategy video!
  <PASTE YOUTUBE EMBED CODE HERE>
  
  </div>
  </div>

I hope I've covered everything in this post, if you need clarification or want to comment on this thread, please feel free to post here or send me an IM.

Edit (4/3/2009): Updated the code to make it work without using the accordion script. I also got the arrows to work properly in IE and Chrome.

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems

•

Mottie (SuperAdmin)

11/12/2008 4:00 AM EST : Progression Box v2.1 (WotLK)

ACK!

Posts: 3873

0
Like

0
Dislike

Progression Box: Basic (no tooltip) | v1.0 | v2 (Latest) | v3.0 (Images Only)

Progression Box version 2.1 - WotLK update

Content Box

(Free Form Text/HTML)

<style type="text/css">
/* Progression box */
#progBox { font-size:90%; color:#ffffff; text-align:center; padding:4px; }

/* Instance name text */
.instance { color:#cccccc; }

/* Instance image and image cell */
.instanceImgCell { width:30px; }
.instance img { vertical-align: middle; border:0px; }

/* bosses killed "(5/6)" in the progression box */
.bossCount { color:#cccccc; vertical-align:middle; }

/* Tooltip styles */
.tooltipHeader { color:#0080ff; font-weight:bold; vertical-align:top; }
.killedBoss { color:#888888; text-decoration:line-through; }
.toKillBoss { color:#dddddd; text-decoration:none; }
.killedText { color:#ff0000; }

.hide { display: none; }
.show { display: inline; }
</style>
<div style="text-align:center">
<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wow-1.png" title="World of Warcraft" onclick="pickExp(wowOrig);">
<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wow-2.png" title="The Burning Crusade" onclick="pickExp(wowTBC);">
<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wow-3.png" title="Wrath of the Lich King" onclick="pickExp(wowWotLK);">
<div id="progBox"></div>
</div>

<script type="text/javascript">
var wowOrig = new Array();
var wowTBC = new Array();
var wowWotLK = new Array();

// Tooltip width and progression icon size
var tooltipWidth = 300;
var tooltipStatusWidth = 95;
var iconHeight = 30;

// Text in progression box and tooltip, see CSS for color
var raidingKeyWord = "No|closed";
var bossKilledKeyWord = "Killed";

// Setting this to true will show ALL rows, even if you have never been there
// setting it to false will hide rows that match the "raidingKeyWord" above
var showAllRows = true;

// Default displayed progression
var defaultWoW = wowWotLK;

/*
Boss Information
********************************************
- Each progression variable is set up as follows:
   progress.push ([
    ["Thumbnail Image URL"]
   ,["Instance Name", "Instance Status"]
   ,["Instance Boss #1", "Boss #1 Status"]
   ,["Instance Boss #2", "Boss #2 Status"]
   ,   ...
   ,["Last Instance Boss", "Last Boss Status"]
   ]);
******************************************** */

/* ********************************************
   Original WoW
   ******************************************** */
// Zul'Gurub
wowOrig.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/zg.gif"]
,["Zul'Gurub", "Farm"]
,["High Priestess Jeklik (Bat)", "Killed"]
,["High Priest Venoxis (Snake)", "Killed"]
,["High Priestess Mar'li (Spider)", "Killed"]
,["High Priest Thekal (Tiger)", "Killed"]
,["High Priestess Arlokk (Panther)", "Killed"]
,["Hakkar the Soulflayer", "Killed"]
,["Bloodlord Mandokir", "Killed"]
,["Jin'do the Hexxer", "Killed"]
,["Gahz'ranka", "Killed"]
,["Edge of Madness", "Killed"]
]);

// AQ20
wowOrig.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/aq20.gif"]
,["Ruins of Ahn'Qiraj (AQ20)", "Farm"]
,["Kurinnaxx", "Killed"]
,["General Rajaxx", "Killed"]
,["Moam", "Killed"]
,["Buru the Gorger", "Killed"]
,["Ayamiss the Hunter", "Killed"]
,["Ossirian the Unscarred", "Killed"]
]);

// Onyxia
wowOrig.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/onx.gif"]
,["Onyxia", "Farm"]
,["Onyxia", "Killed"]
]);

// Molten Core
wowOrig.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/mc.gif"]
,["Molten Core", "Farm"]
,["Lucifron", "Killed"]
,["Magmadar", "Killed"]
,["Gehennas", "Killed"]
,["Garr", "Killed"]
,["Baron Geddon", "Killed"]
,["Shazzrah", "Killed"]
,["Sulfuron Harbinger", "Killed"]
,["Golemagg the Incinerator", "Killed"]
,["Majordomo Executus", "Killed"]
,["Ragnaros", "Killed"]
]);

// Black Wing Lair
wowOrig.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/bwl.gif"]
,["Black Wing Lair", ""]
,["Razorgore the Untamed", "Killed"]
,["Vaelastrasz", "Killed"]
,["Broodlord Lashlayer", "Killed"]
,["Firemaw", "Killed"]
,["Ebonroc", "Killed"]
,["Flamegor", "Killed"]
,["Chromaggus", "Killed"]
,["Nefarian", "60%"]
]);

// AQ40
wowOrig.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/aq40.gif"]
,["Temple of Ahn'Qiraj (AQ40)", ""]
,["The Prophet Skeram", "Killed"]
,["Vem, Yaul and Kri", "Killed"]
,["Battleguard Sartura", "Killed"]
,["Fankriss the Unyeilding", "Killed"]
,["Viscidus", "Killed"]
,["Princess Huhuran", "Killed"]
,["The Twin Emperors", "Killed"]
,["Ouro the Sandworm", "30%"]
,["C'Thun", ""]
]);

// Nax
wowOrig.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/nax.gif"]
,["Naxxramas", ""]
,["AW:Patrchwerk", "Killed"]
,["AW:Grobbulus", "Killed"]
,["AW:Gluth", "Killed"]
,["AW:Thaddius", "Killed"]
,["PW:Noth the Plaguebringer", "Killed"]
,["PW:Heigan the Unclean", "Killed"]
,["PW:Loatheb", ""]
,["SW:Anub'Rekhan", "Killed"]
,["SW:Grand Widow Faerlina", ""]
,["SW:Maexxna", ""]
,["DW:Instructor Razuvious", "Killed"]
,["DW:Gothik the Harvester", ""]
,["DW:The Four Horsemen", ""]
,["FL:Sapphiron", ""]
,["KC:Kel'Thuzad", ""]
]);

/* ********************************************
   The Burning Crusade
   ******************************************** */
// KARAZHAN
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Kar.gif"]
,["Karazhan", "(Farm)"]
,["Animal Boss", "Killed"]
,["Attumen the Huntsman", "Killed"]
,["Moroes", "Killed"]
,["Maiden of Virtue", "Killed"]
,["Opera Event", "Killed"]
,["Nightbane", "Killed"]
,["The Curator", "Killed"]
,["Shade of Aran", "Killed"]
,["Terestian Illhoof", "Killed"]
,["Netherspite", "Killed"]
,["Chess Event", "Killed"]
,["Prince Malchezaar", "Killed"]
]);

// ZUL'AMAN
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ZA.gif"]
,["Zul'Aman", "(in progress)"]
,["Nalorakk", "Killed"]
,["Akil'Zon", "Killed"]
,["Jan'Alai", "Killed"]
,["Halazzi", "Killed"]
,["Malacrass", "60%"]
,["Zul'jin", ""]
]);

// DOOM LORD KAZZAK
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DLK.gif"]
,["Doom Lord Kazzak", "Noogied us"]
,["Doom Lord Kazzak", ""]
]);

// DOOMWALKER
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DW.gif"]
,["Doomwalker", ""]
,["Doomwalker", ""]
]);

// GRUUL'S LAIR
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/GL.gif"]
,["Gruul's Lair", "(Farm)"]
,["High King Maulgar", "Killed"]
,["Gruul", "Killed"]
]);

// MAGTHERIDON'S LAIR
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Mag.gif"]
,["Magtheridon's Lair", "(Farm)"]
,["Magtheridon", "Killed"]
]);

// SERPENTSHRINE CAVERN
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/SSC.gif"]
,["Serpentshrine Cavern", ""]
,["Lurker", "Killed"]
,["Hydross", "Killed"]
,["Morogrim", "Killed"]
,["Leotheras", "Killed"]
,["Karathress", "Killed"]
,["Lady Vashj", "Killed"]
]);

// THE EYE, TEMPEST KEEP
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/TK.gif"]
,["The Eye", ""]
,["Void Reaver", "Killed"]
,["Al'ar", "Killed"]
,["Solarian", "Killed"]
,["Kael'thas", "Killed"]
]);

// BATTLE FOR MOUNT HYJAL
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/MH.gif"]
,["Battle for Mount Hyjal", "(in progress)"]
,["Rage Winterchill", "Killed"]
,["Anetheron", "Killed"]
,["Kaz'rogal", "Killed"]
,["Azgalor", "Killed"]
,["Archimonde", "10%"]
]);

// BLACK TEMPLE
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/BT.gif"]
,["Black Temple", "(in progress)"]
,["High Warlord Naj'entus", "Killed"]
,["Supremus", "Killed"]
,["Shade of Akama", "Killed"]
,["Teron Gorefiend", "40%"]
,["Gurtogg Bloodboil", ""]
,["Reliquary of Souls", ""]
,["Mother Shahraz", ""]
,["The Illidari Council", ""]
,["Illidan Stormrage", ""]
]);

// SUNWELL PLATEAU
wowTBC.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/SP.gif"]
,["Sunwell Plateau", ""]
,["Kalecgos", ""]
,["Brutallus", ""]
,["Felmyst", ""]
,["Eredar Twins", ""]
,["M'uru", ""]
,["Kil'jaeden", ""]
]);

/* ********************************************
   Wrath of the Lich King (10 man)
   ******************************************** */
// NAXXRAMAS II (10 man)
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2.gif"]
,["Naxxramas II (10 man)", "(in progress)"]
,["AW:Patchwerk", "Killed"]
,["AW:Grobbulus", "Killed"]
,["AW:Gluth", "Killed"]
,["AW:Thaddius", "Killed"]
,["PW:Noth the Plaguebringer", "Killed"]
,["PW:Heigan the Unclean", "Killed"]
,["PW:Loatheb", "Killed"]
,["SW:Anub'Rekhan", "Killed"]
,["SW:Grand Widow Faerlina", "Killed"]
,["SW:Maexxna", "Killed"]
,["DW:Instructor Razuvious", "Killed"]
,["DW:Gothik the Harvester", "Killed"]
,["DW:The Four Horsemen", "Killed"]
,["FL:Sapphiron", "Killed"]
,["KC:Kel'Thuzad", "40%"]
]);

// VAULT OF ARCHAVON (10 man)
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/VoA.gif"]
,["Vault of Archavon (10 man)", ""]
,["Archavon the Stone Watcher", "65%"]
]);

// CHAMBER OF ASPECTS - OBSIDIAN SANCTUM (10 man)
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/OS.gif"]
,["Obsidian Sanctum (10 man)", ""]
,["Sartharion the Onyx Guardian", "Killed"]
]);

// THE EYE OF ETERNITY (10 man)
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EoE.gif"]
,["The Eye of Eternity (10 man)", ""]
,["Malygos", "Killed"]
]);

// ULDUAR RAID (10 man)
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Unk-10.gif"]
,["Ulduar Raid (10 man)", "-closed-"]
,["-unknown boss-", ""]
]);

// AZJOL-NERUB RAID (10 man)
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Unk-10.gif"]
,["Azjol-Nerub Raid (10 man)", "-closed-"]
,["-unknown boss-", ""]
]);

// ICECROWN CITADEL (10 man)
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Unk-10.gif"]
,["Icecrown Citadel (10 man)", "-closed-"]
,["-unknown boss-", ""]
,["The Lich King", ""]
]);

/* ********************************************
   SEPARATOR
   ******************************************** */
wowWotLK.push([
["<hr>"]
])

/* ********************************************
   Wrath of the Lich King (25 man)
   ******************************************** */
// NAXXRAMAS II (25 man)
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2.gif"]
,["Naxxramas II (25 man)", "(in progress)"]
,["AW:Patchwerk", ""]
,["AW:Grobbulus", ""]
,["AW:Gluth", ""]
,["AW:Thaddius", ""]
,["PW:Noth the Plaguebringer", "Killed"]
,["PW:Heigan the Unclean", "25%"]
,["PW:Loatheb", ""]
,["SW:Anub'Rekhan", ""]
,["SW:Grand Widow Faerlina", ""]
,["SW:Maexxna", ""]
,["DW:Instructor Razuvious", ""]
,["DW:Gothik the Harvester", ""]
,["DW:The Four Horsemen", ""]
,["FL:Sapphiron", ""]
,["KC:Kel'Thuzad", ""]
]);

// VAULT OF ARCHAVON (25 man)
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/VoA.gif"]
,["Vault of Archavon (25 man)", ""]
,["Archavon the Stone Watcher", "Killed"]
]);

// CHAMBER OF ASPECTS - OBSIDIAN SANCTUM 25 man)
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/OS.gif"]
,["Obsidian Sanctum (25 man)", ""]
,["Sartharion the Onyx Guardian", "Killed"]
]);

// THE EYE OF ETERNITY (25 man)
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EoE.gif"]
,["The Eye of Eternity (25 man)", ""]
,["Malygos", ""]
]);

// ULDUAR RAID (25 man)
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Unk-25.gif"]
,["Ulduar Raid (25 man)", "-closed-"]
,["-unknown boss-", ""]
]);

// AZJOL-NERUB RAID (25 man)
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Unk-25.gif"]
,["Azjol-Nerub Raid (25 man)", "-closed-"]
,["-unknown boss-", ""]
]);

// ICECROWN CITADEL (25 man)
wowWotLK.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Unk-25.gif"]
,["Icecrown Citadel (25 man)", "-closed-"]
,["-unknown boss-", ""]
,["The Lich King", ""]
]);

// ******************************************************
// Don't change anything below this line
// ******************************************************
pickExp(defaultWoW);
function pickExp(ex) {
if (String(top.name).substring(0,4) == "Edit") { return; }
var sQ = "\'";
var pb = "<center><table class=progBox border=0 width='100%'><tbody>";
for (var inst=0; inst < ex.length; inst++) {
var killed = 0;
if (ex[inst][0]=="<hr>"){pb+="<tr><td colspan=3><hr></td></tr>";inst++;}
var sN = ex[inst][1][0].replace(/\(/g,"(");
var sNL = (sN.match("&#40")) ? sN.indexOf("&#40")-1 : sN.length;
var shortName = sN.substring(0,sNL);
pb += "<tr ";
   if (!showAllRows && (ex[inst][1][1].match(raidingKeyWord) || (ex[inst][1][1] == "" && ex[inst][2][1] == ""))) pb += " class=\"hide\"";
pb += "=\"ddrivetip('<table><tr><td class=tooltipHeader width=" + tooltipWidth + "px>";
pb += ex[inst][1][0].replace(/\'/g,sQ) + "</td><td>" + ex[inst][1][1].replace(/\'/g,sQ) + "</td></tr>";
for (var boss=2; boss < (ex[inst].length); boss++) {
   if (ex[inst][boss][1].match(bossKilledKeyWord)) {
    pb += "<tr><td class=killedBoss>" + ex[inst][boss][0].replace(/\'/g,sQ) + "</td><td class=killedText ";
    killed ++;
   } else {
    pb += "<tr><td class=toKillBoss>" + ex[inst][boss][0].replace(/\'/g,sQ) + "</td><td ";
   }
pb += "width=" + tooltipStatusWidth + ">" + ex[inst][boss][1] + "</td></tr>";
}
pb += "</table>', '', '" + tooltipWidth + "');\" =\"hideddrivetip()\"><td class=\"instanceImgCell\"><img src=\"";
pb += ex[inst][0] + "\" height=\"" + iconHeight + "\"";
pb += "></td><td class=\"instance\">" + shortName + "</td><td class=bossCount>(" + killed;
pb += "/" + (ex[inst].length-2);
pb += ")</td></tr>";
}
pb += "</table>";
document.getElementById('progBox').innerHTML = pb;
}
</script>

Customizing the Script

CSS

"#progBox" defines the progression box style and font size.
".instance" defines the instance name color & style.
".instanceImgCell" defines the size of the cell that contains the instance image (only change if you're using a different image).
".instance img" defines the styling of the instance image.
".bossCount" defines the text color and alignment of the bosses killed count "(5/6)".
".tooltipHeader" defines the style and color of the tooltip title.
".killedBoss" defines the boss name style when it has been killed. The default is set to put a line through the name.
".toKillBoss" defines the boss name style when it hasn't been killed.
".killedText" defines the style for the boss status when it has been killed. The default style makes the text red.

Variables (in red)

The tooltip width is set using "tooltipWidth". Default is 300 pixels.
Inside the tooltip on the right side is the instance & boss status column. The with of this is set using "tooltipStatusWidth" and is set to a default of 95 pixels to fit the "(in progress)" status.
The instance icon size is set by only it's icon height. The icon height is set by "iconHeight" and is set to a default of 30 pixels.
Style for an instance being raided (raidingKeyWord):
The script looks for this keyword in the instance status. You can add more than one keyword using a "|" separator (Shift-\). The script will hide that instance row if:
1. The keyword is in the instance status, or
2. If both the instance status and the first boss status are blank.
Style for a killed boss (bossKilledKeyWord):
The script looks for this keyword in your boss status text to determine if it needs to apply CSS to it. Default is set to "Killed". The keyword is case sensitive.
Show all rows (showAllRows):
If set to true, the script will show all instance rows regardless of what is in the status. If set to false, it will hide rows where the instance status keyword is found.
Default display (defaultWoW):
The script will display this instance group by default. It is set to "wowTBC" to show The Burning Crusade instances by default. You can also pick "wowOrig" or "wowWotLK".

Progression status

Change your instance and boss status as desired (in orange). The script is set up as follows:

progress.push ([
["Thumbnail Image URL"],
,["Instance Name", "Instance Status"]
,["Instance Boss #1", "Boss #1 Status"]
,["Instance Boss #2", "Boss #2 Status"]
, ...
,["Last Instance Boss", "Last Boss Status"]
]);

The Wrath of the Lich King instance & boss names were added for the opening of the expansion and will be subject to update. In addition, the icons I used here are not the "offical" instance icons and those too will be updated when they become available.

Separator

The code was modified to allow adding a horizontal line between 10 man and 25 man raid progression status. To add a horizontal line, add this code (it's labeled as "separator" in the code above):

wowWotLK.push([
["<hr>"]
])

Edit (11/25/2008): (1) Updated the expansion icons (thanks Azbulldog!) and the raid icons (thanks Kaysi!). (2) Renamed the "Chamber of Aspects" to "Obsidian Sanctum" even though the Chamber will have more than one Sanctum in the future. (3) Added some code to add a separator between the 10 man and 25 man sections.

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems

•

A.D.S (Applicant)

12/2/2008 10:44 AM EST : RE: Progression Box v2.1 (WotLK)

A.D.S Posts: 4 0 Like 0 Dislike	Can you jsut put in the instance/raids(WOTLK) names for us that'll make it much easier to under stand and will make life much more easier If you have all the boss counts set on 0/how ever many boss in instance would also help very much
•

misirlu13 (Applicant)

1/29/2009 5:16 AM EST : RE: Progression Box v2.1 (WotLK)

Posts: 63

0
Like

0
Dislike

I cannot get the latest progression bar to show the detailed information about which bosses I have killed. It shows the amount of bosses killed but the mousehover is not working for some reason. I copied and paste the exact free form text/html into the appropriate section of a free form text/html but am I supposed to add anything to the CSS or the footer to allow the mousehover to work? This is my site if you want to take a look at it.

http://www.guildportal.com/Guild.aspx?GuildID=279322&TabID=2344021

Any help I receive is appreciated.

•

Marama` (Member)

1/30/2009 6:33 AM EST : RE: Progression Box v2.1 (WotLK)

Marama` Posts: 363 0 Like 0 Dislike	misirlu13 said: but the mousehover is not working for some reason. same like same for both my custom progression/ recruitment boxes. and here is my site ty in advance. Nightbreed *I guess my brain will never work right. At least I'm cute.*
•

Mottie (SuperAdmin)

1/31/2009 2:56 AM EST : RE: Progression Box v2.1 (WotLK)

ACK! Mottie Posts: 3873 0 Like 0 Dislike	Check out this post... the tooltips have been removed from GuildPortal for some reason. Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
•

Marama` (Member)

1/31/2009 5:10 PM EST : RE: Progression Box v2.1 (WotLK)

Marama` Posts: 363 0 Like 0 Dislike	worked like a charm. XD *I guess my brain will never work right. At least I'm cute.*
•

Apollya_AD (Applicant)

3/10/2009 8:38 AM EST : RE: Progression Box v2.1 (WotLK)

Apollya_AD Posts: 1002 0 Like 0 Dislike	You should ding with the tooltips on the progression box to show both 10 and 25man like on the bar itself. Looks a lot nicer that way and less confusing as only 1 list.
•

1 2 3 4 5 6 7 8 9 10Next

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 )