Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : WoW > Progression Box & Guild Bar
1 2 3 4 5 6 7 8 9 10Next
Mottie (SuperAdmin) 12/6/2010 3:34 PM EST : Progression Box & Guild Bar
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Progression Box & Guild bar (v2.3 - Cataclysm)

GuildPortal admin site link to the original post

I made a separate post for this version of the progression box because it uses a slightly different script and method from before. I saved the actual scripting in my guild files and I'll have you save your progression variables in your guild files (preferred) or in a free form widget. The nice thing about this new method is you can use the same variables for both the progression box and the guild bar. Once again, I've included three sets of code: Progression box code for just the Cataclysm expansion, code for a progression Box (one page only) and Guild bar (on every page), Cataclysm plus WotLK and code for all expansions.

If your tooltips are messed up, you are probably missing the modified tooltip script.

Progression Box

Guild Bar



This is now a Mod
Control Panel > Site Mods > Get Site Mods >
Look for "WoW Progression - Cataclysm", or
"WoW Progression & GuildBar - Cataclysm"


Add this script to your site as follows:
1. Step 1, pick a base code.
  • This code will be added to different places depending on what you want on your site.
  • The guild bar code goes into the footer HTML (Control Panel > Custom HTML & Script > Footer HTML). This is the complete guild bar code.
  • The progression box code goes into a Free Form Text/HTML widget.
2. Step 2, pick the code depending on which expansion(s) you want to show.
  • This code is for the progression box only.
  • Add this code to the end of the base code above (in a Free Form Text/HTML widget) only if no guild bar was added.
3. Step 3, Copy (Ctrl-C) the recruitment and/or progression code then paste it into a non-rich text editor.
  • Save the file and name it something like "progression-wow.js"
  • Upload it to your GuildPortal guild files.
  • Copy the link and replace the base code (in orange) from step 1 - the URL to the variable file.
  • This is the file you will need to update to change your guild progression - it will need to be uploaded each time.
  • After re-uploading the file, make sure you reload your guild page using Shift-reload (the reload icon in the browser) to bypass the cached site information.
4. Customize the Guild bar and progression box as desired.
  • Modify the CSS (in step 1) to match your site colors. Or if you want to see the default css file, download and modify this file (upload it to your site, then change the url from step 1).
  • Modify the recruitment and progression code from step 3 as desired.
  • Add additional instances and bosses following the instructions at the end of this post.
Step 1: Pick a base Code (use code from one box below)

Progression Box Only

Progression Box & Guild Bar

Step 2: Decide on which expansions to show (use code from one box below)

Progression Box - Cataclysm Only

Progression Box - Cataclysm & WotLK only

Progression Box - All expansions


Step 3: Progression variables (use code from one box below - goes into a separate file)

Guild Bar Recruitment + progression for both - Cataclysm only

Progression Box - Cataclysm only

Progression Box - WotLK & Cataclysm

Progression - All Expansions

Customizing the Script

CSS
  • Guild Bar

    • ".guildBar" defines the guild bar position and size.
    • "#recruitBar" defines the recruit icon wrapper position, size and font style.
    • "#raidingBar" defines the progression icon wrapper position, size and font style.
    • ".recruitTooltip" defines the recruitment default header color - the recruit class names are changed in the variables
    • ".raidingTooltip" defines the progression default header color.

  • Progression Box

    • "#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. Use the iconWidth & iconHeight variables below to set the img (icon) size.
    • ".bossCount" defines the text color and alignment of the bosses killed count "(5/6)".

  • Progression Box Tooltip

    • ".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.
    • ".attemptedBoss" defines the style for an attempted boss.
