Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Guild Progression box
Mottie (MVP) 6/12/2008 11:45 AM EST : RE: Guild Progression box
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

I've seen this happen so many times now, that I just posted a thread on how to save the CSS the site makes BEFORE you enable your Custom StyleSheet... read it here
TopBottom

Keelien (Guild Admin) 8/26/2008 7:26 AM EST : RE: Guild Progression box
Keelien
Posts: 135
Posts With Wolves

Hey guys... First off ty for the great advice and tips you guys give us.


I redid my site using one of the new templets.. but now when I try to add the progression box and recruitment box it only shows the words not the pics.. I went into the css and hit the enable button and wahhla! it worked however.. my templet was gone everything went white... is there any way i can fix this?

TopBottom

Keelien (Guild Admin) 8/26/2008 7:41 AM EST : RE: Guild Progression box
Keelien
Posts: 135
Posts With Wolves

Well apparently there was 2 more pages to be read... lol sorry guys for reposting something someone already did. 

TopBottom

Mottie (MVP) 8/26/2008 12:05 PM EST : RE: Guild Progression box
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Updated the progression box that had tooltips.

  • Fixed: I noticed a problem with the parenthesis showing up on two rows sometimes.
  • Fixed: If you had no bosses killed in an instance and had the row set to "show", all you would see is "()"
Coming soon... version 2 of the progression bar. Hopefully it'll be easier to update. It will also include the pre-TBC instances and will be easily expandable to include WotLK instances.
TopBottom

Mottie (MVP) 8/27/2008 12:10 PM EST : WoW Guild Progression box version 2.0
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster


Progression Box version 2.0



Click on the icons at the top to view the progression for the original WoW, The Burning Crusade expansion and soon to be added Wrath of the Lich King expansion.

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; height:26px; width:24px; }

/* 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; }
#dhtmltooltip table { color:#ffffff; }

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

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

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

// Setting this to true will show ALL rows, even if you have never been there
var showAllRows = true;

// Default displayed progression
var defaultWoW = wowTBC;

/*
 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
   ******************************************** */
// WotLK instances to be added below
wowWotLK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/temp.gif"]
,["Nothing here yet", ""]
]);

// ******************************************************
// Don't change anything below this line
// ******************************************************
pickBox(defaultWoW);

function pickBox(ex) {
 if (String(top.name).substring(0,4) == "Edit") { return; }

var pb = "<center><table class=progBox border=0 width='100%'><tbody>";
 for (var inst=0; inst < ex.length; inst++) {
  var killed = 0;
  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=200px>";
  pb += ex[inst][1][0].replace(/\'/g, "&#92;&#39;") + "</td><td>" + ex[inst][1][1].replace(/\'/g, "&#92;&#39;") + "</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, "&#92;&#39;") + "</td><td class=killedText>";
    killed ++;
   } else {
    pb += "<tr><td class=toKillBoss>" + ex[inst][boss][0].replace(/\'/g, "&#92;&#39;") + "</td><td>";
   }
  pb += ex[inst][boss][1] + "</td></tr>";
  }
  pb += "</table>', '', '300');\" =\"hideddrivetip()\"><td class=\"instanceImgCell\"><img src=\"";
  pb += ex[inst][0] + "\"";
  pb += "></td><td class=\"instance\">" + ex[inst][1][0] + "</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 and size 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)
  • Style for an instance being raided (raidingKeyWord):
    The script looks for this keyword in the instance status. 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 will be added as more information becomes available.
TopBottom

Mottie (MVP) 9/27/2008 4:36 AM EST : Guild Progression box version 3.0
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster


Progression Box Version 3

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 Accordian 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>

<!--
****************
Illidan Info Box!
(this part is optional)
**************** -->

<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">
      <!-- Instance #1 -->
      <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>
      <!-- Instance #2 -->

      <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>

      <!-- Info Box -->
      <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.
TopBottom

Mottie (MVP) 11/12/2008 4:08 AM EST : Guild Progression box version 2.1 (WotLK)
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster


Progression Box version 2.1 - WotLK update

This is just a minor update from version 2.0. I thought about replacing the v2.0 code in the post, but I can't remember what I've updated in the code and since I'm busy packing and such, I'm just going to post what I already had written up for it.

Also, I don't plan on updating v 3.0 (the post above) since it's all based off of images. Sorry, you'll have to do that yourself 

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; }
#dhtmltooltip table { color:#ffffff; }

.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", ""]
,["AW:Thaddius", ""]
,["PW:Noth the Plaguebringer", "Killed"]
,["PW:Heigan the Unclean", ""]
,["PW:Loatheb", ""]
,["SW:Anub'Rekhan", ""]
,["SW:Grand Widow Faerlina", ""]
,["SW:Maexxna", ""]
,["DW:Instructor Razuvious", "Killed"]
,["DW:Gothik the Harvester", ""]
,["DW:The Four Horsemen", ""]
,["FL:Sapphiron", ""]
,["KC:Kel'Thuzad", ""]
]);

// 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"]
]);

// 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", ""]
]);

// 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)", ""]
,["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", ""]
]);

// 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", "Attempted"]
]);

// 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", ""]
]);

// 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", ""]
]);

// 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 = "&#92;&#39;";
 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,"&#40;");
  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.
Edit (12/5/2008): Fixed the button selectors for the expansion... it used "pickBox" from the previous version and not "pickExp" from this version.
Edit (1/13/2009): Added "#dhtmltooltip table" CSS which changes the color of the instance progress text.
TopBottom

Jizmak-Rebirth (New Admin) 11/14/2008 2:19 AM EST : RE: Guild Progression box
Jizmak-Rebirth
Posts: 1157
Zomgawsh Poster

Any updates and pretty icons for WoLK new raids and dungeons?
TopBottom

Mottie (MVP) 11/14/2008 5:55 AM EST : RE: Guild Progression box
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

I'm still waiting on Blizzard for the icons, not sure if they will update it soon since it's still missing the Sunwell Plateau... their raid calendar is here and I'll add the icons when I they do, or when someone makes nicer ones than the ones I have in the post above.
TopBottom

Azbulldog (New Admin) 11/21/2008 7:10 PM EST : RE: Guild Progression box
Azbulldog
Posts: 432
Fingers of Fury!

Here I trimmed these a little bit so they look better on a black background.

TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%