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.

[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;

[Kwaku OwusuAfriyie]

Hi There,

I tried to apply the codes above but its not working for me? I want to use the following tabs in this order: Latest Activity, Forum, Blogs and Ladderboard.

Can anyone help me out here?

Cheers

Kwaku

 

[Fire-Tech]

Follow the other instructions for text box method & add this to the actual text box:

<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>

<ul class="tabs">
<li><a href="http://#" target="_self">Latest Activity</a></li>
<li><a href="http://#" target="_self">Forums</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="http://#" target="_self">Leaderboard</a></li>
</ul>

[Kwaku OwusuAfriyie]

Hi Fire Tech,

I really dont seem to get this thing working for me. This is what I get when i try implmenting the codes given so far. Any further tips? Am using a 3 column layout.

[Fire-Tech]

I have 3 column as well & 5 tabs. What you have above looks correct for the text box.

• Make sure you followed step 1 correctly and have each module that you are using in order in the center column underneath the text box that has the tab code.
• Do not use step 2 if you are using the code I gave you.
• Double check that you have step 3 correct and not missing a }
• I would also put the CSS (step 3) at the bottom of your other codes in advanced / css.

If it doesn't work, try reloading & refreshing your page.(shift & reload arrow or shift & F5 if using windows machine).

[Fire-Tech]

I also just noticed that I made a mistake. I added an extra "." before the leaderboard module.

$('.module_activity,.module_forum,.module_blog,.module_photo,..xj_leaderboard_module,').addClass('indented_content');

Remove it so it's just 

$('.module_activity,.module_forum,.module_blog,.module_photo,.xj_leaderboard_module,').addClass('indented_content');

 

Sorry about that.

[Jay Ferrari]

Apparently I'm missing something I've tried the updated codes and the updated css and still no content is  being loaded. I am using a two column layout (layout B1). 

I've tried to load the content into the text box and into the custom code box and still nothing. The buttons are displaying but no content is being displayed. 

[Ty G Powers]

I'm having the same issue at http://hambook.ning.com

Hope we can find a fix.

Ty.