LOTRO Progression Box v1.0

GuildPortal admin site link to the original post

• This script should be added to a Free Form Text/HTML type Widget.
• Copy the code below
• Paste it into the editor while in <> HTML mode
• Modify the code to match your guild's progression.
• Save

Thanks to Eldaberry for all the help organizing this script!

Content Box

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

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

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

/* 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; }

.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2 { width: 250px; }
#tooltip, #tooltip2, #preview {
 color: #dddddd;
 background: #222222;
 border: 1px solid #333333;
 padding:5px;
 display:none;
 border-radius: 1em;
 -moz-border-radius: 1em;
 -webkit-border-radius: 1em;
 opacity: 0.9;
 filter: alpha(opacity=90);
 text-align:left;
}
</style>
<div style="text-align:center">
<span id="progSelect">
<img class="tooltip" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-soa.png" title="Shadows of Angmar" onclick="pickExp(SoA);">
<img class="tooltip" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-mom.png" title="Mines of Moria" onclick="pickExp(MoM);">
<img class="tooltip" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-som.png" title="Siege of Mirkwood" onclick="pickExp(SoM);">
</span>
<div id="progBox"></div>
</div>

<script type="text/javascript">
var SoA = [];
var MoM = [];
var SoM = [];

var tooltipWidth = 300;
var tooltipStatusWidth = 95;

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

// 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"
var showAllRows = true;

// Default displayed progression
var defaultProgress = MoM;

/*
 Boss Information   
 ********************************************
- Each progression variable is set up as follows:
   SoM.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"]
   ]);
 ******************************************** */

/********************************************
 Shadows of Angmar
 ******************************************** */
// GREAT BARROW
SoA.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-greatbarrow.jpg"]
,["Great Barrow", ""]
,["Gaerthel and Gaerdring", ""]
,["Thadúr the Ravager", ""]
,["Sambrog", ""]
]);

// GARTH AGARWEN
SoA.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-garthagarwen.jpg"]
,["Garth Agarwen", ""]
,["Temair the Devoted", ""]
,["Grimbark", ""]
,["Edan and Esyld", ""]
,["Ivar the Bloodhand", ""]
,["Vatar", ""]
,["Naruhel", ""]
]);

// FORNOST
SoA.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-fornost.jpg"]
,["Fornost", ""]
,["Megoriath", ""]
,["Warchief Búrzgâsh", ""]
,["Gurkâmâb", ""]
,["Zhurmat", ""]
,["Rhavameldir", ""]
,["Zanthrug", ""]
,["Shiruk and Kamordî", ""]
,["Brogadan", ""]
,["Riamul", ""]
,["Krithmog", ""]
,["Einiora", ""]
,["Remmenaeg", ""]
]);

// ANNÚMINAS: GLINGANT
SoA.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-glinghant.jpg"]
,["Glingant", ""]
,["Nengon", ""]
]);

// ANNÚMINAS: OST ELENDIL
SoA.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-ostelendil.jpg"]
,["Ost Elendil", ""]
,["Guloth", ""]
,["Balhest", ""]
]);

// ANNÚMINAS: HAUDH VALANDIL
SoA.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-haudhvalandil.jpg"]
,["Haudh Valandil", ""]
,["Shingrinder", ""]
,["Dolvaethor", ""]
,["Valandil of Arnor", ""]
]);

// BARAD GÚLARAN
SoA.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-baradgularan.jpg"]
,["Barad Gúlaran", ""]
,["Forvengwath", ""]
,["Afraig", ""]
,["Coblaith", ""]
,["Castellan Wisdán", ""]
,["Múlvuirë", ""]
,["Udúnion", ""]
]);

// CARN DÛM
SoA.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-carndum.jpg"]
,["Carn Dûm", ""]
,["Urro", ""]
,["Barashel", ""]
,["Helchgam", ""]
,["Sálvakh", ""]
,["Azgoth", ""]
,["Avalgaith", ""]
,["Târlakh", ""]
,["Târlug", ""]
,["Mormoz", ""]
,["Rodakhan", ""]
,["Múra", ""]
,["Gúrthul", ""]
,["Mordirith", ""]
]);

// URUGARTH
SoA.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-urugarth.jpg"]
,["Urugarth", ""]
,["Sorkrank", ""]
,["Burzfîl", ""]
,["Dushkâl", ""]
,["Arkur", ""]
,["Kughûrz", ""]
,["Gríshakrum", ""]
,["Lamkarn", ""]
,["Athpukh", ""]
,["Lhugrien", ""]
,["Morthrang", ""]
,["Gruglok", ""]
,["Lagmas", ""]
]);

// HELEGROD
SoA.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-helegrod.jpg"]
,["Helegrod", ""]
,["Coldbear", ""]
,["Adhargal", ""]
,["Ansach", ""]
,["Breosal", ""]
,["Grisgart", ""]
,["Storvâgûn", ""]
,["Zaudru", ""]
,["Drugoth", ""]
,["Thorog", ""]
]);

