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.
 

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

Ana Massien updated their profile photo
yesterday
Ana Massien updated their profile
yesterday
This Is bully replied to Anastasia_Ning_Support's discussion
Why should I migrate?
"32000 member You can asked for $1 in donation and keep it running."
Saturday
Fashion replied to Anastasia_Ning_Support's discussion
Why should I migrate?
"My site has a bit over 32,000 members. I don't want to close the site, but might have to if prices…"
Friday
Dax Carlisle and Julius Manninen joined Ning Creators Social Network
Friday
Scott Bishop posted a discussion
Does anyone know how to change the font for the navbar to a font that is not listed for Ning 2.0? I…
Friday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Ning3: How to Create a Combined Feed of All Forums Inside Groups
"212 views of this and no one can provide feedback?  Is this just way over everyone's head or is it…"
Wednesday
Scott Bishop replied to George H. Compton IV's discussion
(TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"Hi Kyryl, 
How would I be able to use this code to make the navigation be screen wide? I have this…"
Wednesday
⚡JFarrow⌁ replied to J.Ayvar's discussion
Any Code to make a footer Menu like creators Ning 3
"Here is whatI am using.... but i have a collection of footersyou might like to look through and for…"
Wednesday
Anastasia_Ning_Support replied to J.Ayvar's discussion
Any Code to make a footer Menu like creators Ning 3
"Hi there!
One of our representatives have sent you an email, please check it. 
Best regards,
The NI…"
Tuesday
J.Ayvar posted a discussion
Tuesday
Scott Bishop replied to George H. Compton IV's discussion
(TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"George, I messaged you through my site www.surfer-shot.com for help. I was able to fix most of it b…"
Tuesday
More…

Meanwhile, you can check our social media channels