Add an External Tab

This script is for the "Nav Bar" type tab bar (Control Panel > Style Tools > Navigation Style).

Before

After

Code

Add this code to your Footer Area (Control Panel > Custom HTML & Script > Footer Area)

<script type="text/javascript">
$(document).ready(function(){
 var newTab = [];
 /* setup
  newTab.push([ 'Roster', 'Google', 'http://www.google.com', true ]);
  'Roster'     = tab to add the new one after
  'Google'     = new tab name
  'http://...' = new tab URL
  true         = set to true to open link in a new window, set to false to open it in the same window - NO QUOTES!
 */

 newTab.push([ 'Roster', 'Google', 'http://www.google.com', true ]);
 newTab.push([ 'Google', 'Bing', 'http://www.bing.com', true ]);
 newTab.push([ 'Bing', 'Yahoo', 'http://www.yahoo.com', true ]);
 newTab.push([ 'Yahoo', 'Help Site', '/Guild.aspx?GuildID=258012', true ]);
 
 // Don't change anything below
 var j, tar, win;
 for (j=0; j<newTab.length; j++){
  tar = $('.straightBarWrapperInnerTable').find('a:contains(' + newTab[j][0] + ')')
   .closest('td').eq(0).addClass('straightBarSpacer');
  win = (newTab[j][3]) ? '_blank' : '_self';
  // don't clone the active tab because it uses different classes
  $('.straightBarWrapperInnerTable td:not(.straightBarActiveTab)').eq(0)
   .clone(true) // include bound events
   .insertAfter(tar)
   .addClass('newStraightBarTab straightBarSpacer straightBarNormalTab')
   .removeClass('straightBarFirstTab')
   .removeAttr('onclick') // remove onclick attribute
   .find('a')
    .attr({ href: newTab[j][2], target: win }) // change link location/target
    .html(newTab[j][1]);
 }
 // fix tab click function
 $('.straightBarWrapperInnerTable').find('.newStraightBarTab').click(function(){
  var lnk = $(this).find('a')[0];
  window.open( lnk.href, lnk.target );
  return false;
 });
});
</script>

Customizing

• Add a tab as follows:
  
   newTab.push([ 'Roster', 'Google', 'http://www.google.com', true ]);
  
  
• The first word in blue ('Roster' above) is the tab to find, then add the new tab after. This tab name is case sensitive.
• The second word in purple is the new tab name. You can include spaces if you want.
• The url in orange is the target of the new tab.

• If you want to link to another GuildPortal site, use this link format (using only the GuildID): /Guild.aspx?GuildID=######
• This format allows you to stay logged into both accounts. If you use your domain name (mine would be http://mottie.guildportal.com) then you and your users may have to keep logging into the site.

• The last variable (in red) is either true or false (no quotes) - if set to true, will open the URL in a new tab/window. If false, it opens in the same window.
  
  
• Add a Join Guild tab dynamically! (from this post). At the end of the code from above add something similar to this:
  
  var newuser = $('.WfTopMenu').find('a[href*="NewUser"]');
  if (newuser.length) {
    // only add an Apply tab if the join guild link exists
    // Add this tab after whatever tab you want, "Yahoo" is just an example
    newTab.push([ 'Yahoo', 'Apply', newuser.attr('href'), false ]);
    // hide join and new user links & extra bullet in front
    newuser.hide().prev('.welcomeBullet').hide();
  }

Updated 11/6/2010: Updated script to allow you to add multiple tabs.
Updated 11/7/2010: Removed active tab class.
Updated 11/13/2011: Added "return false" at the end to prevent Firefox from opening two windows.
Updated 11/22/2010: Fixed problem with multiple duplicates if two tabs have the same name.
Updated 9/2/2012: Added dynamic guild application tab. Thanks Tinkrbelle for the idea!

Hi Durete!

I've updated the code above so you can add multiple tabs at once. The problem with the using the original code to add multiple tabs is as you have seen, it opens multiple pages and even more the more tabs you add.

Hi Durete!

I had to make one more minor change to the script (just copy and replace everything below the "don't change anything below" comment of the script. I checked out your page today and saw that all the new tabs looked active (they copied it from the active Home tab). So I removed that so it looks right

Awesome! Thank you!