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.

[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

[Kyle Brown]

Thanks Jen seems to be working now took a little longer than normal for the changes to take.

Also not sure if you could help on one other little issue I am having. Under each section of the tabs the title for each section is showing with the module header background. Is there a way to hide the background for the four sections.

The site is hrrevolution.ning.com

I would appreciate feedback you have. Thanks again for the earlier reply!

[RF]

How do I get it like this:----> "Activity, Monthly Top 10, Groups, Events, Birthdays"?

[La]

Any idea on how to make it work if you are pushing Latest Activity to its on page. Will these modules also be able to be pushed to that page as well and hidden on the sidebar like the latest activity module?

[Dignified]

Hi Vaqz, can you or anyone else help point out why the "currently selected tab" area doesn't display outside the textbox. Check out the screenshot below or my network's homepage.

[Fire-Tech]

I couldn't get it float over the module either with a z-index. I just ended up removing the pointy part in the CSS and it still looks fine.

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;