Current status of the Ning Platform is always available on the Ning Status Blog.

FORUM

NC for Hire

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

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Replies

  • wooooooow

    This is very nice
    Thank you my friend

    I only left icon
    Replacement of members of the Forum

  • Impressive!

  • NC for Hire

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

    • NC for Hire

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

  • so nice :D

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

This reply was deleted.

Announcements

 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Fabricio Giugni posted a discussion
Hi there,  Can we integrate the Builderall with Ning? The only thing I want from Ning is the abilit…
15 hours ago
Fabricio Giugni replied to Fabricio Giugni's discussion
How can I add video from Youtube on landing page?
"Hi,
    Thanks, it did work. But I will create this page in some other place. I spend a Thousand do…"
15 hours ago
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
TRICK: Host Your External CSS and JS Files using Dropbox
"I no longer use Dropbox for this...   I use Github....  ask me how if it is too complicated for you…"
yesterday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Create a More Exciting "Featured" Email With Language Editor

still one of the most powerful tools and one of the first things I change when I start a new comm…"
yesterday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
How to Give Your Ning a Really Fake Voice
"These days I use Speakpage and it provides a great on the fly service, but it is limited to a singl…"
yesterday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
How to Create Search Feeds in Bing with a Simple Hack
"thank you brother"
yesterday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
How-to Control Number of Member Profiles on Member Page Using CSS
"Wow... just look how active Creators used to be!"
yesterday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
You May Not Know This About Facebook
"this tip worked well for me today again"
yesterday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Linkedin Tip: Export Your Contacts For Import Into Ning
"yes it most definitely does work on both"
yesterday
⚡JFarrow⌁ updated their profile
yesterday
⚡JFarrow⌁ replied to Fabricio Giugni's discussion
How can I add video from Youtube on landing page?
"Simply right click on the video and open HTML/CSS then find the line where the youtube video URL is…"
yesterday
J.Ayvar replied to Anastasia_Ning_Support's discussion
Join our webinar on SEO
"Thank you!  i am wating for the webinar. Just 5 minutes :)"
Thursday
More…

Meanwhile, you can check our social media channels