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
Durete (New Admin) 11/6/2010 8:33 AM EST : Editing Navbar Button links

Durete
Posts: 80
Posts With Wolves

Hello,

I am trying to create a button on the navigation bar which opens another site but at 100% if the screen,

kind of trying to add this on the navbar next to "Home" "Calender' "Dkp" "forums" etc/
<a Href="http://www.my ip/external page.php">Click here to open an external page at 100% width/100%heigth so that the current page isn't really visible anymore</a>

Is this possible?

and if so: how am I able to do that?
TopBottom

Mottie (MVP) 11/6/2010 12:15 PM EST : Add an External Tab
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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

Durete (New Admin) 11/6/2010 3:41 PM EST : RE: Add an External Tab

Durete
Posts: 80
Posts With Wolves

alrighty cool! thanks,

now I got one little problem though!
I get to see the Link_4 button like 50 times!


<blockquote>
<script type="text/javascript">
$(document).ready(function(){
 var tabAfter  = "Home";
 var tabName   = "Link_";
 var tabURL    = "Link_1";
 var newWindow = false;
  
 // Don't change anything below
 var tar = $('.straightBarWrapperInnerTable').find('a:contains(' + tabAfter + ')').closest('td'),
  win = (newWindow) ? '_blank' : '_self';
  tar
   .clone(true) // include bound events
   .insertAfter(tar)
   .find('a')
    .attr({ href: tabURL, target: win }) // change link location/target
    .html(tabName);
  // change tab onclick function
  tar.next()[0].onclick = function(){ window.open(tabURL, win); };
});
</script>
<script type="text/javascript">
$(document).ready(function(){
 var tabAfter  = "Link_1";
 var tabName   = "Link_2";
 var tabURL    = "Link_2";
 var newWindow = false;
  
 // Don't change anything below
 var tar = $('.straightBarWrapperInnerTable').find('a:contains(' + tabAfter + ')').closest('td'),
  win = (newWindow) ? '_blank' : '_self';
  tar
   .clone(true) // include bound events
   .insertAfter(tar)
   .find('a')
    .attr({ href: tabURL, target: win }) // change link location/target
    .html(tabName);
  // change tab onclick function
  tar.next()[0].onclick = function(){ window.open(tabURL, win); };
});
</script>
<script type="text/javascript">
$(document).ready(function(){
 var tabAfter  = "Link_2";
 var tabName   = "Link_3";
 var tabURL    = "Link_3";
 var newWindow = false;
  
 // Don't change anything below
 var tar = $('.straightBarWrapperInnerTable').find('a:contains(' + tabAfter + ')').closest('td'),
  win = (newWindow) ? '_blank' : '_self';
  tar
   .clone(true) // include bound events
   .insertAfter(tar)
   .find('a')
    .attr({ href: tabURL, target: win }) // change link location/target
    .html(tabName);
  // change tab onclick function
  tar.next()[0].onclick = function(){ window.open(tabURL, win); };
});
</script>
<script type="text/javascript">
$(document).ready(function(){
 var tabAfter  = "Link_3";
 var tabName   = "Link_4";
 var tabURL    = "Link_4";
 var newWindow = false;
  
 // Don't change anything below
 var tar = $('.straightBarWrapperInnerTable').find('a:contains(' + tabAfter + ')').closest('td'),
  win = (newWindow) ? '_blank' : '_self';
  tar
   .clone(true) // include bound events
   .insertAfter(tar)
   .find('a')
    .attr({ href: tabURL, target: win }) // change link location/target
    .html(tabName);
  // change tab onclick function
  tar.next()[0].onclick = function(){ window.open(tabURL, win); };
});
</script>
</blockquote>
TopBottom

Mottie (MVP) 11/6/2010 7:29 PM EST : RE: Add an External Tab
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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

Durete (New Admin) 11/6/2010 8:58 PM EST : RE: Add an External Tab

Durete
Posts: 80
Posts With Wolves

Massively thanks!

at first it repeated itself but then around 500x link_4

I first renamed the origional link of it Old_Link_4
and the new one link_4 but that produced the loop for some reason,

when I renamed it

old_link_4 and the new one to new_link_4 it worked perfectly

thansk a load
TopBottom

Mottie (MVP) 11/7/2010 8:30 AM EST : RE: Add an External Tab
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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
TopBottom

Mottie (MVP) 11/22/2010 10:45 AM EST : RE: Add an External Tab
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Updated the script again to not make a bunch of copies when two tabs have the same name.
TopBottom

the_blackbat (New Admin) 3/27/2011 8:19 PM EST : RE: Add an External Tab
the_blackbat
Posts: 15
Becoming Adept!

Awesome! Thank you!
TopBottom

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