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.

[Armani Rouse]

Hey Vaqz

I tried this code for the second set of tabs I setup on my site but cant seem to get it working. My setup is "events, groups, videos, photo" any pointers?

[Armani Rouse]

Id really like to understand this so I can move on LOL its been a real tricky headache!

[Armani Rouse]

Hey SP

Ive been busting my brain trying to get this to work! LOL my setup is latest activity, top members, blogs and forums and for my second set of tabs i have groups, videos, events and photos but for some reason the photos module doesnt hide..can you check out my site and see if you can detect the error? wellkunnected.com thanks SP!

[Matt Whisenant]

After some trial and error and basically teaching myself how to read this code I FINALLY GOT THIS THING TO WORK IN TWO DIFFERENT COLUMNS! It took a modification of each code. Adding a separate code in each text box and a mirrored code with modifications in the advanced css! Check it out here www.scalemodelcollectors.com

Thank you all for this tip and updates!

Matt

[Dr Husky (Emalejandro)]

Ohh Yeah This code is working!

[ismail shah]

I m working on Hero Box and This Trick. Kindly help me someone. i want to increase Height of Hero box and Put All tabs their in single line. .. This will minimize my whole network Modules

Check Image

I want to that my LEFT BAR should MOVE DOWN

[Owen Lawrence]

Very Very Nice

[Ceddy J]

Great job man. People have been asking me for this code, but due to the fact the way mine was done was by another NING Creator who took his time doing it, I couldn't share the code nor would I want to sell it to get profit off work that wasn't mine.

[SweetPotato]

Just a quick question for SEO experts out there: should this affect the SEO performance of the homepage. My guess is no but it is just that: a guess.

SP

[ismail shah]

@

[ismail shah]

@SP,No SEO will not be effected bcz Its Concerned with robot.txt files and meta tags. Bots Pick data from whole site and pages... We not hided contents we just Optimized it through Jquery.

--------------------------------------

Kindly check my above snapshot how can i use herobox space fully by merging two boxes.

I merged it already i just want to know how can i move my Middle content of this trick to left side

[SweetPotato]

cheers.

you'll need to put the boxes in the left column to start with then I would style your tabs within the hero area by wrapping them in a div to hide the two text boxes, something like:

<div style="xg-p: relative; top: 207px; left: 494px; z-index: 5;">
<ul class="tabs">
<li><a class="current" href="#">Forum</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Groups</a></li>
<li><a href="#">Videos</a></li>
</ul>
</div>

obviously, I've completely guessed at the values above (they are what i've used on my test network) but you can play around with them and maybe add some negative margins if needed.

or give the div a class and put the css in advanced. either works.