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! > EQ2 Raid Progression
Mottie (MVP) 3/22/2009 11:43 AM EST : EQ2 Raid Progression
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

EQ2 Raid Progression v1.1

This is the Raid Progression for the Rise of Kunark expansion of EQ2 (I think LOL). If you find any errors or find nicer images please feel free to post! It's a modified version of the raid progression box I made for WoW.

* NOTE: If you can't get the tooltips to work, make sure you add this line into the Banner HTML, footer HTML (read this thread for more detailed instructions)
<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>


Content Box (Free Form Text/HTML)
<style type="text/css">
/* Progression box */
#progBox { color:#
ffffff; text-align:center; padding:4px; }

/* Instance name text */

.instance { color:#
cccccc; font-size:.8em; }

/* 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">
<!-- Expansion Selector -->
<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EQ2Rok.png" title="Rise of Kunark" onclick="pickExp(eq2RoK);">
<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EQ2SF.png" title="Sentinel's Fate" onclick="pickExp(eq2SF);">

<div id="progBox"></div>
</div>

<
script type="text/javascript">
var eq2RoK = [],
    eq2SF  = [];


var tooltipWidth =
300;
var tooltipStatusWidth =
95;
var iconHeight =
30;

// 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 defaultEQ2 =
eq2SF;

/*

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

/* ********************************************

   Rise of Kunark
   ******************************************** */

// WARD OF ELEMENTS                
eq2RoK.push ([                   
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/woe.jpg"]                   
,["Ward of Elements",
""]                   
,["Imperator Ignus",
""]                   
,["Gelidus Ventus",
""]                   
,["Khost Alur",
""]                   
,["Digg",
""]                   
,["Dayakara",
""]                   
,["Benach Aglebar",
""]                   
,["Captain Grush",
""]      
,["Aiden",
""]                
]);   
 
// KURN'S TOWER                 
eq2RoK.push ([                   
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/kurns.jpg"]                   
,["Kurn's Tower",
""]                   
,["Haggle Baron Klok",
""]                   
,["Sir Rouland",
""]                   
,["Ilenee's Despair",
""]                   
,["Ione the Lifebringer",
""]                                  
]);   

// THE TOMB OF THUUGA

eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ToT.png"]
,["The Tomb of Thuuga",
""]
,["Tairiza the Window Mistress",
""]
]);

// The EXECUTION THRONE ROOM

eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ETR.png"]
,["The Execution Throne Room",
""]
,["Pawbuster",
""]
]);

// THE PROTECTOR'S REALM

eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/PR.png"]
,["The Protector's Realm",
""]
,["Adkar Vyx",
""]
,["Iztapa Vyx",
""]
,["Wymbulu Vyx",
""]
,["Zykluk Vyx",
""]
,["Doomcoil",
""]
,["Ludmila Kystov",
""]
,["Imzok's Revenge",
""]
]);

// THE TEMPLE OF KOR-SHA

eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ToKS.png"]
,["The Temple of Kor-Sha",
""]
,["Uzdrak the Invincible",
""]
,["Atrebe's Statue",
""]
,["Kodux & Zarda",
""]
,["Selrach Di'Zok",
""]
]);

// VENRIL SATHIR'S LAIR

eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/VenrilSathir.png"]
,["Venril Sathir's Lair",
""]
,["Venril Sathir",
""]
]);

// THE CHAMBER OF DESTINY

eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/CoD.png"]
,["The Chamber of Destiny",
""]
,["The Leviathan",
""]
]);

// VEESHAN'S PEAK

eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Veeshan.png"]
,["Veeshan's Peak",
""]
,["Kluzen the Protector",
""]
,["Elder Ekron",
""]
,["Nexona",
""]
,["Druushk",
""]
,["Taskmaster Nichok",
""]
,["Miyex Vioren",
""]
,["Qunard Ashenclaw",
""]
,["Xygoz",
""]
,["Hoshkar",
""]
,["Travenro the Skygazer",
""]
,["Silverwing",
""]
,["Phara Dar",
""]
]);

// TRAKANON'S LAIR

eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/TrakLair.png"]
,["Trakanon's Lair",
""]
,["Trakanon",
""]
]);

