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

[Armani Rouse]

This goes into the advanced css box in your design studio: this should work for you Damien, let me know! ;)

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

[Damien Hannah]

How do I re arrange the order of the tabs, and declare what the tabs should be?

So, I have it set up and working on my site, but it's "as is" and un altered. I'd like latest activity to be first, then forums, then blogs, then groups.

It works, just need to re tell it what to show and where to go. :)

http://addictapic.com to view so far

[Rev. O.M. Bastet]

Go to the Tabs section of your Management section and drag and drop the tabs to the order you want them, in the vertical  list displayed, and that will translate to the horizontal order..

[Damien Hannah]

I tried this...

<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_latest_activity, .module_blogs, .module_forum, .module_groups, ').addClass('indented_content');
$("ul.tabs").tabs(".indented_content");
});
// ]]></script>
</p>
<ul class="tabs">
<li><a class="current" href="#">Latest Activity</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Discussions</a></li>
<li><a href="#">Groups</a></li>
</ul>

it didn't work.

I really want Activity/Forum/Blogs/Groups.

Trying to figure it out on my own, but it's not working.

Have reset back to the default order.

Need help with this, can anyone look at this code above(in this post), and let me know where I've gone wrong?

[Damien Hannah]

This code is MAGNIFICENT now that I understand much more about the programming world!
This little app you've given us has taught me SOOO much! Thank you!

Here is what I have running right now, and I must admit, it's incredible!

<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_latest_activity, .module_blogs, .module_forum, .module_groups, .module_video, ').addClass('indented_content');
$("ul.tabs").tabs(".indented_content");
});
// ]]></script>
<p></p>
<ul class="tabs">
<li><a class="current" href="#">Latest Activity</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Groups</a></li>
<li><a href="#">Videos</a></li>
</ul>

come have a look if you like! :) http://addictapic.com

[Armani Rouse]

you should make those icons on the home page much smaller, reminds of the "my dashboard" I added to my network about 2 months ago lol but the images are huge, I see what you're getting at but theyd be just as useful smaller...the Jquery tabs look good but would look better if there were only 4 of them..you have portfolios hanging off by itself and it throws the look off completely. Lastly, you can see any of the scrolling text at the top of the page...you might want to change that to a white font. Otherwise the site looks good! Where do you get most of your ideas other than here?