JQUERY TABS TO SAVE MORE SPACE - IN MORE THAN ONE COLUMN!!!!!!!!!!

[Matt Whisenant]

First of all I want to thank vaqz for the original JQUERY TABS - SAVE MORE SPACE tip! This tip has been a game changer for me. Not only did it save me a tremendous amount of room and help clean up my site but it also taught me just enough to make me more curious and learn how to trouble shoot this code for myself.

I am beginning a new tip based off of the original for expanding the Jquery Tabs into other columns. This will save you even more space and is a killer feature in my opinion. There were questions about how to do this in the other discussion but since the other discussion had 22 pages of comments and they all branched off in different directions I decided to take the solution for this topic and give it its own Tip. If the answer for how to do this is out there somewhere else I apologize as I could not find it and ended up solving my own problems through trial and error. So, after a year or more of learning from this site and all of the great NC's here goes my first attempt at giving a little back!

This is what it looks like on my site...

I have added Jquery Tabs in the left and center columns of a 3 column site. I have added 2 Tabs in the left column and 5 Tabs in the center column. Each column can be controlled independent of the other as seen below.

To achieve this layout you will need to go to your Features Layout under My Network and place the modules you want in your Jquery Tabs into their respective column in the order you want them to be listed in across the Tabs for each column! You will also want to add one Text Box above each set of modules in each column for your Jquery Tabs code. See below...

NOTE: I have an additional Text Box at the top of the left and middle columns for my Hero Box. (Thanks Kyle)

You will want to place the following code into your Advanced CSS box under Appearance. This section of code is for your CSS for the Jquery Tabs in the left column.

ul.tabsa {
height: 42px;
}
ul.tabsa li {
background: none repeat scroll 0 0 #02487a;
border-right: 1px solid #FFFFFF;
float: left;
list-style: none outside none !important;
margin: 0 !important;
text-align: center;
width: 100px;
}
ul.tabsa a, ul.tabsa li a:hover {
background: none repeat scroll 0 0 transparent;
color: #FFFFFF;
display: block;
padding: 5px 0;
}
ul.tabsa a.current {
width: 100px;
}
ul.tabsa li:hover, ul.tabsa a.current {
background: none repeat scroll 0 0 #3c79a7;
color: #FFFFFF;
}
ul.tabsa a.current:after {
border-color: #3c79a7 transparent;
border-style: solid;
border-width: 10px 10px 0;
content: "";
display: block;
margin-left: 17%;
margin-top: 5px;
position: absolute;
width: 0;
}

You will want to place the following code into your Advanced CSS box under Appearance just below the previous code. This section of code is for your CSS for the Jquery Tabs in the middle column.

ul.tabs {
height: 42px;
}
ul.tabs li {
background: none repeat scroll 0 0 #02487a;
border-right: 1px solid #FFFFFF;
float: left;
list-style: none outside none !important;
margin: 0 !important;
text-align: center;
width: 97px;
}
ul.tabs a, ul.tabs li a:hover {
background: none repeat scroll 0 0 transparent;
color: #FFFFFF;
display: block;
padding: 5px 0;
}
ul.tabs a.current {
width: 97px;
}
ul.tabs li:hover, ul.tabs a.current {
background: none repeat scroll 0 0 #3c79a7;
color: #FFFFFF;
}
ul.tabs a.current:after {
border-color: #3c79a7 transparent;
border-style: solid;
border-width: 10px 10px 0;
content: "";
display: block;
margin-left: 7.5%;
margin-top: 5px;
position: absolute;
width: 0;
}

Notes for above code:

• Numbers in Blue adjust the with of each Tab in their respective columns.

• Numbers in Red adjust the location of the pointer below the selected Tab in their respective columns.

• Numbers in Dark Green are the color codes for the Tabs in their respective columns.

• Numbers in Light Green are the color codes for the Tabs in their respective columns when hovering above or selected.

You will want to place the following code into your empty Text Box above the modules in your left column. Be sure to insert this code in HTML mode

<p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript">// <![CDATA[

// ]]></script>
<script src="http://nhacks.net/demo/js/jquery.tools.min.js" type="text/javascript">// <![CDATA[

// ]]></script>
<script type="text/javascript">// <![CDATA[
$(function() {
$('.module_members,.module_groups,').addClass('indented_content');
$("ul.tabsa").tabs("#xg_layout_column_1 .indented_content");
});
// ]]></script>
</p>
<p></p>
<ul class="tabsa">
<li><a href="http://#" target="_self">Members</a></li>
<li><a href="#">Groups</a></li>
</ul>

You will want to place the following code into your empty Text Box above the modules in your middle column. Be sure to insert this code in HTML mode

<p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript">// <![CDATA[

// ]]></script>
<script src="http://nhacks.net/demo/js/jquery.tools.min.js" type="text/javascript">// <![CDATA[

// ]]></script>
<script type="text/javascript">// <![CDATA[
$(function() {
$('.module_activity,.module_forum,.module_blog,.module_photo,.xj_leaderboard_module,').addClass('indented_content');
$("ul.tabs").tabs("#xg_layout_column_2 .indented_content");
});
// ]]></script>
</p>
<p></p>
<ul class="tabs">
<li><a href="http://#" target="_self">Latest Activity</a></li>
<li><a href="http://#" target="_self">Photos</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Discussions</a></li>
<li><a href="http://#" target="_self">Monthly Top 10</a></li>
</ul>

NOTE: By comparing the code for the Text Boxes and my modules in Features Layout you should be able modify or edit what modules you use and in what order you want them to be displayed.

Notes for above code:

• Text in Purple are your Tab Titles only (List these in their correct order to be displayed)
• Text in Light Blue are the actual Module Names

The key to making this work in two different columns is having a different class of CSS and a different column location as shown below in this snippet of code from one of the Text Box codes.

$("ul.tabsa").tabs("#xg_layout_column_1 .indented_content");

The code above will look for CSS Class ul.tabsa and control modules in #xg_layout_column_1

As you can tell this a snippet of code from the Text Box in the LEFT column or column_1...

Use this bit of information for trouble shooting!

I hope this helps all of those who have been struggling to make this work because like I said, this Tip is a GAME CHANGER! To see it in action just visit my site at www.scalemodelcollectors.com

If you have any questions just ask.

I also want to thank all of the NC's who have always helped me anytime I asked! There are too many of you to name individually but I hope you gain some satisfaction by seeing the results of all of that knowledge you have so selfishly shared with me along the way!

Thanks,

Matt

[classic]

wooooooow

This is very nice
Thank you my friend

I only left icon
Replacement of members of the Forum

[Matt Whisenant]

Your very welcome!

[Matt Whisenant]

Thanks!

[Matt Whisenant]

Thanks!

[⚡JFarrow⌁]

interesting....i wonder how well this could work inside group home page text boxes...nice work!

[Matt Whisenant]

I am fooling around with making this work in a group... I will let you know what I find out!

[⚡JFarrow⌁]

cool...dying to learn...thanks Matt

[sho allan]

so nice :D

[Matt Whisenant]

Thanks!

[lorianne]

great! using it on my left column only and loving it!  thanks.

[Matt Whisenant]

Whats your site? I would love to check it out!