Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : LotRO > LOTRO Progression Box
Mottie (SuperAdmin) 11/29/2009 3:26 PM EST : LOTRO Progression Box
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Glielhry (Member) 1/6/2010 3:19 PM EST : RE: LOTRO Progression Box
Glielhry
Posts: 366

0
Like

0
Dislike

I copied the code as instructed into the html/text control box while <>html is highlighted.  I am able to select between SoA, MoM, and SoM and can see each instance and the corresponding number (stage completion).  But when i mouse over and click the instance, I only see script for the table and no actual table is displaying.  Any ideas?
TopBottom

Mottie (SuperAdmin) 1/6/2010 7:46 PM EST : RE: LOTRO Progression Box
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

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>
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Glielhry (Member) 1/7/2010 4:38 PM EST : RE: LOTRO Progression Box
Glielhry
Posts: 366

0
Like

0
Dislike

Thanks Mottie!  You're the best!  That fixed it perfectly
TopBottom

Stonespire (Applicant) 1/17/2010 5:28 PM EST : RE: LOTRO Progression Box
Stonespire
Posts: 4391

0
Like

0
Dislike

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

Mottie (SuperAdmin) 1/17/2010 8:13 PM EST : RE: LOTRO Progression Box
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Stonespire!

Actually the progression table script should go inside a free form text/HTML type widget.

The tooltips that popup now show HTML atm because GP has rearranged the scripts and the tooltip script is being overridden. I sent them a message and hopefully this will be returned to the way it was so the tooltip script won't be working properly until then =(
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Nykeawyn (Applicant) 5/6/2012 12:47 PM EST : RE: LOTRO Progression Box
Nykeawyn
Posts: 246

0
Like

0
Dislike

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
TopBottom

Mottie (SuperAdmin) 5/7/2012 9:18 AM EST : RE: LOTRO Progression Box
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Nykeawyn!

It's hard for me to keep things up to date when I don't play that particular game, so if you could share the information, I'll look into updating the mod, but make sure you save the code that has your progression from previous instances before updating to the new one.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Nykeawyn (Applicant) 5/7/2012 8:48 PM EST : RE: LOTRO Progression Box
Nykeawyn
Posts: 246

0
Like

0
Dislike

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



TopBottom

ChuckF (Applicant) 6/3/2012 11:20 AM EST : RE: LOTRO Progression Box
ChuckF
Posts: 31

0
Like

0
Dislike

Hey...
Sorry im new here.
I copied pasted that code above as per instructions but I only get the written code being viewed?
Any advice...
Thanks in advance
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%