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.

[ismail shah]

thx.

not working.

For Hero Box and Merge i used

Left Column Text box

<div class="space"></div>

where i have to put that?. Accodiing to Herobox Tutoriion i have put my content inside DIV of Middle column

Middle COlumn

<div id="spotlight" class="space">CONTENTS GOES HERE</div>

[SweetPotato]

Can put it in either. I've put it in left column wrapped in the space div

<div class="space">
<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>
</div>

But if you want your tabbed modules to appear in the left column then you'll need to put them in the left column!

SP

[ismail shah]

I need like this.. If i paste all in Left Check Below results

[SweetPotato]

so you want the tabbed modules to span two columns and then have rest of the modules still in two columns. i think you're talking custom work. Why not approach Vaqz?

[ismail shah]

Hope, Vaqaz. Will reply.

Thx SP for help.

@Vaqaz without CSS we can inject it through Jquery. if you have method for it let me know,

Thnx in advance

[Illya]

Hello again I was hoping to get some design help for this cool feature of yours... Notice how in your images on this page of your site http://nhacks.net/profiles/blogs/jquery-tabs-save-more-space you have this really nice rounded 3D edge around your images (the border) I was wondering if you would know a way I can create a border just like that for this feature so as that it pops visually.

It would be really nice if you or anyone could help with this... It would give my site and anyone else site that uses this same design a sleek look and feel.

Thank you in advance.

[Aanu Bello]

its not just working on my network

[Aanu Bello]

can you tell me what the mater is?

[ismail shah]

@badan

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

[vaqz]

adding of class should only be applied on event module. use the code below instead:

$('.module_events').addClass('indented_content');

[vaqz]

let me try..what layout are you using? 2 or 3 column layout? how many textbox are there in the column wer your jtab is sitting?

[ismail shah]

check http://vudesk.com

i want to attach last Text box in middle coulmn. . check plz