WoW Recruit Bar

GuildPortal admin site link to the original post

Static Recruit Bar

This first recruit bar was part of the Guild bar v1.2. It was pulled out because someone requested to just have this portion.

<style type="text/css">
#recruitBar { width:300px; text-align:center; 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; }
.dim { opacity: .3; filter: alpha(opacity=30); }
</style>
<div id="recruitBar"></div>
<script type="text/javascript">
var classrq = 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 tooltipWidth = 250;
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"
]);

/* ********************************************
   Don't change anything below
   ******************************************** */
var sQ = '&quot;';
var rb = '<div><a href="' + linkToRecruitmentPost + '">' + recruitTitle + '</a></div>';
 for (var j=0; j<classrq.length; j++) {
  rb += '<a href="' + linkToRecruitmentPost;
  rb += '" class="tooltip" title="<span class=recruitToolTip>';
  rb += classrq[j][1].replace(/\"/g,sQ);
  rb += '</span><br>' + classrq[j][2].replace(/\"/g,sQ);
  rb += '" rel="' + tooltipWidth + '"><img src="';
  rb += classrq[j][0].replace(/\"/g,sQ) + '"';
   if (classrq[j][2].match(recruitKeyWord)) { rb += ' class=dim'; }
  rb += '></a>';
 }
 rb += '</a>';
 $('#recruitBar').html(rb);
</script>

Fisheye Recruit Bar

This second recruit bar uses a jQuery interface addon that gives you a fisheye menu like Mac's have. The problem is you probably couldn't use this in the side columns of your site since it's width varies so much.

<style type="text/css">
#reqBar { text-align: center; height: 50px; position: relative; }
.reqBarItem { text-align: center; color: #ffffff; font-weight: bold; text-decoration: none; width: 40px; position: absolute; display: block; bottom: 0px; }
.reqBarItem img { border: none; margin: 5px auto 0 auto; width: 100%; }
.reqBarItem span { display: none; positon: absolute; }
.reqBarContainer { background-color: transparent; height: 50px; width: 200px; position: absolute; left: 500px; }
.dim { opacity: .3; filter: alpha(opacity=30); }
</style>
<script type="text/javascript" src="http://www.axiomfiles.com/Files/243007/interface.js"></script>
<div id="reqBar"></div>
<script type="text/javascript">
var classrq = new Array();

var recruitKeyWord = "Closed";
var tooltipWidth = 200;
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"
]);

/* ********************************************
   Don't change anything below
   ******************************************** */
// Recruitment menu
var sQ = '&quot;';
var rb1 = '<div class=reqBarContainer>';
 for (var j=0; j<classrq.length; j++) {
  rb1 += '<a class="reqBarItem tooltip" href="' + linkToRecruitmentPost;
  rb1 += '" title="' + classrq[j][1].replace(/\"/g,sQ);
  rb1 += '<br>' + classrq[j][2].replace(/\"/g,sQ) + '" rel="';
  rb1 += tooltipWidth + '"><span>';
  rb1 += classrq[j][1] + '</span><img src="' + classrq[j][0] + '"';
   if (classrq[j][2].match(recruitKeyWord)) { rb1 += ' class=dim'; }
  rb1 += '></a>';
 }
 rb1 += '</div>';
 $('#reqBar').html(rb1);
 $(document).ready(function(){
  $('#reqBar').Fisheye({
   itemWidth: 20,
   maxWidth: 40,
   proximity: 40,
   items: 'a',
   itemsText: 'span',
   container: '.reqBarContainer',
   halign : 'center'
  })
 });
</script>

Customizing

Tooltips

If you aren't seeing the tooltips popup or you want to change the color of the tooltips, you'll need to add the following bit of code to your footer HTML (Control Panel > Custom HTML & Script > Footer Area). Modify the text in blue to match the colors of your site.

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

Static Bar

  CSS

• "#recruitBar" defines the recruitment box size and font size.
• "#recruitBar a, #recruitBar img" defines the text color of the title and the image size and border color.
• ".recruitToolTip" defines the style and color of the tooltip title only. This actually has been overridden because the class colors are now defined in the javascript variables ("<font color=#c41f3b>Death Knight</font>")

  Variables (in red)

• Box Title (recruitTitle):
  Default is set to "Recruitment", but you can leave it blank. See the CSS above on how to change it's style.
• Icon dimming (recruitKeyWord):
  The script looks for a keyword in your class needs to determine if the class image needs to be dimmed. Default is set to "Closed". The keyword is case sensitive.
• Icon arrangement (recruitImagesPerRow):
  At this time, there are ten classes. The bar is designed to allow you to set the number of icons per row, default is set to 10. See the second image above to see what it looks like set to 5.
• Width of the tooltip (tooltipWidth):
  The width of the tooltip that is displayed. Default is set to 200 pixels.
• Icon link (linkToRecruitmentPost):
  The URL to your recruitment requirements or application thread should be typed in here. Default is "http://recruitme.com".
• Class needs:
  Change your class needs as desired. If you already have a Guild Bar or even the Fisheye bar below, you only need one definition of the classrq per page. The script is set up as follows:
  
  classrq.push ([ "Thumbnail Image URL",
    "Class Name",
    "Class Needs"
  ])
  
  You only need to change the "Class Needs" portion. In the example for Druids, you will see the class needs text looks like this: "Feral<br>Resto". The <br> in the middle is HTML code for new line. You can basically type in anything you want here including HTML tags.

Fisheye Bar

  CSS

• There isn't really anything to change in the CSS... you can adjust the height and width but you won't see the difference.

  Variables (in red)

• Icon dimming (recruitKeyWord):
  The script looks for a keyword in your class needs to determine if the class image needs to be dimmed. Default is set to "Closed". The keyword is case sensitive.
• Icon link (linkToRecruitmentPost):
  The URL to your recruitment requirements or application thread should be typed in here. Default is "http://recruitme.com".
• Width of the tooltip (tooltipWidth):
  The width of the tooltip that is displayed. Default is set to 200 pixels.
• Class needs:
  Change your class needs as desired. If you already have a Guild Bar or even the Fisheye bar below, you only need one definition of the classrq per page. The script is set up as follows:
  
  classrq.push ([ "Thumbnail Image URL",
    "Class Name",
    "Class Needs"
  ])
  
  You only need to change the "Class Needs" portion. In the example for Druids, you will see the class needs text looks like this: "Feral<br>Resto". The <br> in the middle is HTML code for new line. You can basically type in anything you want here including HTML tags.


• Fisheye settings:
  
  • itemWidth - Sets starting the icon size - icon size when not being hovered over. Default = 20 pixels
  • maxWidth - Sets the max size of the icons that they grow to when being hovered over. Default = 40 pixels
  • proximity - Distance from the icon before it begins to grow. Default = 40 pixels
  • itemsText - You can get rid of this line if you don't want the text to appear above the image while hovering over it.

Edit (9/13/2009): Updated the tooltips to work newer tooltip script & I deleted the setting of images per row in the Static Recruit bar... I didn't think it was needed since it's now separate from the guildbar (it'll fit whatever container you put it into). You probably won't notice any difference from the old script.
Edit (1/4/2010): Added a note on how to add the new tooltip script/CSS.