Variables
Note that all of these variables must end with a comma, except the last one (or if only one option is set). If your script doesn't work, check the commas first. If the script works in all browsers but IE, then you have a comma after the last option (this breaks IE).
  • Guild Bar Recruitment options

    Default options shown below, change them as desired... you can remove options that aren't changed.
    $("#recruitBar").guildBarRecruit( classrq, {
     recruitTitle          : "Recruitment",
     recruitKeyWord        : "Closed",
     recruitIconsPerRow    : 10,
     recruitTooltipWidth   : 150,
     linkToRecruitmentPost : "javascript:void(0)"
    });
    • classrq (in red) - This is the variable defined in "progression-wow.js" file that contains all of the recruitment status info - this shouldn't be changed.
    • recruitTitle - This title can be changed to any title above the recruitment icons (including nothing "").
    • recruitKeyWord - This keyword is a word in the recruitment status that the script looks for and if found, it dims the icon. Add additional keywords by separating other words with a vertical bar "|" (type shift-\, the key above Enter). For example: "Closed|No".
    • recruitIconsPerRow - This is the number of icons to put in one row. If you set it to 5, then you'll end up with two rows of five icons.
    • recruitTooltipWidth - This is the width of the recruitment tooltip (in pixels).
    • linkToRecruitmentPost - With the default above, clicking on the icons will be ignored. Change it to point to your recruitment forum group.
  • Guild Bar Progression options

    Default options shown below, change them as desired... you can remove options that aren't changed.
    $("#raidingBar").guildBarProgress( wowCat, {
      raidingTitle         : "Progression",
      raidingKeyWord       : "No|closed|unknown",
      bossKilledKeyWord    : "Killed",
      bossAttemptedKeyWord : "Attempted|%",
      raidingIconsPerRow   : 10,
      tooltipBossWidth     : 275,
      tooltipKilledWidth   : 80,
      linkToRaidingSite    : "http://wow.guildprogress.com/"
    });
    • wowCat (in red) - This is the variable defined in the "progression-wow.js" file that contains the WoW Cataclysm data.
    • raidingTitle - This title can be changed to any title above the raiding icons (including nothing "").
    • raidingKeyWord - This keyword is a word in the instance status that the script looks for and if found, it dims the icon. Add additional keywords by separating other words with a vertical bar "|" (type shift-\, the key above Enter). For example: "No|Closed|unknown".
    • bossKilledKeyWord - This keyword is a word for the boss status that the script looks for and if found applies the "killedBoss" class name otherwise it added "toKillBoss" or "attemptedBoss" based on if it finds the bossAttemptedKeyWord below.
    • bossAttemptedKeyWord - This keyword is a word that the script looks for and if found it adds the "attemptedBoss" class to the boss name.
    • raidingIconsPerRow - This is the number of icons to put in one row. If you set it to 5, then you'll end up with five icons in the top row and the remaining in the second row.
    • tooltipBossWidth - This is the width of the boss name cell inside the tooltip (it's value is in number of pixels)
    • tooltipKilledWidth - This is the width of the boss status (killed, attempted, etc).
    • linkToRaidingSite - The default above will change the page to a WoW progress site when any of the icons are clicked. Change it to point to any progression site you desire.

  • Progression Box options
    The options are found in the code from step 1 (guild bar) or step 2 (progression box) above (in purple).

    Cataclysm only
    $(document).ready(function(){
     var
    progressionOptions = {
     
    // Add progression box options here
     };
      $('#progBox').progression(
    wowCat, progressionOptions)
    });
    Multiple expansions
    $(document).ready(function(){
     // Change "wowCat" to choose another default expansion
     pickWoWExp( wowCat );
    });
    var progressionOptions = {
     
    // Add progression box options here
    };

    Default options
    Shown below, change them as desired... you can remove options that aren't changed.
    var progressionOptions = {
     
    // Add progression box options here
     tooltipWidth         : 300,
     tooltipBossWidth     : 250,
     tooltipKilledWidth   : 80,
     iconHeight           : 30,
     iconWidth            : 30,
     raidingKeyWord       : "No|closed",
     bossKilledKeyWord    : "Killed",
     bossAttemptedKeyWord : "Attempted|%",
     ignore1stColumnCount : false,
     ignore2ndColumnCount : false,
     hide1stColumn        : false,
     hide2ndColumn        : false,
     showAllRows          : true
    };

    • wowCat (in red) - This is the variable defined in the "progression-wow.js" file that contains the WoW Cataclysm data.
    • tooltipWidth - This is the tooltip width in pixels.
    • tooltipBossWidth - This is the boss name table cell width, in pixels
    • tooltipKilledWidth - This is the boss status table cell width, in pixels.
    • iconHeight - Sets the height of the icon.
    • iconWidth - Sets the width of the icon.
    • raidingKeyWord - This keyword is a word in the instance status that the script looks for and if found, it dims the icon. Add additional keywords by separating other words with a vertical bar "|" (type shift-\, the key above Enter). For example: "No|Closed".
    • bossKilledKeyWord - This keyword is a word for the boss status that the script looks for and if found applies the "killedBoss" class name otherwise it added "toKillBoss" or "attemptedBoss" based on if it finds the bossAttemptedKeyWord below.
    • bossAttemptedKeyWord - This keyword is a word that the script looks for and if found it adds the "attemptedBoss" class to the boss name.
    • ignore1stColumnCount - Set this to false to use, or true to ignore the first column (10 man) count. The progress count is shown in the progress box (outside the tooltip)
    • ignore2ndColumnCount - Set this to false to use, or true to ignore the second column (25 man) count. The progress count will change to the 25 man count if the 10 man progress is 100% complete, unless this variable is true.
    • hide1stColumn - Set this to true to completely hide the first column (10 man boss status) if your guild doesn't track 10 man content.
    • hide2ndColumn - Set this to true to completely hide the second column (25 man boss status) if your guild doesn't track 25 man content.
    • showAllRows - Set this to false to hide instances with no progress (zero out of # bosses).
Progression status
  • Status Format:
    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 10 man Status", "Instance 25 man Status" ]
    ,["Instance Boss #1", "Boss #1 10 man Status", "Boss #1 25 man Status"]
    ,["Instance Boss #2", "Boss #2 10 man Status", "Boss #2 25 man Status"]
    , ...
    ,["Last Instance Boss", "Last Boss 10 man Status", "Last Boss 25 man Status"]
    ]);
  • Add Instance:
    To add a new instance, copy another instance from the same expansion (e.g. Onyxia because it only has one boss and the variable (in blue) matches the expansion "wowWotLK", Cataclysm would be "wowCat"). Then replace the Instance name & icon (in orange) and then replace and/or add boss names (in purple).
    // ONYXIA
    wowWotLK.push ([
     ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/onx.gif"]
    ,["Onyxia's Lair", "(10 man)", "(25 man)"]
    ,["Onyxia", "", ""]
    ]);
  • Add Boss:
    To add an additional boss, just add the following line (inside or at the bottom of the instance variable)
    ,["NEW BOSS", "", ""]
  • so the result would be something like this:
    // ONYXIA
    wowWotLK.push ([
     ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/onx.gif"]
    ,["Onyxia", "(10 man)", "(25 man)"]
    ,["Onyxia", "", ""]
    ,["NEW BOSS", "", ""]
    ]);