// RIFT OF NURZ GHASHU
SoA.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-rift.jpg"]
,["Rift of Nurz Ghashu", ""]
,["Barz", ""]
,["Zurm", ""]
,["Fruz", ""]
,["Zogtark", ""]
,["Narnûlubat", ""]
,["Shadow-Eater & Stone-Biter", ""]
,["Thrâng", ""]
,["Thaurlach", ""]
]);

/********************************************
 Mines of Moria
 ******************************************** */
// THE GRAND STAIR
MoM.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-grandstair.jpg"]
,["The Grand Stair", ""]
,["lzkal the Pummeler", ""]
,["Glothrok the Vile", ""]
,["Forzunk", ""]
,["Gothghaash the Firecaller", ""]
,["Dorozg the Beast Tamer", ""]
,["The Beast", ""]
,["Nardur the Shield", ""]
,["Igash the Fanatic", ""]
]);

// THE FORGES
MoM.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-forges.jpg"]
,["The Forges", ""]
,["Narkû", ""]
,["Dhaub", ""]
,["Thrug", ""]
,["Krankluk", ""]
]);

// HALLS OF CRAFTING
MoM.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-glinghant.jpg"]
,["Halls of Crafting", ""]
,["Ambal", ""]
,["Bashkuga", ""]
,["Thaguzg", ""]
]);

// THE SIXTEENTH HALL
MoM.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-sixteenth.jpg"]
,["The Sixteenth Hall", ""]
,["Tramug", ""]
,["Dhurz", ""]
,["The Lost One", ""]
]);

// SKUMFIL
MoM.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-skumfil.jpg"]
,["Skumfil", ""]
,["Bonetooth", ""]
,["Old Gnawer", ""]
,["Rockjaw", ""]
,["Shalebiter", ""]
,["Grimreaver", ""]
]);

// FIL GASHAN
MoM.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-filgashan.jpg"]
,["Fil Gashan", ""]
,["Chef Vrarz", ""]
,["Commander Greb", ""]
,["General Talug", ""]
]);

// FILIKUL
MoM.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-filikul.jpg"]
,["Filikul", ""]
,["Nornúan", ""]
]);

// DARK DELVINGS
MoM.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-delving.jpg"]
,["Dark Delvings", ""]
,["The Void-Eater", ""]
,["The Doom-Speaker", ""]
,["Gurvand", ""]
]);

// THE VILE MAW
MoM.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-vilemaw.jpg"]
,["The Vile Maw", ""]
,["The Watcher in the Water", ""]
]);

// DÂR NARBUGUD
MoM.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lotro-darnarbugud.jpg"]
,["Dâr Narbugud", ""]
,["Mistress of Pestilence", ""]
,["The Blind One", ""]
,["Zholuga", ""]
,["Istum", ""]
,["Flagit", ""]
,["Blagh & Rung", ""]
]);

/********************************************
 Siege of Mirkwood
 ******************************************** */
// TBA
SoM.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Unk.png"]
,["To Be Announced", "-Closed-"]
,["Unknown", ""]
]);

// ******************************************************
// Don't change anything below this line
// ******************************************************
pickExp(defaultProgress);
function pickExp(ex) {
 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 class="tooltip';
   if (!showAllRows && (ex[inst][1][1].match(raidingKeyWord) || (ex[inst][1][1] == '' && ex[inst][2][1] == ''))) pb += ' hide';
  pb += '" title="<table><tr><td class=tooltipHeader width=' + tooltipWidth + '>';
  pb += ex[inst][1][0].replace(/\"/g,'&quot;') + '</td><td nowrap>' + ex[inst][1][1].replace(/\"/g,'&quot;') + '</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,'&quot;') + '</td><td class=killedText ';
    killed ++;
   } else {
    pb += '<tr><td class=toKillBoss>' + ex[inst][boss][0].replace(/\"/g,'&quot;') + '</td><td ';
   }
  pb += 'width=' + tooltipStatusWidth + '>' + ex[inst][boss][1] + '</td></tr>';
  }
  pb += '</table>" rel="' + tooltipWidth + '"><td class="instanceImgCell"><img src="';
  pb += ex[inst][0] + '"></td><td class="instance">' + shortName + '</td><td class=bossCount>(' + killed;
  pb += '/' + (ex[inst].length-2);
  pb += ')</td></tr>';
 }
 pb += '</table>';
 $('#progBox').html(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).
• ".instanceImgCell img" defines the styling and size of the instance image. This is where you set the icon size - default is 30px for height and width.
• ".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 (defaultProgress):
  The script will display this instance group by default. It is set to "MoM" to show Shadow of Angmar or Siege of Mirkwood raids by default. You can pick "SoA" or "SoM", respectively.

Progression status

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

SoM.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 Siege of Mirkwood dungeon & boss names will be added as more information becomes available.

Hi Glielhry!

Oops sorry, I forgot to add that you need to use the tooltip script I made.. add this to your footer HTML (Control Panel > Custom HTML & Script > Footer Area):

<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2 { width: 250px; }
#tooltip, #tooltip2, #preview {
 color:#dddddd;
 background:#222222;
 border: 1px solid #333333;
 padding:5px;
 display:none;
 opacity: 0.9;
 filter: alpha(opacity=90);
 text-align:left;
}
</style>
<script src="http://www.axiomfiles.com/Files/258012/tooltip.js" type="text/javascript"></script>

