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! > Recruiting box, item link, Raiding box
Zombihunter (Guild Admin) 2/10/2009 10:52 AM EST : RE: Guild Bar v1.2 (WotLK)

Zombihunter
Posts: 4
Getting Started!

Mottie said:
Hi Zombihunter!

You can just add the <font> tag inside the boss status... like this:
,["Malygos", "Killed", "<font color=#00ff00>Attempted</font>"]
Just change the font color to what ever you want. The "Killed" is automatically switched to red via the CSS.


Thanks, but I knew I could do it that way.  I was wanting a list of words like:
CSS
.killedText { color: #ff0000; }
.attemptedText {color: #00ff00}
.nothingText {color:#4c4c4c
; opacity: .6; filter: alpha(opacity=60);}

JavaScript
var bossKilledKeyWord = "Killed";
var bossAttemptedKeyWord = "Attempted";
var bossNothingKeyWord = "Nothing";
var raidingKeyWord = "Nothing";
There is no expression for the "Attempted" and "Nothing" in the javascript. This is what I am wanting. I'm still fairly green with Javascript so I can't figure out how to code the rest of the script to work properly.  Would be able to add more code similar to this part to include "if then" statement for "Attempted" or "Nothing" similar to this?

if (progress[inst][boss][1].match(bossKilledKeyWord)) {
    pb += "<tr><td class=killedBoss>" + progress[inst][boss][0] + "</td><td class=killedText>";
   } else {
    pb += "<tr><td class=toKillBoss>" + progress[inst][boss][0] + "</td><td>";
   }
if (progress[inst][boss][1].match(bossAttemptedKeyWord)) {
    pb += "<tr><td class=killedBoss>" + progress[inst][boss][0] + "</td><td class=attemptedText>";
   } else {
    pb += "<tr><td class=toKillBoss>" + progress[inst][boss][0] + "</td><td>";
   }
if (progress[inst][boss][1].match(bossNothingKeyWord)) {
    pb += "<tr><td class=killedBoss>" + progress[inst][boss][0] + "</td><td class=nothingText>";
   } else {
    pb += "<tr><td class=toKillBoss>" + progress[inst][boss][0] + "</td><td>";
   }

TopBottom

Mottie (MVP) 2/11/2009 2:27 AM EST : RE: Guild Bar v1.2 (WotLK)
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Zombihunter!

Here is the code that should work for you. I've included a "%" in the attempted keyword, so it'll match a percentage as well as the "Attempted" keyword.

HTML Code

<!-- HTML Combined Box (with image)
************************************ -->
<div id="banner" align="center">
<table class="guildBar" border=0>
<tr>
 <td id="recruitBar"></td>
 <td id="wowImage"><img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/WotLK.png"></td>
 <td id="raidingBar"></td>
</tr>
</table>
</div>
CSS
<!-- Stylesheet
************************************ -->
<style type="text/css">
.guildBar { width:700px; margin-right:auto; margin-left:auto; margin-top:110px;}
#banner { background: url(YOUR BANNER IMAGE URL) top center no-repeat; height:150px; border: transparent 1px solid; }
.dim { opacity: .3; filter: alpha(opacity=30); }

#recruitBar { width:300px; text-align:right; vertical-align:bottom; font-family:sans-serif; font-size:70%; white-space:nowrap; }
#recruitBar a, #recruitBar img { color:#999999; text-decoration:none; border:0px; width:20px; height:20px; padding:0px 1px 0px 0px; }
.recruitToolTip { color: orange; font-weight: bold; vertical-align:top; }

#raidingBar { width:300px; text-align:left; vertical-align:bottom; color:#999999; font-family:sans-serif; font-size:70%; white-space:nowrap; }
#raidingBar a, #raidingBar img { color:#999999; text-decoration:none; border:0px; width:20px; height:20px; padding:0px 1px 0px 0px; }
.raidingToolTip { color: #0080ff; font-weight:bold; vertical-align:top; }

.killedBoss { color: #888888; text-decoration:line-through; }
.toKillBoss { color: #dddddd; text-decoration:none; }

.killedText { color: #ff0000; }
.attemptedText { color: #00ff00 }
.nothingText { color:#4c4c4c; opacity: .6; filter: alpha(opacity=60); }

#dhtmltooltip { position: absolute; width: 150px; border: #888888 1px solid; padding: 3px; background: #222222; color: #dddddd; visibility: hidden; z-index: 100; }
</style>
Javascript
<script type="text/javascript">
var classrq = new Array();
var progress = new Array();

/* Recruitment Bar - Class Needs
 ********************************************
- Each class variable is set up as follows:
   class.push ([ "Thumbnail Image URL",
    "Class Name",
    "Class Needs"
   ])
- recruitKeyWord defines the word to match in the "Class Needs" to
  set icon dimmer, the text is case sensitive.
 ******************************************** */
var recruitTitle = "Recruitment";
var recruitKeyWord = "Closed";
var recruitImagesPerRow = 10;
var linkToRecruitmentPost = "http://recruitme.com";

classrq.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/dk.png",
 "<font color=#c41f3b>Death Knight</font>",
 "Only Gnomes need apply!"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/druid.gif",
 "<font color=#ff7d0a>Druid</font>",
 "Feral<br>Resto"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/hunter.gif",
 "<font color=#abd473>Hunter</font>",
 "BM with an annoyingly large Dinosaur"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/mage.gif",
 "<font color=#69ccf0>Mage</font>",
 "Frost/Arcane"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/paladin.gif",
 "<font color=#f58cba>Paladin</font>",
 "Prot<br>Holy"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/priest.gif",
 "<font color=#ffffff>Priest</font>",
 "Shadow<br>Holy"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/rogue.gif",
 "<font color=#fff569>Rogue</font>",
 "Closed"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/shaman.gif",
 "<font color=#2459ff>Shaman</font>",
 "Resto"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/warlock.gif",
 "<font color=#9482c9>Warlock</font>",
 "Affliction"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/warrior.gif",
 "<font color=#c79c6e>Warrior</font>",
 "Closed"
]);

/* Progress Bar - Instance and Boss status
********************************************
- Each progression variable is set up as follows:
   progress.push ([
    ["Thumbnail Image URL"],
    ["Instance Name", "Instance Status - 10 man", "Instance Status - 25 man"],
    ["Instance Boss #1", "Boss #1 Status - 10 man", "Boss #1 Status - 25 man"],
    ["Instance Boss #2", "Boss #2 Status - 10 man", "Boss #2 Status - 10 man"],
    ...
    ["Last Instance Boss", "Last Boss Status - 10 man", "Last Boss Status - 10 man"]
   ]);
- The "raidingKeyWord" defines the word to match in the "Instance Status"
  to set icon dimmer, the text is case sensitive. Default is set to "No"...
  so, the words "No", "Not", "None" and "Noogies" will all cause the
  instance icon to dim. Also, leaving the "Instance Status" and the first
  boss status ("Boss #1 Status") blank will dim the icon.
- The "bossKilledKeyWord" defines the word to match to then apply the
  "killedBoss" and "killedText" CSS classes to the text.
******************************************** */
var raidingTitle = "Progression";
var raidingKeyWord = "No|closed|unknown";
var bossKilledKeyWord = "Killed";
var bossAttemptedKeyWord = "Attempted|%";
var bossNothingKeyWord = "Nothing";
var raidingImagesPerRow = 7;
var tooltipBossWidth = 300;
var tooltipKilledWidth = 80;
var linkToRaidingSite = "http://www.wowjutsu.com/us/";

/* ********************************************
   Wrath of the Lich King
   ******************************************** */
// NAXXRAMAS II
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2-10.gif"]
,["Naxxramas II", "(10 man)<br>In Progress", "(25 man)"]
,["AW: Patchwerk", "Killed", "Attempted"]
,["AW: Grobbulus", "Killed", ""]
,["AW: Gluth", "Killed", ""]
,["AW: Thaddius", "", ""]
,["PW: Noth the Plaguebringer", "Attempted", "40%"]
,["PW: Heigan the Unclean", "Nothing", ""]
,["PW: Loatheb", "", ""]
,["SW: Anub'Rekhan", "Killed", "Killed"]
,["SW: Grand Widow Faerlina", "Killed", ""]
,["SW: Maexxna", "", ""]
,["DW: Instructor Razuvious", "Killed", "Ouchy"]
,["DW: Gothik the Harvester", "Attempted", ""]
,["DW: The Four Horsemen", "Nothing", ""]
,["FL: Sapphiron", "", ""]
,["KC: Kel'Thuzad", "", ""]
]);

// VAULT OF ARCHAVON
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/VoA-10.gif"]
,["Vault of Archavon", "(10 man)", "(25 man)"]
,["Archavon the Stone Watcher", "Killed", "20%"]
]);

// CHAMBER OF ASPECTS
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/CoA-10.gif"]
,["Chamber of Aspects", "(10 man)", "(25 man)"]
,["Sartharion the Onyx Guardian", "Killed", "Killed (no dragons up)"]
]);