Edit (12/20/2010): Updated the css and the code in steps 1 and 2 - tooltips should no longer have dark text.
Edit (1/14/2011): Fixed some Cataclysm boss names - thanks takeover2007!
Edit (6/14/2011): Updated to include Fireland instance - thanks Deuteros_CHAOS!
Edit (10/25/2011): Now a mod (partially).
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Lakshmii (Applicant) 12/16/2010 4:14 AM EST : RE: Progression Box & Guild Bar
Lakshmii
Posts: 5066

0
Like

0
Dislike

This is great, thanks mottie!

my only problem is that for some reason, every time i click save in the free form box after copy/pasting all the relevant code, it tells me its saved but then when i go back into it, its only saved the first few lines of the script that i pasted there!

I am just using the progression box without the bar - and want to see what it looks like with all the "all expansions" option. if its too crowded then ill change to less info, but would like to see with all first

Posting here since there might be others with the same problem?


web address is http://soulcrusaders.guildportal.com
TopBottom

Mottie (SuperAdmin) 12/16/2010 8:55 AM EST : RE: Progression Box & Guild Bar
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Lakshmii!

Lakshmii said:
every time i click save in the free form box after copy/pasting all the relevant code, it tells me its saved but then when i go back into it, its only saved the first few lines of the script that i pasted there!


I believe this problem occurs because the editor sees two <script> tags in the code and tries to be smart so it removes the extra ones. Switch the editor into Raw mode (link in the upper right corner) and it won't strip out the code.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Gavendo (Applicant) 12/19/2010 8:39 PM EST : RE: Progression Box & Guild Bar
Gavendo
Posts: 2679

0
Like

0
Dislike

How do I change it so that the guild bar is a "lose" object and not specifically in the banner area?

Here's my guild web page, what I'm trying to do here is have only the horizontal progress box in the little free html area called "Progress".

For some reason my guild bar is transparent looking as well which is odd.. I'm guessing that's just because it's over the picture of Deathwing atm.

Thanks for any help!

Cheers,
Gav

EDIT: Another thing... the text in the tooltip is so gray that it's very difficult to read, not sure what causes that...
TopBottom

Mottie (SuperAdmin) 12/20/2010 9:45 AM EST : RE: Progression Box & Guild Bar
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Gavendo!

If you want to not move the progress bar into the header, just remove this line from the javascript:
.appendTo('#bannerCell')
The instance icon is semi-transparent when there is no progression in that instance because of the "dim" class. To remove it, just add the following css:
.dim { opacity: 1; filter: alpha(opacity=100); }
As for the tooltip text, I went in and modified the css and script so you don't need to change anything.




Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Gavendo (Applicant) 12/20/2010 7:21 PM EST : RE: Progression Box & Guild Bar
Gavendo
Posts: 2679

0
Like

0
Dislike

Jeez I can't seem to do this on my own, spent another few hours trying to get it right

With your advise there I've managed to move the bar to the right spot,  but it's taking up a lot more space than it should. To me it looks like there's some CSS variable somewhere causing it. There are no extra lines from <br>-html codes for example. How can I reduce this "invisble block" size so that the progress bar ends up just above the banner from guildox?

Seems like the tooltip color variables aren't getting through either since all of the text in the tooltip (apart from the title) is white.

Sorry, I just bring problems to this great site, haha!
TopBottom

Kilorglin (Applicant) 12/21/2010 6:50 AM EST : RE: Progression Box & Guild Bar

Kilorglin
Posts: 91

