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.

[Sasha Gayatri]

Hi everyone i want to combine the carousel (slider) with this jquery tabs but I guess the codes somehow conflicts with each other. I use the above code for jquery tabs and for the carousel slider I use from here http://creators.ning.com/forum/topics/simple-plug-n-play-content

The code:

<div class="xg_module_body nopad"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script> <script type="text/javascript" src="http://api.ning.com/files/*FK87Mos7FqSwGxq4NyVz0JVG3aSLtzzIjAH*CEpmFbL0mUm-66F4HvNdw2JR1hwbC0sIuFrxQjkddLwrv70lK--KKE0psos/jquery.simpleslider.js">
</script> <script type="text/javascript">
$(function() {
$('#slider').simpleslider({
auto: true,
interval: 8000,
speed: 600,
direction: 'horizontal',
buttons: true,
previoustext: 'Previous',
nexttext: 'Next'
});
});
</script>
<div id="container" style="overflow: hidden;" meebo:notsharable='true'>
<div class="spacer"></div>
<ul id="slider" style="overflow:none;height:136px;">
<li style="margin:0;padding:0; list-style:none;height:136px;"><a href="http://yourning.com/link"><img src="http://api.ning.com/files/sSMfgXbtClSh0ktPBRXsacUHyu*D74LLHFNZ24PEyoa0deutRC5rjM0tGQQGG47YFsgtM6A2dKzl83ni**09wBxy7-mmjo47/22565.gif" alt="" /></a></li>
<li style="margin:0;padding:0; list-style:none;height:136px;"><a href="http://yourning.com/link"><img src="http://api.ning.com/files/t2uy6ufIS7uK9zWpNi5amBhbM5wDvGmiPEWliEz4C9t00eDh9otMe1uwRzetsfwDhn2qsnNrKrifoHA9F5DNndXdoNuztQlL/doppler_136.png" alt="" /></a></li>
<li style="margin:0;padding:0; list-style:none;height:137px;"><a href="http://yourning.com/link"><img src="http://api.ning.com/files/6gT*1GoKf0O79CgJUM3vEVX9cMXm-UxTsEsyRqcu2TdnEoEu2sIQSHZobPz*aPvKLkZjxbArRdahnj4lZxNzMx0KBLkKXh*e/22595.png" alt="" /></a></li>
</ul>
</div>
</div>

Can anyone tell what I did wrong? 

Thanks!

Sasha

[Ty G Powers]

Hi guys. 

I followed the recommended steps in order to have the tabs up and running on the network I'm working on, but no luck the tabs would load the right content. I still can see all the modules below the tabs.

I placed the scripts first in the text module, then I left the ul class there and moved the javaScript code to the custom code section and still the same results.

Any advice? You can take a look at http://hambook.ning.com

Thanks in advance!

Ty.

[HELP SEEKER]

hi, i went by the instructions, links are there but they dont deliver anything. pls HELP

[HELP SEEKER]

why would people post not working/not full  codes here (APPARENTLY FOR FREE), then asking for $ to 'fix the issue' ???

if you plan to charge for your code, why don't state this at the beginning, instead of collecting all the 'thanks' etc

[CocteauBoy]

Is there a way to add a fifth tab for a 5th box? Or more?

[Kwaku OwusuAfriyie]

can some one give the final codes all together? having it here and there is really confusing especially for us the non pros.

Will be waiting................it never worked for either

[Andrew Sampson]

You are really awesome with your patience!
I was trying to change the items which would show - based on your original instructions

Basically in a simple 3 column layout we would like to have

Blogs Forums Groups Videos

Do I just need to change this $('.xj_leaderboard_module').addClass('indented_content');

to

$('.xg_module module_blog').addClass('indented_content');

(as well as the other bits which I understand :) )

or do I have to add something to custom code?

Appreciate your advice on this

[Armani Rouse]

This is a great tip and Ive implemented on my site! Now my question is adding direction as to where these tabs take you for instance when I click on "blogs" it hides the latest activity and shows the music player...how do add the URL for where these tabs would take you on my site?

[Tiffany Lane-Crane]

This is the most wonderferous thing I've come across on Creators. Thank you for this! This officially changed the way I run my network as I can now focus on certain aspects to highlight without taking up a lot of real estate on my home page. Huge improvement. Thank you!! 

[Ed]

thank you vaqz and everyone else who contributed to this thread.

[Selene Aswell]

you rock. thank you so much!

[igoravance]

Hi,

First of all thanks for so good tip!! But i have problem! i already prove all in my hands but this code dont work in my web www.ucraniaonline.com. My problem is that i can see all good, i mean table and all, but content dont appear in down of my web, this is the problem, dont appear in down nothing! what can i do? thanks