// THE EYE OF ETERNITY
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EoE-10.gif"]
,["The Eye of Eternity", "(10 man)", "(25 man)"]
,["Malygos", "Attempted", "Nothing"]
]);

// ULDUAR RAID (10 man)
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Unk-10.gif"]
,["Ulduar Raid", "(10 man)<br>-closed-", "(25 man)<br>-closed-"]
,["-unknown-", "", ""]
]);

// AZJOL-NERUB RAID (10 man)
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Unk-10.gif"]
,["Azjol-Nerub Raid", "(10 man)<br>-closed-", "(25 man)<br>-closed-"]
,["-unknown-", "", ""]
]);

// ICECROWN CITADEL
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Unk-10.gif"]
,["Icecrown Citadel", "(10 man)<br>-closed-", "(25 man)<br>-closed-"]
,["-unknown-", "", ""]
,["The Lich King", "", ""]
]);

/* ********************************************
   Don't change anything below
   ******************************************** */
// Recruitment bar
var sQ = "&#92;&#39;";
var rb = "<div><a href=\"" + linkToRecruitmentPost + "\">" + recruitTitle + "</a></div>";
 for (var j=0; j<classrq.length; j++) {
  rb += "<a href=\"" + linkToRecruitmentPost;
  rb += "\" =\"ddrivetip('<span class=recruitToolTip>";
  rb += classrq[j][1].replace(/\'/g,sQ);
  rb += "</span><br>" + classrq[j][2].replace(/\'/g,sQ);
  rb += "', '', '300');\" =\"hideddrivetip()\"><img src=\"";
  rb += classrq[j][0].replace(/\'/g,sQ) + "\"";
   if (classrq[j][2].match(recruitKeyWord)) { rb += " class=dim"; }
  rb += "></a>";
 if ( (j+1)%recruitImagesPerRow == 0 ) { rb += "<br>"; }
 }
 rb += '</a>';

// Progression Bar
var pb = "<div><a href=\"" + linkToRaidingSite + "\">" + raidingTitle + "</a></div>";
 for (var inst=0; inst < progress.length; inst++) {
  pb += "<a href=\"" + linkToRaidingSite + "\"  =\"hideddrivetip()\"";
  pb += " =\"ddrivetip('<table><tr><td class=raidingToolTip width=" + tooltipBossWidth + "px>" + progress[inst][1][0].replace(/\'/g,sQ);
  pb += "</td><td align=center valign=top nowrap width=" + tooltipKilledWidth + "px>" + progress[inst][1][1].replace(/\'/g,sQ);
  pb += "</td><td align=center valign=top nowrap width=" + tooltipKilledWidth + "px>" + progress[inst][1][2].replace(/\'/g,sQ) + "</td></tr>";
  for (var boss=2; boss<(progress[inst].length); boss++) {
   pb += "<tr><td";
   pb += (progress[inst][boss][1].match(bossKilledKeyWord) && progress[inst][boss][2].match(bossKilledKeyWord)) ? " class=killedBoss>" : ">";
   pb += progress[inst][boss][0].replace(/\'/g,sQ) + "</td><td align=center";
   pb += bosstype(progress[inst][boss][1]);
   pb += progress[inst][boss][1] + "</td><td align=center";
   pb += bosstype(progress[inst][boss][2]);
   pb += progress[inst][boss][2] +"</td></tr>";
  }
  pb += "</table>', '', '" + (tooltipBossWidth + tooltipKilledWidth) + "');\"><img src=\"" + progress[inst][0] + "\"";
  if (progress[inst][1][1].match(raidingKeyWord) || (progress[inst][1][1] == "" && progress[inst][2][1] == "")) pb += " class=dim";
  pb += "></a>";
  if ( (inst+1)%raidingImagesPerRow == 0 ) { pb += "<br>"; }
 }
 pb += "</a>";
 document.getElementById('recruitBar').innerHTML = rb;
 document.getElementById('raidingBar').innerHTML = pb;

function bosstype(x){
 if (x.match(bossKilledKeyWord)) return ' class=killedText>';
 if (x.match(bossAttemptedKeyWord)) return ' class=attemptedText>';
 if (x.match(bossNothingKeyWord)) return ' class=nothingText>';
 return '>';
}
</script>
TopBottom

deshund (New Admin) 3/2/2009 8:56 AM EST : RE: Guild Bar v1.2 (WotLK)
deshund
Posts: 105
Posts With Wolves

hi, im trying to make my recruiting box more interactive. i want people to be able to mouse over a class and see whats needed, like shadow priest or holy priest.

http://enemy2horde.guildportal.com
 
And i was also wondering if a person could click the icon and it will redirect them to a application ( not sure if thats alot for me to do, since im so newb at this).

i love the way the guild banner recruit/progress is set up but i havent figured out how to make it go with my banner image not the wow one. so any suggestions are loved, oh btw i been reading all the posts and i find them usefull even tho alot of it still baffles me
TopBottom

Mottie (MVP) 3/2/2009 9:24 AM EST : RE: Guild Bar v1.2 (WotLK)
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Deshund!

I guess I forgot to add a link here, but I made a post that pulls out the recruit bar from this guild bar here. I hope that is what you are looking for.
TopBottom

Chezire (New Admin) 3/2/2009 1:20 PM EST : RE: Guild Bar v1.2 (WotLK)
Chezire
Posts: 6
Getting Started!

Figured it out
TopBottom

Zombihunter (Guild Admin) 3/2/2009 1:31 PM EST : RE: Guild Bar v1.2 (WotLK)

Zombihunter
Posts: 4
Getting Started!

Mottie said:
Hi Zombihunter!

Here is the code that should work for you. I've included a "%" in the attempted keyword, so it'll match a percentage as well as the "Attempted" keyword.


I have tried this, but I can't get the mouse overs to work on a guild portal site.  I try it on another type of site and no issues with the mouse overs but the Keywords don't change colours.

I am trying to make it so it's progression only, and plan to add the PreBC and TBC raids to it as well. 

The javascript file can be found here.

TopBottom

Mottie (MVP) 3/2/2009 1:49 PM EST : RE: Guild Bar v1.2 (WotLK)
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hey Zombihunter!

Thanks for the link to the site, it makes troubleshooting so much easier (btw the link to your test.js doesn't work because of the extra spaces at the end of the link).

Anyway, all you are missing on that site is the script for the tooltip - check out this post on how to add it back. When I added it back for testing, the colors looked like they were working properly.

So you know, the reason this guild bar was split into HTML, CSS and javascript was because the header HTML can't handle that much code. If you're just going to display the bar on one page, you can add ALL the code into that same free form text/HTML box. Make sure the CSS has <style> at the top and </style> at the bottom and the javascript has <script> at the top and </script> at the bottom.



TopBottom

Apollya_AD (New Admin) 3/5/2009 7:24 AM EST : RE: Guild Bar v1.2 (WotLK)
Apollya_AD
Posts: 1002
Zomgawsh Poster

Sorry about this i seriously suck at html  / java / css hence why i use guildportal in the firstplace

I've had an attempt at posting the script but seem to have only managed getting the Wotlk Picture to show up.

I tried reading some more of the other posts but it doesn't make all that much sense to me.

Sorr again thanks in advance for any help.

Site is:

combustion.guildportal.com

Had to remove all the code as was unable to post anything on site after entering it. here's where the link is stored with the separate JS file. and for the scrit I simply copy and pasted it and added it all in above the current wowhead tooltips script.

http://h1.ripway.com/Apollya/guildbar.js"></script

TopBottom

Mottie (MVP) 3/5/2009 8:39 AM EST : RE: Guild Bar v1.2 (WotLK)
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Apollya!

It looks like the only thing that is messed up is your guildbar.js file.... just edit the file and remove the <script type="text/javascript"> from the top and </script> from the bottom and it'll work perfectly.

TopBottom

Apollya_AD (New Admin) 3/5/2009 1:30 PM EST : RE: Guild Bar v1.2 (WotLK)
Apollya_AD
Posts: 1002
Zomgawsh Poster

Mottie said:
Hi Apollya!

It looks like the only thing that is messed up is your guildbar.js file.... just edit the file and remove the <script type="text/javascript"> from the top and </script> from the bottom and it'll work perfectly.


*woot* after some playing about and editing the values I got the icons showing now, but can't seem to get the Hover-over function to display.

Also with the images is it worth me uploading them all to my own personal Photobucket / imageshack to store them?

Oh and here's the Banner code: (I added it to a text file in ripway incase i was doing something wrong, I think you have to click save as to take a look :P)

http://h1.ripway.com/Apollya/BannerScript.js

and the guildbar.js code:

http://h1.ripway.com/Apollya/guildbar.js

I read your post on being able to post the code but couldn't quite get the meaning of it, so instead had to add it as the text file. Also the block of script at the top is to enable our wowhead tooltips to work on the site, could that be causing a conflict?

thanks again.
TopBottom

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