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.

[Illya]

Uhm darn!... well Ismail I hope that someone can think of something to fix that, because I love having the more button, and I need the status update bar.

[vaqz]

are you referring to the demo site? if so, the more button is currently not present because I don't have much activity on that site.

[Illya]

Oh ok cool that's good to know. But what about the activity status update bar?

[vaqz]

You are not seeing it because you are not a member of the demo site. Try to signout on your own NING site so you will understand what I mean.

[Illya]

Aaaahhh yea I forgot, makes sence! Thanks

[vaqz]

Hi SP,

Yes you are correct, it really has something to do with that line, only that you are using the wrong class that's why it didn't work. Use the code below instead. I haven't tried it but hopefully it will work for you. Share us your progress here when you get a chance.

$('.module_groups,.module_video,.module_events').addClass('indented_content');

[SweetPotato]

Hi Vaqz, right, that did the trick but the weird thing is that the Activity Feed that i have in a different column disappears, not on a click of a tab, just disappears. The code is affecting it somehow but I really can't see where. Any thoughts?

SP

[vaqz]

Hi SP, yeah you are right. The Activity feed bears also a class name "indented_content" and it is being hidden every time you click the tabs that's why. I have to update again the code to fit your requirement. See the code below for custom codebox:

<script src="http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js" type="text/javascript"></script>
<script>
$(function() {
    $('.module_groups,.module_video,.module_events').addClass('indented_content');
    $("ul.tabs").tabs("#xg_layout_column_2 .indented_content");
});
</script>

Let me know how it works for you.

[SweetPotato]

LOL, yeah, I just found that too using Firebug.

I put it in column one and this now works:

<script src="http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js" type="text/javascript"></script>
<script>
$(function() {
$('.module_forum, .module_groups, .module_video, .module_events').addClass('indented_content');
$("ul.tabs").tabs("#xg_layout_column_1 .indented_content");
});
</script>

Thanks again

SP

[vaqz]

Awesome find! YW!

[ismail shah]

vaqas not working for me. what will be final edition of your above code for adding.

Topmembers = lATEST ACTIVITY - FORUM BLOGS GROUPS VIDOS.

I WANT THESES ALL IN Single line.

Kindly give the final code. i tryed.but nto wkring

[Armani Rouse]

Hey Vaqz!

I was looking for this post, I was looking so hard I posted a new forum to see who knew where this was and Bernard Lama helped me out (thanks Bernard, your the man!) I guess me and SP were thinking alike in the sense that the tabs are not only appealing on the eye and makes you wanna click them LOL but they really save a ton of space hiding the modules within one another in the tabs! I set up my second of tabs under the first set and I have "events, groups, videos, and photos" only photos show but my first tab is actually events. What do I need to modify to have the setup I've created work? So far the code you provided above does work for hiding the other modules but with my setup it does nothing when I click on the tabs! LOL help please!