Content Tabs

[Jordan S Smith]

Alright, this has probably been asked before, but i'm trying to make some content tabs for vB4. I'm using a free-source code. (All credit for the code belongs to menucool.com)

This is what I have so far.

<style type="text/css">

ul.tabs
{
    padding: 14px 0 8px;
    margin:0;
    font-size: 0;
    list-style-type: none;
    text-align: center; /*set to left, center, or right to align the tabs as desired*/
    background: #DDDDE3;
    border:1px solid #CCC;
    border-bottom:none;
    border-radius: 2px 2px 0 0;
}
        
ul.tabs li
{
    display: inline;
    margin: 0;
    margin-right: 2px;/*distance between tabs*/
    font: normal 12px Verdana;
}
        
ul.tabs li a
{
    text-decoration: none;
    position: relative;
    z-index: 1;
    padding: 8px 22px;
    /*border: 1px solid #16BCA3;*/
    color: #000;
    border-radius: 3px 3px 0 0;
    outline:none;
}
  
        
ul.tabs li a:hover
{
    text-decoration: underline;
    color: #000;
}
        
ul.tabs li.selected a
{
    /*selected tab style */
    position: relative;
    top: 0px;
    font-weight:bold;
    background: #FFF;
    border: 1px solid #AAA;
    border-bottom: 1px solid #FFF;
    color: #000;
}
        
        
ul.tabs li.selected a:hover
{
    /*selected tab style */
    text-decoration: none;
}
        
div.tabcontent
{
    display: block;
}

div.tabcontents
{
    border: 1px solid #CCC; padding: 30px;
    border-top-color:#AAA;
    background-color:#FFF;
    border-radius: 0 0 2px 2px;

</style>

<script type="text/javascript">

var tabs=function(){var b=function(c,a){var b=new RegExp("(^| )"+a+"( |$)");return b.test(c.className)?true:false},j=function(a,c){if(!b(a,c))if(a.className=="")a.className=c;else a.className+=" "+c},h=function(a,b){var c=new RegExp("(^| )"+b+"( |$)");a.className=a.className.replace(c,"$1");a.className=a.className.replace(/ $/,"")},g=function(c,b){var a=document.getElementsByTagName("html");if(a)a[0].scrollTop+=b},e=function(){var b=window.location.pathname;if(b.indexOf("/")!=-1)b=b.split("/");var a=b[b.length-1]||"root";if(a.indexOf(".")!=-1)a=a.substring(0,a.indexOf("."));if(a>20)a=a.substring(a.length-19);return a},d=e(),c=function(a){this.a=0;this.b=[];this.c=[];this.d=[];this.e=0;this.f(a)};c.prototype={g:function(b){var c=new RegExp(d+b+"=(\\d+)"),a=document.cookie.match(c);return a?a[1]:this.h()},h:function(){for(var a=0,c=this.d.length;a<c;a++)if(b(this.d[a],"selected"))return a;return 0},j:function(d,c){for(var b=d.getAttribute("rel"),a=0;a<this.b.length;a++)if(this.b[a].getAttribute("rel")==b){j(this.b[a].parentNode,"selected");c&&this.e&&this.k(this.a,a)}else h(this.b[a].parentNode,"selected");this.l(b)},k:function(a,b){document.cookie=d+a+"="+b+"; path=/"},l:function(b){for(var a=0;a<this.c.length;a++)this.c[a].style.display=this.c[a].id==b?"block":"none"},m:function(a){if(a.id)for(var b=0;b<this.b.length;b++)if(this.b[b].getAttribute("rel")==a.id)return this.b[b];return a.parentNode.nodeName!="BODY"?this.m(a.parentNode):null},n:function(d,c){var a=document.getElementById(d);if(a){var b=this.m(a);if(b){this.j(b,0);if(!c)setTimeout(function(){a.scrollIntoView();g(a,-120)},0);else setTimeout(function(){window.scrollTo(0,0)},0);return 1}else return 0}},f:function(a){this.a=a.i;this.b=a.getElementsByTagName("a");this.d=a.getElementsByTagName("li");for(var b=0;b<this.b.length;b++)if(this.b[b].getAttribute("rel")){this.c.push(document.getElementById(this.b[b].getAttribute("rel")));var f=this;this.b[b].onclick=function(){f.j(this,1);return false}}var e=a.getAttribute("persist")||"";this.e=e.toLowerCase()=="true"?1:0;var d=window.location.hash;if(d&&d.length>1)if(this.n(d.substring(1),window.location.search.indexOf("noscroll=true")>-1))return;var c=this.e?parseInt(this.g(a.i)):this.h();if(c>=this.b.length)c=0;this.j(this.b[c],0)}};var a=[],i=function(d){var b=false;function a(){if(b)return;b=true;setTimeout(d,4)}if(document.addEventListener)document.addEventListener("DOMContentLoaded",a,false);else if(document.attachEvent){try{var e=window.frameElement!=null}catch(f){}if(document.documentElement.doScroll&&!e){function c(){if(b)return;try{document.documentElement.doScroll("left");a()}catch(d){setTimeout(c,10)}}c()}document.attachEvent("onreadystatechange",function(){document.readyState==="complete"&&a()})}if(window.addEventListener)window.addEventListener("load",a,false);else window.attachEvent&&window.attachEvent("onload",a)},f=function(){for(var e=document.getElementsByTagName("ul"),d=0,f=e.length;d<f;d++)if(b(e[d],"tabs")){e[d].i=a.length;a.push(new c(e[d]))}};i(f);return{open:function(c,d){for(var b=0;b<a.length;b++)a[b].n(c,d)}}}()

</script>

<ul class="tabs">
    <li><a href="#" rel="view1">{option}</a></li>
</ul>
<div class="tabcontents">
    <div id="view1" class="tabcontent">
        {param}
    </div>
</div>

The way I see it I need two different bbcodes to bring this together. I've gotten one. The usage would be [tab=Tab Title]Tab content.[/tab] When I try to create multiple tabs they won't stay together. It creates the tab title (highlightable/hoverable) and the content like it should, but separates the instances of the bbcode. I've tried to figure out a way to make multiple instances of the "tab" bbcode stay together by using another bbcode, but failed. If anyone can come in and make sense of anything I have so far, then finish this code, i'd be really grateful.

[darnoldy]

I don't understand what you are trying to accomplish!

Are you trying to allow users to create navigation tabs inside their posts?

bbcodes are used in post to allow users to insert things that normally require html to do (like linking to a youtube video) so that you don't have to allow full html permissions (which would be dangerous).

If you are just trying to add navigation tabs to your site, forget the bbcodes and just add the html to the templates from the acp.

--don

[Jordan S Smith]

Originally Posted by darnoldy

I don't understand what you are trying to accomplish!

Are you trying to allow users to create navigation tabs inside their posts?

bbcodes are used in post to allow users to insert things that normally require html to do (like linking to a youtube video) so that you don't have to allow full html permissions (which would be dangerous).

If you are just trying to add navigation tabs to your site, forget the bbcodes and just add the html to the templates from the acp.

--don

Actually, i'm trying to allow users to add tabs to their posts/signatures/etc. If I were simply adding them to a page it'd be no problem, but it's a little different trying to get them to work with bbcode. That's why i'm stuck and needing help.

[Amaury]

Originally Posted by Jordan S Smith

Actually, i'm trying to allow users to add tabs to their posts/signatures/etc. If I were simply adding them to a page it'd be no problem, but it's a little different trying to get them to work with bbcode. That's why i'm stuck and needing help.

To clarify, something like XenForo's tab feature.

(Jordan works over on KH-MF as well as an admin.)