// SHARD OF HATE

eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/SoH.png"]
,["Shard of Hate",
""]
,["Dreadlord D'Somni",
""]
,["Demetrius Crane",
""]
,["Master P'Tasa",
""]
,["Malevolence & Ire",
""]
,["Kpul D'Vngur",
""]
,["Byzola",
""]
]);

// TOMB OF THE MAD CRUSADER

eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/TotMC.png"]
,["Tomb of the Mad Crusader",
""]
,["Captain Ikalus",
""]
,["Senior Loyalist Tilas",
""]
,["Thet-Em-Aua",
""]
,["Xebnok the Wretched",
""]
,["Gynok Moltor ",
""]
]);

// PALACE OF THE ANCIENT ONE

eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/PotAO.png"]
,["Palace of the Ancient One",
""]
,["Xythus Davian & Aransta",
""]
,["Switchmaster Zaxlyz",
""]
,["Absatalius", ""]
,["Tythus Tinzok", ""]
,["Pentacylpse & Ultaclypse",
""]
,["Mynzak",
""]
,["Anashti Sul", ""]

]);

// YKESHA'S INNER STRONGHOLD

eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Ykesha.png"]
,["Ykesha's Inner Stronghold",
""]
,["The Strange Stalker",
""]
,["Kultak the Cruel",
""]
,["Tyrannus the Dark",
""]
,["Field General Uktap", ""]
,["Ykesha", ""]

]);

// ZARAKON'S ABYSSAL CHAMBER

eq2RoK.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Zarakon.png"]
,["Zarakon's Abyssal Chamber",
""]
,["Zarrakon",
""]
]);

// MUNZOK'S MATERIAL BASTION                 

eq2RoK.push ([                   
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/munzoks.jpg"]                   
,["Munzok's Material Bastion",
""]                   
,["Iztak, Nynzok, Omzuk, Rwnzak",
""]     
,["Yzlak",
""]       
,["Ozyk",
""]       
,["Umzok",
""]       
,["Gozak",
""]       
,["Munzok",
""]                     
]);         
   
// MIRAGUL'S PLANAR SHARD             
eq2RoK.push ([                   
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/miragul.jpg"]                   
,["Miragul's Planar Shard",
""]                   
,["Kervis Pendleir",
""]     
,["Haladan Moonrunner (Easy)",
""]       
,["Glaciactus",
""]      
,["Xaxia Viralus",
""]      
,["Qxectus Qxectus",
""]       
,["Miragul (Easy)",
""]    
,["Haladan Moonrunner (Hard)",
""]           
,["Miragul (Hard)",
""]                  
]);

/* ********************************************
   Sentinel's Fate
   ******************************************** */
// Lair of the Dragon Queen

eq2SF.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Toxxulia1.jpg"]
,["Lair of the Dragon Queen"
, ""]
,["Wyvernlord Tuluun", ""]
,["Wyrmlord Zaos", ""]
,["Vulaan", ""]
,["Toxxulia(hard)", ""]
]);

// Perah'Celsis Abominable Laboratory
eq2SF.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Waansu1.jpg"]
,["Perah'Celsis Abominable Laboratory"
, ""]
,["Ernax Heridion", ""]
,["Vernox the Insatiable", ""]
,["Sara Greenheart", ""]
,["The Scavanator", ""]
,["Haraakat the Seer", ""]
,["Xilaxis The Explorer(easy)", ""]
,["Perah'Celsis(easy)", ""]
,["Arkatanthis the Destroyer(hard)", ""]
,["Waansu(hard)", ""]
]);

// The Palace of Roehn Theer
eq2SF.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/PoRT1.jpg"]
,["The Palace of Roehn Theer"
, ""]
,["Lieutenant Buldoral", ""]
,["Azara the Seer", ""]
,["Penda Parmare(easy)", ""]
,["Kendis Parmare(easy)", ""]
,["Penda & Kendis United(hard)", ""]
,["Maalus Shadowfyre(easy)", ""]
,["Maalus Shadowfyre(hard)", ""]
,["The Three Sages(easy)", ""]
,["The Three Sages(hard)", ""]
,["Roehn Theer(easy)", ""]
,["Roehn Theer(medium)", ""]
,["Roehn Theer(hard)", ""]
,["Roehn Theer(very hard)", ""]
]);

