Jordan S Smith
03-17-2013, 08:58 AM
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){va r 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(fun ction(){a.scrollIntoView();g(a,-120)},0);else setTimeout(function(){window.scrollTo(0,0)},0);ret urn 1}else return 0}},f:function(a){this.a=a.i;this.b=a.getElementsB yTagName("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.doScr oll("left");a()}catch(d){setTimeout(c,10)}}c()}document.atta chEvent("onreadystatechange",function(){document.readyState==="complete"&&a()})}if(window.addEventListener)window.addEventLi stener("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 content. 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.
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){va r 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(fun ction(){a.scrollIntoView();g(a,-120)},0);else setTimeout(function(){window.scrollTo(0,0)},0);ret urn 1}else return 0}},f:function(a){this.a=a.i;this.b=a.getElementsB yTagName("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.doScr oll("left");a()}catch(d){setTimeout(c,10)}}c()}document.atta chEvent("onreadystatechange",function(){document.readyState==="complete"&&a()})}if(window.addEventListener)window.addEventLi stener("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 content. 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.