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.

[classic]

I want like this codes but for new action and also for picture

[Charles Lee]

i cant get it to work..??

http://mygamethis.ning.com/index.php

[Ceddy J]

I updated the code for the way I did mine and added The News Feed To It Too. I used the same box that my slider is in to attach mine. See it live here. *NOTE* I'm not using the code in this tip. This is a little more simple since you don't have to use the custom code box.

[solo]

@Ceddy 1 of the coolest network that ive visted 

[Ceddy J]

Thanks Solo, I really appreciate the kind words. :-)

[Regi]

Nice website King.

Please can you show me how to use your code with the (ads, New Mixtape etc) on left ?

I have a tab on the right but would love to add another one.

Thanks

[CocteauBoy]

Hi Ceddy, did you post the code for this somewhere? It looks great!

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