// The Vigilant: Final Destruction
eq2SF.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Vigilant1.jpg"]
,["The Vigilant: Final Destruction"
, ""]
,["Thanaraax", ""]
,["Cadducian, Raanum, and Tartan", ""]
,["Melagrognan", ""]
,["High Marus Alaric", ""]
,["Kratulus", ""]
,["Kage-Konn Prime Zoz", ""]
,["Trajin Cedon", ""]
,["Prime Trajin Ghis", ""]
]);

// ******************************************************

// Don't change anything below this line
// ******************************************************

pickExp(defaultEQ2);
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] + '" height="' + iconHeight + '"';
  pb += '></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 dungeon name color & style.
  • ".instanceImgCell" defines the size of the cell that contains the dungeon image (only change if you're using a different image).
  • ".instance img" defines the styling of the dungeon 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 dungeon & 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 dungeon (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 dungeon 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 dungeon status, or
    2. If both the dungeon 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 (defaultEQ2):
    The script will display this expansion group by default. It is currently set to "eq2RoK" to show Rise of Kunark bosses, but the expansion selector is commented out and will be until more expansions are added to this script.
Progression status
  • Change your instance and boss status as desired (in orange). The script is set up as follows:
eq2RoK.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"]
]);
Edit (11/6/2009): Replaced the instructions to add the old tooltips to the new updated tooltip script
Edit (11/8/2009): Updated the code with 4 new dungeons and replaced the code to work without using the tooltip code (posted at the top of this thread).
Edit (5/19/2010): Updated with Sentinel's Fate Expansion information, thanks Kainda K'Naae!
TopBottom

Draylor (New Admin) 3/25/2009 8:12 PM EST : RE: EQ2 Raid Progression
Draylor
Posts: 424
Fingers of Fury!

