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.

[solo]

@ Armani just got out of a meeting..just went to your site..seems to be working

[Armani Rouse]

hmmm...I refreshed a few times and it still does the same! LOL its kool though, my next quest is centering the content inside of my text boxes...go back to my site when you're free and look at the "my horoscope" text box on the right side. I've been trying the <center> and </center> tags but it still wont center it! It could be where im placing the tags but if you could help I'd really appreciate it solo!

[Armani Rouse]

it's still doing the same thing, im not sure whats wrong, i removed the "#" out of the code and its still not working, check out my site to see

[Duccio]

Hello to everybody,

I'd need to know how I can use this code into e text box module eliminating the module borders around the jquery tabs menu. See for an example:

http://www.deferolaw.com/

As you can see all the modules have borders except for the one containing the jquery tabs.

Thanx in advance

[Heinrich]

Excellent! You helped me a lot to clean up the mess on my network and put most of the stuff in your proposed second menu. What I like very much is that people get to see the first tab with newest activity as default because this is what should always be visible.Take a lock on my GLOVILLA network: GLOVILLA - the global village business network. Thank you so much!"

I also implemented Google translator in the right column for non german speaking members. The translation quality is just awful. Sometimes so bad that you do not understand a word...

Any better solutions - we had been waiting to get a better one from the NING team since a few years now.

Kind regards from winterly Munich

[Damien Hannah]

Hello Vaqz. Not sure we've spoken before. This is an excellent tip, but I do have a few questions before I even touch it.

I have my portfolios (members) and photo gallery above my activity feed on my home page... those need to stay there, can this box be done after the photo gallery?

I wouldn't want my leaderboards in there. I'd want "activity feed, forum, blogs, groups."

Secondly, I am using TJ's auto scroll latest activity script, will that still work if "more" button comes into view? I do not want to disrupt that script. Thank you. Looking forward to your reply.

[Armani Rouse]

Hey Damien

Go to my site and see what I've done with this tip, I used it to create a set of 8 Jquery tabs, if you need help I'll share what I did ;-)

[Damien Hannah]

That is much appreciated Armani! :)

I'm gonna go have a look right now.

I'm going to try to do it on my own first, to see how far my "learning curve" has straightened. ;) lol.

If I have any issues, I'll post here again.... and that's basically inevitable. lmao

[Armani Rouse]

lol exactly what I was telling George! show me what you're doing bro so I can learn it better myself lol but I'll be here and on my site if you need help I'll assist ;-)

[Damien Hannah]

Ok, I tried it myself. Fail. lol

Those .JS files are IMPOSSIBLE for a novice like me! Lol.

I give up, how'd ya do it Armani?

I just want "Activity Feed/Forums/Blogs/Groups"

[Armani Rouse]

Lol understood!

Heres the code: Adjust as you like and tell me what happens, this goes into your custom code box, I take it you have the code for the  tabs already but add this into your custom code box:

<!--JQUERY TABS-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nhacks.net/demo/js/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.xj_leaderboard_module').addClass('indented_content');
$("ul.tabs").tabs("#xg_layout_column_2 .indented_content");
});
</script>

[Armani Rouse]

This goes into the text box that the tabs will show up in: AGAIN, ADJUST AS NEEDED "activity feed, forums and etc"

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