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.

[igoravance]

...and i already changed # for links of my web

[Luke]

Hey, thanks this is awsome, i have one problem tho the tabs appear in a text box above the tabbed content, the text box has a boarder around it with a large gap between the two and it looks really odd. Is there a way to remove the borders from these without removing the borders from all my other text boxes?

[Luke]

Here is a screen shot. As you can see the tabs are in a separate box, is there a way to make them appear as the same box or get rid of there borders without turning off borders for all my other modules?

[Tim Cummings]

I am having trouble getting this to work:

 

I am displaying Activities, Events, Groups and Forums.  I wanted to include videos but could not get it integrated so I moved videos back to the left column. My site www.ceofellowship.com isa three column layout.

When the site comes up - Activities is highlighted, but there is nothing displayed in the column below the vavigation bar.  If I click on the next label, Events, Activities display; clisk on Groups and Events displays; click on Forums and Groups displays.

 

Here is the Javascript I am using -

<p>
<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_events,.module_groups,.module_forums,').addClass('indented_content');
$("ul.tabs").tabs("#xg_layout_column_2 .module_activity,.indented_content");

});
// ]]></script>
</p>
<ul class="tabs">
<li><a class="current" href="#">Activities</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Groups</a></li>
<li><a href="#">Forums</a></li>
</ul>

 

The CSS is :

/* Scroll Bar for Events */

.xg_theme.xg_widget_main .module_events .xg_module_body {

height: 300px;overflow : auto;position:relative;

}

ul.tabs {
height: 42px;
}
ul.tabs li {
background: none repeat scroll 0 0 #444444;
border-right: 1px solid #FFFFFF;
float: left;
list-style: none outside none !important;
margin: 0 !important;
text-align: center;
width: 95px;
}
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: 95px;
}
ul.tabs li:hover, ul.tabs a.current {
background: none repeat scroll 0 0 #b9121a;
color: #FFFFFF;
}
ul.tabs a.current:after {
border-color: #b9121a transparent;
border-style: solid;
border-width: 10px 10px 0;
content: "";
display: block;
margin-left: 10%;
margin-top: 5px;
position: absolute;
width: 0;
}

 

Here is an image of my Feature Layout

 

The site is live at www.ceofellowship.com.  Please tell me what I have to do to correct this situation.  I would like to move Videos into the center column and include it in the Navigation.  I have already adjusted the width of the buttons to allow for five links.

 

Thanks in Advance.

Tim Cummings

[e-mail]

[solo]

@Tim have you changed your  modules around..starting with latest A..then events..groups.forums..when i press on your L.A. tab it gives me events...try this if you havnt allready

[Tim Cummings]

Modules are placed in the order of the tabs.  But, yes it does seem to lag behind by one module.

 

[Tim Cummings]

I have had to abandon this coding as it will not work and the author will not provide assistance.

 

[MAXX]

Not having any luck. Tabs are appearing in separate text box and nothing is hidden and cannot toggle between modules.  www.mycoachbook.com

[TJ @ jQueryHelp]

Hi Maxx,

It's not working for you due to this error:

Timestamp: 8/19/2012 8:45:48 PM
Error: TypeError: $("ul.tabs").tabs is not a function
Source File: http://www.mycoachbook.com/#
Line: 217

I've seen this error several times when working on client's sites.  Here's one thing to try.

Try putting the scripts in the custom code box rather than in the textbox where the tabs are.  If you check vaqz's demo page for this tip, you'll see that's what he did too.  The scripts:

<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(".indented_content");
});
</script>

vaqz's demo page (view source and notice the scripts are at the bottom of the page which is where custom code ends up, rather than in the top or middle where textbox scripts/code ends up):

http://nhacks.net/demo/jtab_ning.html

If that doesn't fix things, let me know on my site.  This is a great tip but it often requires some modification work to get it functioning properly.

Best wishes,

"TJ"

[MAXX]

thanks TJ, that did the trick!!

[TJ @ jQueryHelp]

Glad that worked for you!  But now you have the same situation that Luke described above:

http://creators.ning.com/xn/detail/4244211:Comment:1110856

The two-part solution would be to use jQuery to get rid of the bottom border and margin of the textbox that holds the tabs, and also to get rid of the top border in the modules in the tab panes.  If a person used my suggestion elsewhere in this discussion to use some class like "TabPane" rather than indented_content, then they may be able to simply style TabPane as border-top:0px!important to take care of the second half of the fix.  There might be a way to do the first half with css too but I think in jQuery so that's what I try first :)

If the fact that your tabs are in different boxes from your panes bothers you, let me know and I'll see if I can whip up the solution.

Best wishes!

"TJ"

[SweetPotato]

If you wrap the tabs in a div and style it then you can make it look less clunky:

eg:

HTML:

<div class="jquerytabs">
<ul class="tabs">
<li><a class="current" href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
</ul>
</div>

css for advanced css:

.jquerytabs {

    background: #FFFFFF;

    margin-bottom: 15px;

    margin-top: -16px;

    position: relative;

    right: 5px;

    width: 502px;

}

play around with css to hide the text box that the tabs are in

SP