Mottie,
    Nice work - question - i have this on my test site, but can't seem to figure out what value to change to get the "Font" of the display name of the Raid zone to change size. Mine is showing up with 2 - 3 lines - which skews it out a bit. I'd like to have the name be no more then 2 lines such as yours ... 

    I figure it has something to do with :     /* Instance name text */
                                                            .instance { color:#8a672d; font-size:.2em; }

    But I can't figure how to change this - I think this is a % of the font size (right?) I changed the font color already to match my site some what ... you can look at what I have thus far on http://totalcarnage.guildportal.com/Guild.aspx?GuildID=223157&TabID=1880885 

Thanks in advance....


~Draylor
TopBottom

Mottie (MVP) 3/26/2009 11:18 PM EST : RE: EQ2 Raid Progression
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Draylor!

Well I forgot that GP recently added some CSS that forces the table text size to 1em.. the line looks like this:
table, th, td { font-size:1em !important; }
So, I there are two things you can do to make your text "fit" better.
  1. You can just make the entire left column wider

    Control Panel > Site Pages > Manage Pages > Click on "Options / Delete" on Home page

    Now increase the Left Pane Width from 175px to something like 200px, then save

  2. You can modify the CSS definitions to over-ride the other one, but even at 0.8em the dungeons names are pushed into three lines... I made these changes and everything was tiny (but still on 3 lines o.O).. the stuff I changed/added is in red.

    In the CSS
    .instance { color:#8a672d; font-size:.8em !important; }
    .instanceImgCell { width:20px; }
    .bossCount { color:#cccccc; vertical-align:middle; font-size:.8em !important; }
    In the javascript
    var iconHeight = 20;
I'm guessing you may end up doing both, just not as small as I set things in the 2nd option
TopBottom

Draylor (New Admin) 3/28/2009 5:27 PM EST : RE: EQ2 Raid Progression
Draylor
Posts: 424
Fingers of Fury!

Mottie,
    Thanks again for this ... it's very nice! I have it on my site now (Working properly) - I might change the ICONS sometime, but nice none-the-less.

    I got the font size to change - once I put the !Important after the .instance & .bossCount - I changed to .75em - it changed to around 2 lines (I modified the names on some - simply removing the "THE" in the name/title). I didn't increase the px width of my left column ... as it made my page look funky. Can look @ http://totalcarnage.guildportal.com .

    One question - just a 'fear' - the file for the "Pop-up" decription window - you don't plan on removing that any time correct? Same with your pictures on your photobucket site? I use currently your pictures for recruitment and raid progression. I plan on moving to my photobucket site, so yours doesn't get hit as much.



~Draylor
TopBottom

Mottie (MVP) 3/29/2009 11:02 AM EST : RE: EQ2 Raid Progression
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Draylor,

I don't plan on ever deleting or moving any of the images on my photobucket or the files from my GP account - I may modify them once in a while, but they will be there as long as my accounts stay activated.
TopBottom

Draylor (New Admin) 3/30/2009 8:39 PM EST : RE: EQ2 Raid Progression
Draylor
Posts: 424
Fingers of Fury!

Mottie,
    Just wanted to say thanks for all your hard work and efforts here ... you've helped me learn a few things along the way etc. Also, the fact you 'spread' it around to many different games

~Draylor
TopBottom

EQ2Ballzz (New Admin) 11/5/2009 7:00 PM EST : RE: EQ2 Raid Progression
EQ2Ballzz
Posts: 2477
Zomgawsh Poster

Not sure if this is the proper place to post this but I would like to add something along the lines of what you have here for our raid progression but I don't know CSS and all that gibberish of code makes me squeamish. Especially since the GP "progression" widget is vexing with it's simplicity. It just has "add progression item here" trees and a place for an image but it's not apparent to me where all that code would even go.

Are there any similar widgets that can just be added and are already set up for EQ2 raid progression? I tried to manually add things into that generic raid progression widget but there was no way to change the color of text and it just didn't work like I expected.
TopBottom

Mottie (MVP) 11/5/2009 7:49 PM EST : RE: EQ2 Raid Progression
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi EQ2Ballzz!

Well, I've had an idea about making the progression coding a little easier to use, but it's not something I will be able to complete quickly.
TopBottom

EQ2Ballzz (New Admin) 11/6/2009 4:34 AM EST : RE: EQ2 Raid Progression
EQ2Ballzz
Posts: 2477
Zomgawsh Poster

I'm not afraid to tinker with it if I could find some more detailed instruction. Is there a serious noob thread somewhere I could read that walks you through what is probably obvious steps to most people? I just don't think I'm clear where this code goes or what to do with it if I even found it. It mentions control box (free form HTML) or something..but what is that? Is that under Custom HTML and script > boxes? If so then what? Just check enable? I tried entering the code in the box and hitting preview but nothing happened. Sorry for the noobness but the GP interface is not very intuitive or helpful.
TopBottom

Mottie (MVP) 11/6/2009 9:08 AM EST : RE: EQ2 Raid Progression
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi EQ2Ballzz!

Ahhhh, ok... I'll take the blame on this because I've gotten lazy about posting instructions on how to customize the progression boxes (this started out as a WoW progression box). So every version I've just been saying see the previous version for instructions. Anyway, to answer your questions:

This code is meant to go into a Free Form Text/HTML type Widget ( Content Boxes are now called Widgets ). To add one go to:
Control Panel > Pages & Content > Pick the page you want to add this progression box (under Page Contents) > Select the "Add Widget" tab
Now enter:

Title: Name the widget anything you want, something like "Progression"
Type of Widget: Free Form Text/HTML
Location on Page: Pick where on the page to put it (it's easy to change this later)
You should now be on the Widget/Content tab

Find the widget you just added (look for the title)

Click the Edit link inside, and a new window should pop up with an editor

Switch the editor to <> HTML mode (at the bottom, above the save button)

Copy (Ctrl-C) the code from the post here.

Paste (Ctrl-V) the code into the editor.

Update the boss/dungeon progression status as needed

Save

Reload the page on your site to see the results!

Now when you need to update the progression status, you only need to click the Edit button under the Progression widget, switch to HTML mode and find the variables you need to update, save and you're done - you don't need to reload the entire code.
Please feel free to ask for more specific instructions if I left something out
TopBottom

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