I'm very new to this stuff so this question may seem silly.  I already have another of your scripts in the Custom HTML>Footer Area box for centering my tabs.  Do I paste this script for the progression table beneath it?  I tried that and it didn't do anything, I still get the script when I hover or click on the instances.

Hi Mottie,

I was wondering with the new updates and raids that have come out if there would be an update to the raid progression as well.  We have several new areas and new raids and it would be cool to be able to track our progression with those as well.

As always, keep up the great work

Nykeawyn

Here is the Info I have for Seige of Mirkwood and Rise of Isengard.  I really hope this helps

/********************************************
Seige of Mirkwood
 ******************************************** */
 

 // SWORD HALLS
 SoM.push ([
["http://i31.photobucket.com/albums/c394/ryrytio/sword_halls-1.jpg"]
,["Sword Halls", ""]
,["Urcheron", ""]
,["Carchrien", ""]
,["Durkar", ""]
]);

 // WARG PENS
 SoM.push ([
["http://i31.photobucket.com/albums/c394/ryrytio/250px-Kranklob-1.jpg"]
,["Warg Pens", ""]
,["Athgrat", ""]
,["Kranklob", ""]
]);

// DUNGEONS
 SoM.push ([
["http://i31.photobucket.com/albums/c394/ryrytio/Lotro-screenshot-mmoreviews.jpg"]
,["Dungeons", ""]
,["The Warden", ""]
 ]);

// SAMMATH GUL
 SoM.push ([
["http://i31.photobucket.com/albums/c394/ryrytio/sammath_gul-1.jpg"]
,["Sammath Gul", ""]
,["Urchir", ""]
,["Alasgossir", ""]
,["Gorothul", ""]
,["Demafaer", ""]
]);

// BARAD GULDUR
 SoM.push ([
["http://i31.photobucket.com/albums/c394/ryrytio/09_chambers_instance.jpg"]
,["Barad Guldur", ""]
,["Durchest", ""]
,["The Twins", ""]
,["Lieutenant", ""]
]);



/********************************************
 Rise of Isengard
 ******************************************** */
// DRAIGOCH
RoI.push ([
 ["http://www.thewesternalliance.org/lem-files/event/Draigoch-1.png']
,["Draigoch", ""]
,["Draigoch", ""]
]);

//RING OF FIRE AND FROST
RoI.push ([
 ["http://icons.iconarchive.com/icons/danila-medvedev/movie-xp/48/Two-Towers-2-icon.png"]
,["Ring of Fire and Frost", ""]
,["Crisiant", ""]
,{"Usgarren", ""]
]);

//RING OF ACID
RoI.push ([
 ["http://icons.iconarchive.com/icons/danila-medvedev/movie-xp/48/Two-Towers-2-icon.png"]
,["Iorweth", ""]
]);

//RING OF LIGHTNING
RoI.push ([
 ["http://icons.iconarchive.com/icons/danila-medvedev/movie-xp/48/Two-Towers-2-icon.png"]
,["Ring of Lightning", ""]
,["Kalbak", ""]
]);

//RING OF SHADOW
RoI.push ([
 ["http://icons.iconarchive.com/icons/danila-medvedev/movie-xp/48/Two-Towers-2-icon.png"]
,["Ring of Shadow", ""]
,["Bukot", ""]
]);

//SARUMAN'S RING
RoI.push ([
 ['http://icons.iconarchive.com/icons/danila-medvedev/movie-xp/48/Two-Towers-2-icon.png"]
,["Saruman's Ring", ""]
,["Saruman", ""]
]);

//FANGORNS EDGE
RoI.push ([
 ["http://archiehopeful.files.wordpress.com/2011/12/scary_forest.jpeg"]
,["Fangorns Edge", ""]
,["Undurz", ""]
]);

//PITS OF ISENGARD
RoI.push ([
 ["http://png-5.findicons.com/files//icons/1330/lotr_armoury_of_the_third_age/128/arms_of_isengard.png"]
,["Pits of Isengard", ""]
,["Zaburz", ""]
,["Ironarm", ''"]
,["Fushbraf", ""]
]);

//DARGNAKH UNLEASHED
RoI.push([
 ["http://png-4.findicons.com/files//icons/1330/lotr_armoury_of_the_third_age/128/bonus_cave_troll.png"]
,["Dargnakh Unleashed", ""]
,["Dargnakh", ""]
,["Huva", '']
]);

//ROOTS OF FANGORN
RoI.push ([
 ["http://archiehopeful.files.wordpress.com/2011/12/scary_forest.jpeg"]
,["Roots of Fangorn", ""]
,["Frushkul", ""]
,["Gurthul", ""]
]);


I don't know if this helps, but it has the new instance names and the bosses associated with them.  I know I most likely have the script wrong but I was just hoping to get you the info.

this is the jpg I found for ROI as well

<img class="tooltip" src="http://lotroreporter.com/wp-content/uploads/2011/07/rise-of-isengard-64x64.jpg" title="Rise of Isengard" onclick="pickExp(RoI);">