Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Tabs > Add an External Tab
Mottie (SuperAdmin) 11/6/2010 12:13 PM EST : Add an External Tab
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Add an External Tab

GuildPortal admin site link to original post

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!
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Durete (Applicant) 11/22/2010 9:57 AM EST : RE: Add an External Tab

Durete
Posts: 80

0
Like

0
Dislike

Hello Mottie,
this script is cool but it has a flaw I think,
at least on our site the 1 to last Tab gets in a loop for like 50 times!



<
script type="text/javascript">
$(document).ready(function(){
 var newTab = [];
 /* setup
  newTab.push([ 'Home', 'Forum', 'http://www.google.com', true ]);
  'Home'     = tab to add the new one after
  'Forum'     = new tab name
  'http://...' = new tab URL
  false         = set to true to open link in a new window, set to false to open it in the same window - NO QUOTES!
 */
 
 newTab.push([ 'Home', 'Forum', 'http://Link1', false ]);
 newTab.push([ 'Forum', 'Application', 'http://Link2', false ]);
 newTab.push([ 'Application', 'DKP', 'http://Link3', false ]);
  newTab.push([ 'DKP', 'Memberlist', 'http://Link4', false ]);
 newTab.push([ 'Memberlist', 'Rankings', 'http://Link5', false ]);
 
  
 // Don't change anything below
  for (var j=0; j<newTab.length; j++){
  var tar = $('.straightBarWrapperInnerTable').find('a:contains(' + newTab[j][0] + ')').closest('td'),
  win = (newTab[j][3]) ? '_blank' : '_self';
  tar
   .clone(true) // include bound events
   .insertAfter(tar)
   .addClass('newStraightBarTab')
   .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 );
 });
});
</script>
TopBottom

Mottie (SuperAdmin) 11/22/2010 10:47 AM EST : RE: Add an External Tab
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Durete!

Ok, I've updated the code again so it won't make multiple copies when you have two tabs with the same name - sorry I missed that before!
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Durete (Applicant) 11/22/2010 12:15 PM EST : RE: Add an External Tab

Durete
Posts: 80

0
Like

0
Dislike

Many thanks!

but where did I have multiple bars of the same name
I had intentionally all the names different :S

TopBottom

Mottie (SuperAdmin) 11/22/2010 4:54 PM EST : RE: Add an External Tab
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Durete!

This bit of code:
newTab.push([ 'Memberlist', 'Rankings', 'http://Link5', false ]);
It adds a new tab named Rankings after Memberlist... you already had a "Rankings" page on your site.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Dethmaul (Member) 11/12/2011 11:40 PM EST : RE: Add an External Tab
Dethmaul
Posts: 987

0
Like

0
Dislike

Mottie,

I added this to the site tu.guildportal.com and tuswtor.guildportal.com because TU is now going to have 2 sites, one for WoW and one for SWTOR, and I wanted a quick way to get to either site.

It works well, except that whe nyou click on the tab button, it opens the new site twice, and it logs you out of GP.

I tested it in IE and Firefox. FF is the one ahaving the issue. It opens the site in 2 tabs. IE seems to work correctly.
TopBottom

Mottie (SuperAdmin) 11/13/2011 7:01 AM EST : RE: Add an External Tab
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Dethmaul!

Ok, I think I got the problem fixed. Just add a "return false;" just below the "window.open" near the bottom of the code and you should be set. I've updated the code in the original post if you need a reference.

The problem with not being logged in is because of the URL being used. When you switch domains, you need to be logged into both of them, so the easiest solution would be to use the url with the guild id - so the SWtoR address would be "/Guild.aspx?GuildID=434000" and the WoW site address would be "/Guild.aspx?GuildID=19665". You can include the tab id if you want to go to a specific tab as well.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Termaul (Applicant) 2/8/2012 2:59 AM EST : RE: Add an External Tab
Termaul
Posts: 454

0
Like

0
Dislike

Hi, I'm new to guildportal, just started getting my page put together http://mortalityduskwood.guildportal.com . I have been trying to add this code to link to my loot system website http://www.epgpweb.com/, but I am just not able to get it work. I am adding it to the footer area/have it enabled/saved etc. Any help greatly appreciated.

TopBottom

Mottie (SuperAdmin) 2/8/2012 7:54 AM EST : RE: Add an External Tab
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Termaul!

For now, this script only works with the "Nav Bar" type tab bar (Control Panel > Style Tools > Navigation Style), you are using the "Standard Tabs". Sorry for the trouble.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Termaul (Applicant) 2/8/2012 1:10 PM EST : RE: Add an External Tab
Termaul
Posts: 454

0
Like

0
Dislike

Got it to work, thanks. The site wide nav type was actually set on Nav Bar but I was using static images instead of dynamic.
TopBottom

 
 
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%