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.

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

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