The Code
<script>Sys.Application.add_load(function(){ // target wow-progression element $('.wow-progression').wowProgression({ // ** Guild Info *** // battlenet domain = "us", "eu", "kr", "tw" or "sea"; // use "cn" for china region : "us", // locale = "en_US", "es_MX", "pt_BR", "en_GB", "es_ES", "fr_FR", // "ru_RU", "de_DE", "pt_PT", "it_IT", "ko_KR", "zh_TW" or "zh_CN" locale : "en_US", // game server name; include spaces and apostrophes server : "Lightning's Blade", // guild name; include spaces and apostrophes guild : "Our Guild's Name", // list raiders under "all" for all expansion; // or under a specific expansion raiders : { 'all' : [ 'raider1', 'raider2' ], 'mists' : [ 'raider3', 'raider4' ], 'cat' : [ 'raider3alt' ] }, // ** Appearance ** // expansion to show. The order can be changed // use "mists" and/or "cat" show : [ 'mists', 'cat' ], // show heroics? heroics : true, // 75% of raiders showing kill before boss counted as killed ratio : 0.75, // instance boss count: {n} = number kill count, // {t} = total, {p} = percentage count : '{n}/{t}', // '{p}', // tooltip - boss killed: use {s} for none/killed status text, // {n} for number of kills // this is an avg from all raiders status : "{s}", // use instance abbreviation - "Firelands" becomes "FL" useAbbr : false, // boss status text text : { zero : '', // zero boss kills - when using {n} in status none : '', // boss not killed text killed : 'Killed' // boss killed text } });});</script>
Customize the look using the provided CSS:
/******************** tooltip styling ********************/ .tips { width: 250px; } /* tooltip title */ .tips .inst { border-bottom: #555 1px solid; margin: 2px; } .tips .inst-title { font-size: 14px; font-weight: bold; } .tips .inst-count { float: right; } /* boss listing */ .tips .boss { font-size: 13px; position: relative; } /* wrapper */ .tips .boss-icon { width: 18px; height: 18px; margin: 0 5px 1px 0; vertical-align: middle; } .tips .boss-name {} .tips .boss-status { position: absolute; right: 5px; } .tips .boss-killed { color: red; text-decoration: line-through; } /* overall */ .wowprogression { width: 100%; margin: 0 auto; } .wowprogression h3.expansion { margin: 10px 5px; text-align: center; } .wowprogression .inst-name { font: 12px verdana, "trebuchet MS", helvetica, sans-serif; min-width: 50%; display: inline-block; } /******************** expansion blocks ********************/ /* expansion Title */ .wowprogression h3.expansion-mists {} .wowprogression h3.expansion-cat {} /* expansion instances wrapper */ .wowprogression div.instances-mists {} .wowprogression div.instances-cat {} /******************** instance blocks ********************/ /* instance listing */ .wowprogression .instance { width: 100%; border-spacing: 0; } .wowprogression .instance td.icon { /* wraps div.icon */ width: 36px; } .wowprogression .instance div.icon { max-width: 35px; width: 35px; height: 35px; margin: 15px 2px 2px 5px; background-image: url(http://us.battle.net/wow/static/images/character/summary/raid-icons.jpg); } /* specific instances */ /* mists */ .wowprogression .inst-HoF .icon { background-position: -1780px -5px; } .wowprogression .inst-MV .icon { background-position: -1719px -5px; } .wowprogression .inst-TES .icon { background-position: -1841px -5px; } /* cat */ .wowprogression .inst-DS .icon { background-position: -1658px -5px; } .wowprogression .inst-FL .icon { background-position: -1597px -5px; } .wowprogression .inst-ToFW .icon { background-position: -1536px -5px; } .wowprogression .inst-BoT .icon { background-position: -1414px -5px; } .wowprogression .inst-BD .icon { background-position: -1475px -5px; } .wowprogression .inst-BH .icon { background-position: -1353px -5px; } /******************** progress bars ********************/ .wowprogression .bar-bkgd { height: 15px; } .wowprogression .bar-color { height: 15px; text-align: right; } .wowprogression .bar-text { height: 15px; font: 10px verdana, "trebuchet MS", helvetica, sans-serif; padding-right: 5px; } .wowprogression .bar-normal, .bar-heroic { width: 98%; border: 1px solid #555; background: #222; /* bar background */ background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#444)); background: -moz-linear-gradient(center top, #222, #444) repeat scroll 0 0 transparent; } .wowprogression .bar-normal .bar-text { color: #fff; } .wowprogression .bar-normal .bar-color { background-color: #00f; /* normal: blue */ background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#006)); background: -moz-linear-gradient(center top, #00f, #006) repeat scroll 0 0 transparent; } .wowprogression .bar-heroic .bar-text { color: #fff; } .wowprogression .bar-heroic .bar-color { background-color: #c00; /* heroic: red */ background: -webkit-gradient(linear, left top, left bottom, from(#c00), to(#600)); background: -moz-linear-gradient(center top, #c00, #600) repeat scroll 0 0 transparent; } </style>
<
script
src
=
"http://guildportal.com/GuildFiles/258012/jquery-wowProgression-min.js"
></
>
>Sys.Application.add_load(function(){
// target wow-progression element
$('.wow-progression').wowProgression({
// ** Guild Info ***
// battlenet domain = "us", "eu", "kr", "tw" or "sea";
// use "cn" for china
region : "us",
// locale = "en_US", "es_MX", "pt_BR", "en_GB", "es_ES", "fr_FR",
// "ru_RU", "de_DE", "pt_PT", "it_IT", "ko_KR", "zh_TW" or "zh_CN"
locale : "en_US",
// game server name; include spaces and apostrophes
server : "Arathor",
// guild name; include spaces and apostrophes
guild : "The Underground",
// list raiders under "all" for all expansion;
// or under a specific expansion
raiders : {
'all' : [ '' ],
'mists' : [ 'Narob', 'Excrucio', 'Jenos', 'Kylol', 'Meatbun', 'Veremus', 'Xyrlol', 'Roswind', 'Morob' ],
'cat' : [ 'Openwounds', 'Doodinadress', 'Immensepain', 'Chloro', 'Torcia', 'Mortho', 'Fendar' ]
},
// ** Appearance **
// expansion to show. The order can be changed
// use "mists" and/or "cat"
show : [ 'mists', 'cat' ],
// show heroics?
heroics : true,
// 75% of raiders showing kill before boss counted as killed
ratio : 0.75,
// instance boss count: {n} = number kill count,
// {t} = total, {p} = percentage
count : '{n}/{t}', // '{p}',
// tooltip - boss killed: use {s} for none/killed status text,
// {n} for number of kills
// this is an avg from all raiders
status : "{s}",
// use instance abbreviation - "Firelands" becomes "FL"
useAbbr : false,
// boss status text
text : {
zero : '', // zero boss kills - when using {n} in status
none : '', // boss not killed text
killed : 'Killed' // boss killed text
}
});});</
><
style
/********************
tooltip styling
********************/
.tips { width: 250px; }
/* tooltip title */
.tips .inst { border-bottom: #555 1px solid; margin: 2px; }
.tips .inst-title { font-size: 14px; font-weight: bold; }
.tips .inst-count { float: right; }
/* boss listing */
.tips .boss { font-size: 13px; position: relative; } /* wrapper */
.tips .boss-icon { width: 18px; height: 18px; margin: 0 5px 1px 0; vertical-align: middle; }
.tips .boss-name {}
.tips .boss-status { position: absolute; right: 5px; }
.tips .boss-killed { color: red; text-decoration: line-through; }
/* overall */
.wowprogression { width: 100%; margin: 0 auto; }
.wowprogression h3.expansion { margin: 10px 5px; text-align: center; }
.wowprogression .inst-name { font: 12px verdana, "trebuchet MS", helvetica, sans-serif; min-width: 50%; display: inline-block; }
expansion blocks
/* expansion Title */
.wowprogression h3.expansion-mists {}
.wowprogression h3.expansion-cat {}
/* expansion instances wrapper */
.wowprogression div.instances-mists {}
.wowprogression div.instances-cat {}
instance blocks
/* instance listing */
.wowprogression .instance { width: 100%; border-spacing: 0; }
.wowprogression .instance td.icon { /* wraps div.icon */
width: 36px;
.wowprogression .instance div.icon {
max-width: 35px;
width: 35px;
height: 35px;
margin: 15px 2px 2px 5px;
background-image: url(http://us.battle.net/wow/static/images/character/summary/raid-icons.jpg);
/* specific instances */
/* mists */
.wowprogression .inst-HoF .icon { background-position: -1780px -5px; }
.wowprogression .inst-MV .icon { background-position: -1719px -5px; }
.wowprogression .inst-TES .icon { background-position: -1841px -5px; }
/* cat */
.wowprogression .inst-DS .icon { background-position: -1658px -5px; }
.wowprogression .inst-FL .icon { background-position: -1597px -5px; }
.wowprogression .inst-ToFW .icon { background-position: -1536px -5px; }
.wowprogression .inst-BoT .icon { background-position: -1414px -5px; }
.wowprogression .inst-BD .icon { background-position: -1475px -5px; }
.wowprogression .inst-BH .icon { background-position: -1353px -5px; }
progress bars
.wowprogression .bar-bkgd { height: 15px; }
.wowprogression .bar-color { height: 15px; text-align: right; }
.wowprogression .bar-text { height: 15px; font: 10px verdana, "trebuchet MS", helvetica, sans-serif; padding-right: 5px; }
.wowprogression .bar-normal, .bar-heroic {
width: 98%;
border: 1px solid #555;
background: #222;
background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#444));
background: -moz-linear-gradient(center top, #222, #444) repeat scroll 0 0 transparent;
.wowprogression .bar-normal .bar-text { color: #fff; }
.wowprogression .bar-normal .bar-color {
background-color: #00f;
background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#006));
background: -moz-linear-gradient(center top, #00f, #006) repeat scroll 0 0 transparent;
.wowprogression .bar-heroic .bar-text { color: #fff; }
.wowprogression .bar-heroic .bar-color {
background-color: #c00;
background: -webkit-gradient(linear, left top, left bottom, from(#c00), to(#600));
background: -moz-linear-gradient(center top, #c00, #600) repeat scroll 0 0 transparent;
</
http://us.battle.net/wow/en/character/Arathor/Fendar/ (armory)
http://us.battle.net/api/wow/character/Arathor/Fendar (api feed)
'mists' : [ 'Bezzerka', 'Missymayhem', 'Tsuannan', ],
<style type="text/css"> .tooltip, .preview, .screenshot { cursor:pointer; } #tooltip, #tooltip2, #preview, #screenshot { color:#dddddd; background:#222222; border: 1px solid #333333; padding:5px; display:none; opacity: 0.9; filter: alpha(opacity=90); text-align:left; border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; } </style> <script src="http://www.axiomfiles.com/Files/258012/tooltip.js" type="text/javascript"></script>