0
Like

0
Dislike

Hi Mottie

I have added your updated Progression box to my homepage --> Guild Homepage

But the names of the instances, which used to be the right color (i.e. black) until recently, now appear in grey although I have not touched the code at all (and the color is still set to black).

Here's the code (note that I have used one of your previous advice to change the color in the tooltip, which could not be changed by tweaking the parameters).

thanks for your great work and your kind help !

Kilorglin

<div style="text-align:center">
 <span id="progSelect">
  <img src="http://www.axiomfiles.com/Files/278466/icon-wow-exp3.png" title="Wrath of the Lich King" onclick="pickWoWExp(wowWotLK);">
  <img src="http://www.axiomfiles.com/Files/278466/icon-wow-exp4.png" title="Cataclysm" onclick="pickWoWExp(wowCat);">
 </span>
 <div id="progBox"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
 // Change "wowCat" to choose another default expansion
 pickWoWExp( wowCat );
});
var progressionOptions = {
 // Add progression box options here
 tooltipWidth         : 300,
 tooltipBossWidth     : 250,
 tooltipKilledWidth   : 80,
 iconHeight           : 30,
 iconWidth            : 30,
 raidingKeyWord       : "No|closed",
 bossKilledKeyWord    : "Killed",
 bossAttemptedKeyWord : "Attempted|%",
 ignore1stColumnCount : false,
 ignore2ndColumnCount : false,
 hide1stColumn        : false,
 hide2ndColumn        : true,
 showAllRows          : true
};
function pickWoWExp(ex){
 $('#progBox').progression(ex, progressionOptions);
};
</script>
 
<!-- This code goes in the Free Form Text/HTML widget -->
<link href="http://www.axiomfiles.com/Files/258012/progression-styles.css" type="text/css" rel="stylesheet" />
<script src="http://www.axiomfiles.com/Files/258012/progression-scripts-min.js" type="text/javascript"></script>
<script src="http://www.axiomfiles.com/Files/361756/progression-wow.js" type="text/javascript"></script>
 
<style type="text/css">
/* Progression box */
#progBox { font-size: 90%; color: #ffffff; text-align:center; padding:4px; }
#progBox tr, #progSelect { cursor:pointer; }
 
/* Instance name text */
.instance { color: #000000; font-size: 10pt; }
 
/* 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: #000000; 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; }
.attemptedBoss { color: #00ff00; }
#tooltip table, #tooltip2 table { color: #ddd; }
 
.hide { display: none; }
.show { display: inline; }
</style>
<div style="text-align:center">
  <div id="progBox"></div>
</div>
TopBottom

Mottie (SuperAdmin) 12/21/2010 7:49 AM EST : RE: Progression Box & Guild Bar
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Kilorglin!

I apologize, I made a change to the base css file yesterday without telling anyone =(

Basically all you need to do is add a "td" in front of a couple of your css definitions:
td.instance, td.bossCount { color: #000; }
I made this change because of the tooltip text color issue that other people have been having. You can see all the CSS tweaks in the original post, but as I said above, it's just a few extra "td"'s in the css.

Also, you can remove the css I gave you before to change the color of the tooltip, since it also changed the header color =/

Sorry for the inconvenience!
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Kilorglin (Applicant) 12/21/2010 1:15 PM EST : RE: Progression Box & Guild Bar

Kilorglin
Posts: 91

0
Like

0
Dislike

Thanks, worked great!
I won't be changing the code you gave me before, though: to afraid to mess everything up!
bye
TopBottom

Bob_Laublaw (Member) 12/30/2010 11:56 AM EST : RE: Progression Box & Guild Bar
Bob_Laublaw
Posts: 1256

0
Like

0
Dislike

I can't thank you enough for your continued support of this script. Even though I've moved my guild off guildportal and onto my own site I still use this since it's the best I've found.

I am having one problem though and I'm hoping you have an idea of how to do it. With Blizzards change to 10 and 25 man raids being "equal" (lol) the major progress ranking sites are ranking all guilds based on any kill they have done. So if a guild is 2/12 on twentyfive man and 7/12 on ten man they are still ranked as 7/12.

What I'd like to do is have my count displays show things we've killed regardless of ten or twentyfive format. For example, we've killed Halfus in ten man only, have Omnitron Defense System in both 10 and 25, and have Magmaw in 25 only. But I'm only getting 1/4 for Bastion of Twilight and 1/6 for Blackwing Descent. 

I've tried setting the ignore1stColomnCount and ignore2ndColomnCount settings to false, but it still seems to only be counting ten man kills and not any kill regardless of the raid size.

Hope I'm making sense. You can view the site I'm talking about via the link in my signature.

Raid Leader for <High Lords of the Horde> on Hyjal (US)
Zymurg
TopBottom

1 2 3 4 5 6 7 8 9 10Next
 
 
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%