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
Mottie (MVP) 11/22/2010 11:44 AM EST : Two Row Nav Bar
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Two Row Nav Bar

This script only works on the "Nav Bar" type navigation and it will only make the tab bar into two rows. I don't really think this is the best solution because of the design of it, but I wrote it as requested.

Before


After

CSS
Add this CSS to your custom CSS (Control Panel > Custom HTML & Scripts > Custom CSS > CSS Additions to Standard),
/*CSS for two row tab bar */
/* Two Row CSS - required */

.straightBarWrapper, .straightBarMouseOverTab,
.straightBarActiveTab, .straightBarNormalTab { background-repeat: repeat; }

/* CSS to stretch the tabs - optional */
.straightBarWrapperInnerTable { margin: 0 auto; width: 100%; }
/* min-width set to 100%/# of tabs in the top row (100%/8 = 12.5%) - optional */
.straightBarNormalTab, .straightBarActiveTab, .straightBarMouseOverTab { min-width: 12.5%; }
Script
Add this script to your custom scripting (Control Panel > Custom HTML & Script > Custom Javascript/JQueru > Document Ready Event tab)
/*** This script will make your Nav Bar into two rows ***/
// This script will only make two rows

 var maxTabs = 8; // in top row
 
 // Don't change anything below
 var navbar = $('table.straightBarWrapperInnerTable');
 if (navbar.find('td').length > maxTabs) {
  navbar.find('td:gt(' + (maxTabs-1) + ')')
   .wrapAll('<tr />').parent().appendTo( navbar );
  // set to 80px (twice the background image height)
  navbar.parent().andSelf().height(80);
 }
Customizing
  • CSS
    • Only the first part of the CSS is required to add the nav bar background image to both rows.
    • The rest of the css is optional. The second line of CSS makes the nav bar stretch all the way across the page.
    • The last line of CSS makes each tab equal in size. Notice the comment with the math (ewwww)... so if you have 8 tabs in the top row, take 100% divided by 8 which equals 12.5% (in red).
  • Script
    • There is only one setting for the script... maxTabs, the maximum number of tabs in the top row (in red).
    • Because the Nav bar is a table, the second row tabs have to line up with the tabs above, so the second row will be aligned to the left and the tabs will be the same size as the ones above.
TopBottom

Corganno (Guild Admin) 8/20/2011 10:34 AM EST : RE: Two Row Nav Bar
Corganno
Posts: 584
Zomgawsh Poster

Hi Mottie, 
Is there a way to do something like this, but with
 Standard Tabs? 




TopBottom

Mottie (MVP) 8/21/2011 8:47 AM EST : RE: Two Row Nav Bar
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Corganno!

Sure! Just add this code to the custom script tab (Control Panel > Custom HTML & Script > Custom Javascript/JQueru > Document Ready Event tab) - it ended up being even less code because of less styling.
/*** This script will make your Standard Tabs into two rows ***/
// This script will only make two rows

 var maxTabs = 8; // in top row
 
 // Don't change anything below
 var navbar = $('table.TabBar');
 if (navbar.find('td').length > maxTabs) {
  navbar.find('td:gt(' + (maxTabs-1) + ')')
   .wrapAll('<tr />').parent().appendTo( navbar );
 }
TopBottom

Corganno (Guild Admin) 8/24/2011 10:30 AM EST : RE: Two Row Nav Bar
Corganno
Posts: 584
Zomgawsh Poster

Mottie said:
Hi Corganno!

Sure! Just add this code to the custom script tab (Control Panel > Custom HTML & Script > Custom Javascript/JQueru > Document Ready Event tab) - it ended up being even less code because of less styling.
/*** This script will make your Standard Tabs into two rows ***/
// This script will only make two rows

 var maxTabs = 8; // in top row
 
 // Don't change anything below
 var navbar = $('table.TabBar');
 if (navbar.find('td').length > maxTabs) {
  navbar.find('td:gt(' + (maxTabs-1) + ')')
   .wrapAll('<tr />').parent().appendTo( navbar );
 }


Thanks Mottie. 

It doesn't seem to be working. 

I have nine tabs at the moment (including those set to Super Admin) and I've tried setting the maxTabs to 4 and 8, but it's still only on one line. 



TopBottom

Mottie (MVP) 8/25/2011 3:25 PM EST : RE: Two Row Nav Bar
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Corganno!

There's a javascript error on your page... an extra quote that needs to be removed (in red):
"      ].random() 
That error is probably preventing other scripts on the page from running. So fix this error and the tabs will probably start working.
TopBottom

Corganno (Guild Admin) 8/27/2011 11:10 AM EST : RE: Two Row Nav Bar
Corganno
Posts: 584
Zomgawsh Poster

Mottie said:
Hi Corganno!

There's a javascript error on your page... an extra quote that needs to be removed (in red):
"      ].random() 
That error is probably preventing other scripts on the page from running. So fix this error and the tabs will probably start working.


It looks like it's the "Vote Notification Popup" script that's doing it (or has something to do with it). When I remove that coding, the navbar is split into two rows. 

On another note, is there any way to "stagger" the buttons? Or do they have to be directly below the ones in the first row?




TopBottom

Mottie (MVP) 8/28/2011 12:11 AM EST : RE: Two Row Nav Bar
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Corganno!

If you mean you want each row to center, then no. The nav bar is actually a table so the script is essentially adding a new row and if you remember how tables work, it lines up in nice neat columns.
TopBottom

Corganno (Guild Admin) 8/28/2011 8:25 AM EST : RE: Two Row Nav Bar
Corganno
Posts: 584
Zomgawsh Poster

Mottie said:
Hi Corganno!

If you mean you want each row to center, then no. The nav bar is actually a table so the script is essentially adding a new row and if you remember how tables work, it lines up in nice neat columns.


So it only adds a column for each tab's image? Is there a way to get it to add an extra blank column in between each tab? (see image below)

I'm hoping that it's an easy tweak in existing code. 





TopBottom

Mottie (MVP) 8/28/2011 10:46 AM EST : RE: Two Row Nav Bar
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

How are those buttons ordered? Like this?
1 3 5 7
 2 4 6
or this?
1 2 3 4
 5 6 7
Either way, it would seem, that if you have too many buttons in the nav bar that doing this wouldn't solve the problem.
TopBottom

Mottie (MVP) 8/28/2011 12:20 PM EST : RE: Two Row Nav Bar
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Ok I figureed something out... basically this script copies the entire table, then reformats them. So we go from this:



to this



Add this css to your custom CSS (Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard)
/* Adjust this width to change the spacing between tabs */
.emptyTab { width: 50px; }
/* Adjust this width to move the second row and align it under the first how ever you want */
.firstTab .emptyTab { width: 120px; }
.TabBar { margin: 0 auto !important; }

Then add this script to the footer (Control Panel > Custom HTML & Script > Footer Area)
/*** This script will make your Standard Tabs into two rows ***/
 var navbar = $('table.TabBar');
 navbar.after( navbar.clone(true) )
  .removeClass('mBottom')
  .find('td:odd').html('<div class="emptyTab"></div>');
 $('table.TabBar:last')
  .addClass('SecondRow')
  .removeClass('mTop')
  .find('td:even').html('<div class="emptyTab"></div>');
I'll make this into a mod when I can figure out an easy way to make the script work automatically for whatever tab bar you are using.
TopBottom

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