jquery tabs - save more space

[vaqz]

Preview of Final Results. Checkout Live demo here!
Last updated 4/22/12 to fix issues address here, here and here! :p

Step 1

Setup center column of feature layout. Follow setting below and save your changes.

Step 2

The HTML: Copy and paste the html code below to the 1st textbox that we add on the
center column (see screenshot above). Important:make sure that you are in html mode when
pasting the code and save your changes.

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://api.ning.com:80/files/JHw5Rw1dl6EzQodA1ybSCIJaDOcuGnda991bRWvHRKexSEXhz3lfokr7olFZ316enFRjdaqGCsZ0XYuJXa0gdOXUkZKGWsZ7/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.xj_leaderboard_module').addClass('indented_content');
$("ul.tabs").tabs(".indented_content");
});
</script>
<ul class="tabs">
<li><a class="current" href="#">Monthly Top 10</a></li>
<li><a href="#">Latest Activity</a></li>
<li><a href="#">Discussions</a></li>
<li><a href="#">Blogs</a></li>
</ul>

Step 3 (Final)

The Custom CSS: Copy and paste the css code below to the Advance section of your design
Studio or advance appearance if you are using the old editor. Important: there may be a need to
change some of the values on each properties below since we have different settings of our network themes. Please do so when needed.

 

ul.tabs {
height: 42px;
}
ul.tabs li {
background: none repeat scroll 0 0 #054C83;
border-right: 1px solid #FFFFFF;
float: left;
list-style: none outside none !important;
margin: 0 !important;
text-align: center;
width: 122px;
}
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: 122px;
}
ul.tabs li:hover, ul.tabs a.current {
background: none repeat scroll 0 0 #0088C3;
color: #FFFFFF;
}
ul.tabs a.current:after {
border-color: #0088C3 transparent;
border-style: solid;
border-width: 10px 10px 0;
content: "";
display: block;
margin-left: 10%;
margin-top: 5px;
position: absolute;
width: 0;
}

 

save now your changes and your good to go. If you still in trouble following my steps please drop your questions down below and I will get back to you as fast as I can.

[Nederlander]

How should the script read if the order should be 1)Blogs, 2)RSS, 3)Activity, 4)Events?

I thought it would work by replacing activity-module by blogs-module:

<script type="text/javascript">
$(function() {
$('.module_blogs').addClass('indented_content');
$("ul.tabs").tabs(".indented_content");
});
</script>

[westy]

Hi, I really like the idea of saving space on the home page with this jquery tab feature. I was just wondering if one of the tabs could be for content not on a feed just something I can update as and when? Thank you for your time.

[Fire-Tech]

Thanks Vaqz! Works great!

[SweetPotato]

Hi guys,

trying to get this to work so that it has 4 tabbed modules and then one module constantly visible underneath.

So my code is:

<script src="http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js" type="text/javascript">// <![CDATA[

// ]]></script>
<script type="text/javascript">// <![CDATA[
$(function() {
$('.module_photo,.module_groups,.module_video,.module_events').addClass('indented_content');
$("ul.tabs").tabs("#xg_layout_column_2 .indented_content");
});
// ]]></script>
<ul class="tabs">
<li><a class="current" href="#">Groups</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Events</a></li>
</ul>

and this works fine.

But I want the forum constantly showing under the tabbed items and even though it's in the right place on the Features Layout and i have not added the indented_content class to .module_forum above, it still doesn't show in the 2nd column.

Any ideas?

SP

[Jeff Moreno]

Did you get to solve this? I have the same problem.

[TJ @ jQueryHelp]

Ning itself adds the class of indented_content to several modules including the forum module. 

(Go here: http://creators.ning.com/ and Check the Forums with FireBug and you'll see what I mean.)

I don't think its good to addClass('indented_content') in this app - better to call the class that the jquerytools library is going to work on, something else.  When I make tabbed content, I use the class 'Tabbed Pane' so it doesn't interfere with classes that Ning already uses.

If you really really wanna use indented_content for some reason, then you'll have to do a removeClass from forum_module so the tabs library doesn't include it on a tab pane.  As is, it will include it on a tabbed pane that is always hidden because you don't have a li in the tabbed menu to show it!

Best practice, in MY opinion only, is this:

$(function() {
$('.module_photo,.module_groups,.module_video,.module_events').addClass('TabbedPane');
$("ul.tabs").tabs("#xg_layout_column_2 .TabbedPane");
});

Best wishes!

"TJ"

[Tim Cummings]

Thanks for the information, but when I made the changes you suggested, the broken code quit working completely.  I have no more time to waste on this - got to get my site launched.

 

[TJ @ jQueryHelp]

I like your site, Tim!   Best wishes to you and your site. :)

[TJ @ jQueryHelp]

Ning sites differ and there may not be a div with id xg_layout_colum_2 in some.  If the class we are adding to the panes we want to show with this tabbed panes app is unique, something like TabbedPane or MyTabbedPaneClass, then no need to specify that that class is inside that div.  So this line might work too:

$("ul.tabs").tabs(".TabbedPane");

If someone has trouble getting this code to work at all, another thing to try is to move the script part of it to the custom code box.  That worked for Maxx ( http://creators.ning.com/xn/detail/4244211:Comment:1120185 )

Another thing that sometimes causes a tab to skip is putting RSS feeds in a tab.  If you have an RSS feed in a tab, try taking it out and see if that helps.

This is a great tip but may require some modification and debugging to work on some sites.

[Pastor Donald C. Garner Jr.]

why do I KEEP getting the other links showing up at the bottom of the Tab I click?

     Example: I have "Latest Activity" as one of the 1st tabs, then Blog Posts, then Weekly Top 10, Then Groups...

However, when I click each tab...Everything UNDER the other tab modules in the Features section, so how up in the Main Page view. How do I quick fix this? Anyone Help Please!!! Thank You.

[Kyle Brown]

I have added the code to my site, and can see it working when I am logged in. But when I log out you can't see the 4 tabs or the content that should be showing.

I must be doing something wrong. Thanks for the help in Advance!

[Jen]

Kyle,

It's probably just the signed-out cache. Sometimes it takes a few minutes to catch up with signed-in. Give it a few minutes, and do a hard refresh in your Browser.

Best Regards,

Jen