Forum Categories as Tabs
+6
Sanket
enlil
Omu
LGforum
jemykirti
FL.ux
10 posters
Page 1 of 1
Forum Categories as Tabs
How can i display my forum categories in to tabs???
like here: http://boardtalk.org/forum/index.php?style=10
pls... help....
like here: http://boardtalk.org/forum/index.php?style=10
pls... help....
FL.ux- Forumember
- Posts : 842
Reputation : 18
Language : I hope I could be a FM staff :'(
Location : I shall fly to the subterranean sky.
Re: Forum Categories as Tabs
i'd like to know how to do that too. Somebody help..!
jemykirti- Forumember
- Posts : 37
Reputation : 1
Language : english,indonesia,chinese
Re: Forum Categories as Tabs
There's a load of jQuery plugins out there, just a google search away.
There's a discussion currently about it here: http://www.avacweb.com/t170-categories-as-tabs
There's a discussion currently about it here: http://www.avacweb.com/t170-categories-as-tabs
LGforum- Hyperactive
- Posts : 2265
Reputation : 264
Language : English
Location : UK
Re: Forum Categories as Tabs
Easy, let me test it
#Edit: I finished the code Now I make my homework , yes i know what you want to say, but stay tunned, tommorow or in this night i post the full code.
#2 Edit:
Step1: First of all go to: ACP > Display > Generalities:
Step2 : Add CSS code in ACP > Display > Colors > CSS Stylesheet:
For every iframe code edit just:
and add this if you need, but remember to edit it.
For another users:
I made this tutorial in my language so, please don't try to post it without my accord.
Send me a PM with your website/ forum if you want to use it.
If you already posted it please add my copyright after tutorial
#Edit: I finished the code Now I make my homework , yes i know what you want to say, but stay tunned, tommorow or in this night i post the full code.
#2 Edit:
Step1: First of all go to: ACP > Display > Generalities:
- Code:
<style>
.forabg {
display: none;
position: absolute;}
</style>
<script type="text/javascript" src="http://darkspectre.bravehost.com/online_jquery_js1.js"></script>
<script type="text/javascript" src="http://darkspectre.bravehost.com/online_jquery_js2.js"></script>
<script type='text/javascript'>>
var CopyrightNotice='Categories as tabs . Tutorial by Hoppe @ SoftDesign. Copyright SoftDesign. All right reserved. . Use and modification of this script is not allowed without this entire copyright notice in the original, copied, or modified script. No distribution without consent.';
$(function() {
$("#example-one").organicTabs();
$("#example-two").organicTabs({
"speed": 200
});
});
</script>
<div id="example-two">
<div id="menu_on_sistem">
<ul class="nav">
<li class="nav-one"><a href="#tab_nr1" class="current">Your first category</a></li>
<li class="nav-two"><a href="#tab_nr2">Second Category</a></li>
<li class="nav-three"><a href="#tab_nr3">New Category</a></li>
<li class="nav-four last"><a href="#tab_nr4">Test Category</a></li>
</ul>
<div class="clear"></div>
</div>
<div class="list-wrap">
<div id="tab_nr1">
<iframe border="none" width="700" src="/c1-"></iframe>
</div>
<div id="tab_nr2" class="hide">
<iframe border="none" width="700" src="/c2-"></iframe>
</div>
<div id="tab_nr3" class="hide">
<iframe border="none" width="700" src="/c3-"></iframe>
</div>
<div id="tab_nr4" class="hide">
<iframe border="none" width="700" src="/c4-"></iframe>
</div>
</div>
Step2 : Add CSS code in ACP > Display > Colors > CSS Stylesheet:
- Code:
.hide { position: absolute; top: -9999px; left: -9999px; }
.nav { margin: 0; padding: 0; }
#example-two{margin-top: 10px;}
#example-two .list-wrap { background: #e5f1f9; padding: 10px;}
#example-two ul { list-style: none; }
#example-two ul li a { display: block; border-bottom: 1px solid #e5f1f9; padding: 4px; color: #e5f1f9; }
#example-two ul li a:hover { background: #333; color: #999999; }
#example-two .nav li { width: auto; float: left; margin: 0 10px 0 0; }
#example-two .nav li.last { margin-right: 0; }
#example-two .nav li a{ display: block; padding: 5px; background: #e5f1f9; color: #666666; font-size: 10px; text-align: center; border: 0;
-moz-border-radius: 7px 7px 0 0;
-webkit-border-radius: 7px 7px 0 0;
border-radius: 7px 7px 0 0;
border: 1px solid #1675bc;
border-bottom: 0px;}
.list-wrap{
-moz-border-radius: 0 10px 10px 10px;
-webkit-border-radius: 0 10px 10px 10px;
border-radius: 0 10px 10px 10px;
border: 1px solid #1675bc;}
#example-two li a.current,#example-two li a.current:hover {
color: #1675bc;
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
background: linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
}
#example-two .nav li a:hover, #example-two .nav li a:focus {background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
}
#menu_on_sistem {
display: inline-block;
position: relative !important;
bottom: -1px;}
.profil_tab{
font-size: 12px;
top: -8px;
position: relative;}
.profil_tab td{padding-right: 30px !important;}
For every iframe code edit just:
- Code:
width="700"
and add this if you need, but remember to edit it.
- Code:
height="700"
For another users:
I made this tutorial in my language so, please don't try to post it without my accord.
Send me a PM with your website/ forum if you want to use it.
If you already posted it please add my copyright after tutorial
- Code:
Tutorial by Hoppe - [url=http://help.forumotion.com/t104506-forum-categories-as-tabs]See this link[/a]
Re: Forum Categories as Tabs
A few things about that above.
1. There is no need to load another jQuery source into the page.
2. You can't copyright a script which isn't yours. Unless you did right the script here: http://darkspectre.bravehost.com/online_jquery_js2.js
and 3. Your using Iframes, a lot of them. Thats loading ALOT of pages, so it will take AGES to load, and also the forumotion request limit will be hit very quickly.
(on another note, I think if i find a nice tabify code, I might make a more plausible way of doing it on FM)
1. There is no need to load another jQuery source into the page.
2. You can't copyright a script which isn't yours. Unless you did right the script here: http://darkspectre.bravehost.com/online_jquery_js2.js
and 3. Your using Iframes, a lot of them. Thats loading ALOT of pages, so it will take AGES to load, and also the forumotion request limit will be hit very quickly.
(on another note, I think if i find a nice tabify code, I might make a more plausible way of doing it on FM)
LGforum- Hyperactive
- Posts : 2265
Reputation : 264
Language : English
Location : UK
Re: Forum Categories as Tabs
sorry but... i really don't like it....
as what LG said... Request Limit Exceeded...
can you help me with this LG??
Last edited by FL.ux on February 13th 2012, 11:26 am; edited 1 time in total
FL.ux- Forumember
- Posts : 842
Reputation : 18
Language : I hope I could be a FM staff :'(
Location : I shall fly to the subterranean sky.
Re: Forum Categories as Tabs
hi,
an example of script to use on index :
otherway, to my taste it's bad to do this ( you need to browse all category to see new messages )
an example of script to use on index :
- Code:
$(function() {
$("div.table-title").closest("div.forabg").addClass("cat-table").first().before('<div id="cat-tabs"></div>');
$(".cat-table:not(:first)").hide();
$("div.table-title h2").each(function() {
$("#cat-tabs").append('<div class="ct-item">' + $(this).text() + "</div>")
});
$("#cat-tabs .ct-item").click(function() {
$("#cat-tabs .ct-abled").removeClass("ct-abled");
$(this).addClass("ct-abled");
$(".cat-table").not($(".cat-table").eq($("#cat-tabs .ct-item").index(this)).slideDown(500)).slideUp(500)
}).first().addClass("ct-abled")
});
- Code:
#cat-tabs { text-align: center; margin: 10px auto; }
#cat-tabs .ct-item { display: inline; background: blue; color: #fff; margin: 5px; padding: 5px; }
#cat-tabs .ct-abled { color: blue; background: #fff; }
otherway, to my taste it's bad to do this ( you need to browse all category to see new messages )
enlil- New Member
- Posts : 16
Reputation : 5
Language : c
Re: Forum Categories as Tabs
FL.ux wrote:that code sucks....
Mind your language you are using with someone who just tried to help you.
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: Forum Categories as Tabs
sorry it didn't work...
FL.ux- Forumember
- Posts : 842
Reputation : 18
Language : I hope I could be a FM staff :'(
Location : I shall fly to the subterranean sky.
Re: Forum Categories as Tabs
well it works for me :
if you really have phpbb3, a possibility of reason for it not working on your forum could be of you having another index hierarchy ( the script works for the index hierarchy of this forum ).
if you really have phpbb3, a possibility of reason for it not working on your forum could be of you having another index hierarchy ( the script works for the index hierarchy of this forum ).
enlil- New Member
- Posts : 16
Reputation : 5
Language : c
Re: Forum Categories as Tabs
i also got it to work.. here..
but not on my forum... anyone has an idea why??
but not on my forum... anyone has an idea why??
FL.ux- Forumember
- Posts : 842
Reputation : 18
Language : I hope I could be a FM staff :'(
Location : I shall fly to the subterranean sky.
Re: Forum Categories as Tabs
without your forum address I can't know ^^
I've done another version with more options ( and which should work with each forum version ).
The script to add on index :
all you need to modify ( minus the css ) is in the part :
=> safe : can take values true ( html used in the title of a tab won't be processed ) or false ( html will be processed, for example this way you can add an image in a tab ( but you have to watch out to not do a mess in the html ( example : not closing tag would cause issues ) )
=> show/hide : duration is in millisecond and you can look the different types here
=> event : the event to watch to activate a tab ( for example mouseenter is when mouse enter in a tab, and click is when you click on the tab )
=> defaut : it's the default tab, it will be showed if the tab hasn't ever be changed, or if save is set to false
=> add : to add a tab, you can use it several way.
=> conteneur_tabs : you add ( one or several ) place with the tabs, the first element of the function is what method to use ( from some of these, before, after, append, prepend should be enough ), and the second element is what element is the "base" to wich apply the method ( in the example it's the method "before" and the base element ".cat-table:first", ".cat-table" is wrapped arround the categories, so ".cat-table:first" means the first category, and so it adds the part with the tabs "before" the first category )
Edit : the script is wronged by the post system, you can get it right here.
I've done another version with more options ( and which should work with each forum version ).
The script to add on index :
- Code:
$(function(){
$(function(){
/* save the current open tab for next opening of the page */
save= true;
/* html is ok ( false ) in title of a tabs */
safe= true;
/* type ( slideDown, fadeIn, show ) et duration ( ms ) for apparition */
show= ["slideDown",500];
/* idem but for disappearance */
hide= ["slideUp",500];
// event to change tab ( mouseenter, click, ... ) */
event= "click";
/* adding of tabs ( and choosing the one by default ) */
defaut= add("All");
add("Part 1",[0,1]);
add("Part 2",[2,3]);
add(4);
add("Category 6",5);
/* adding parent element of tabs */
conteneur_tabs("before",".cat-table:first");
});
$(function(){var a;if(save&&window.localStorage&&(a=localStorage.getItem("tabs"))&&(a=u(a)))defaut=a;$(".cat-table").filter(function(a){return!z(defaut,a)}).hide();for(a=0;a<v.length;a++)$(".cat-tabs").append('<div class="ct-item'+(v[a]==defaut?" ct-active":"")+'">'+(safe?v[a][0].replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,"""):v[a][0])+"</div>");$(".cat-tabs").on(event,".ct-item",function(){$(".cat-tabs .ct-active").removeClass("ct-active");var a=$(this).parent().children().index(this);
$(".cat-tabs").each(function(){$(this).children().eq(a).addClass("ct-active")});var c=v[a];$(".cat-table").not($(".cat-table").filter(function(a){return z(c,a)})[show[0]](show[1]))[hide[0]](hide[1]);save&&window.localStorage&&localStorage.setItem("tabs",JSON.stringify(c))})});
var hide,show,save,safe,event,timeslide,defaut,v=[],w=["th.secondarytitle","div.table-title h2","div.page-title h2","div.maintitle h2"],x=["table","div.forabg","div.main-head","div.borderwrap"],y=[null,null,"div.main-content",null],ver=function(){return $("#phpbb").length?1:$("#pun-intro").length?2:$("#ipbwrapper").length?3:0},add=function(a,b){if(1==arguments.length)if("number"==typeof a)if(0<=a&&$(w[ver()]).length>=a+1)a=$(w[ver()]).eq(b=a).text();else return;else if("string"==typeof a)for(var b=
[],c=0;c<$(w[ver()]).length;c++)b.push(c);v.push([a,"number"==typeof b?[b]:b]);return v[v.length-1]},u=function(a){for(var b=0;b<v.length;b++)if(JSON.stringify(v[b])==a)return v[b];return!1},conteneur_tabs=function(a,b){$(b)[a]('<div class="cat-tabs"></div>')},z=function(a,b){for(var c=0;c<a[1].length;c++)if(a[1][c]==b)return!0;return!1};$(w[ver()]).closest(x[ver()]).each(function(){$(this).add(y[ver()]).wrapAll('<div class="cat-table" />')});
});
- Code:
.cat-tabs {
text-align: center;
margin: 10px auto;
}
.ct-item {
display: inline;
padding: 5px;
margin: 5px;
background: red;
color: blue;
font-weight: bold;
}
.ct-active {
color: red;
background: blue;
}
all you need to modify ( minus the css ) is in the part :
- Code:
/* save the current open tab for next opening of the page */
save= true;
/* html is ok ( false ) in title of a tabs */
safe= true;
/* type ( slideDown, fadeIn, show ) et duration ( ms ) for apparition */
show= ["slideDown",500];
/* idem but for disappearance */
hide= ["slideUp",500];
// event to change tab ( mouseenter, click, ... ) */
event= "click";
/* adding of tabs ( and choosing the one by default ) */
defaut= add("All");
add("Part 1",[0,1]);
add("Part 2",[2,3]);
add(4);
add("Category 6",5);
/* adding parent element of tabs */
conteneur_tabs("before",".cat-table:first");
=> safe : can take values true ( html used in the title of a tab won't be processed ) or false ( html will be processed, for example this way you can add an image in a tab ( but you have to watch out to not do a mess in the html ( example : not closing tag would cause issues ) )
=> show/hide : duration is in millisecond and you can look the different types here
=> event : the event to watch to activate a tab ( for example mouseenter is when mouse enter in a tab, and click is when you click on the tab )
=> defaut : it's the default tab, it will be showed if the tab hasn't ever be changed, or if save is set to false
=> add : to add a tab, you can use it several way.
- add(#number) : will add a tab with the #th category ( the first category is the 0 ) and the title of the category will be the title of the tab.
- add("string") : will add a tab named string which show all the categories.
- add("string",#number) : will add a tab with the #th category and the title of the tab will be string.
- add("string",[#number1,#number2,#numberx]) : will add a tab named string which when activated show categories #1, #2, #x
( when I use #something I mean it's an integer )
so if you have 5 categories and only want to show them one by one ( with the first one as default ) and use their title, you will only need to put :- Code:
defaut= add(0);
add(1);
add(2);
add(3);
add(4);
=> conteneur_tabs : you add ( one or several ) place with the tabs, the first element of the function is what method to use ( from some of these, before, after, append, prepend should be enough ), and the second element is what element is the "base" to wich apply the method ( in the example it's the method "before" and the base element ".cat-table:first", ".cat-table" is wrapped arround the categories, so ".cat-table:first" means the first category, and so it adds the part with the tabs "before" the first category )
Edit : the script is wronged by the post system, you can get it right here.
Last edited by enlil on February 14th 2012, 9:11 pm; edited 1 time in total
enlil- New Member
- Posts : 16
Reputation : 5
Language : c
Re: Forum Categories as Tabs
Hmmm... here's my forum url..
didyouknow.forumtl.com
didyouknow.forumtl.com
FL.ux- Forumember
- Posts : 842
Reputation : 18
Language : I hope I could be a FM staff :'(
Location : I shall fly to the subterranean sky.
Re: Forum Categories as Tabs
I've tried things and this :
http://didyouknow.forumtl.com/99827.js
nuke the " $(function(){...}) " behavior, if I remove it that works ok :
http://pastehtml.com/view/bo4c8b6e5.html
To correct http://didyouknow.foruemtl.com/99827.js you can replace :
http://didyouknow.forumtl.com/99827.js
nuke the " $(function(){...}) " behavior, if I remove it that works ok :
http://pastehtml.com/view/bo4c8b6e5.html
To correct http://didyouknow.foruemtl.com/99827.js you can replace :
- Code:
document.getElementById("text_editor_textarea").placeholder = "Write something here. . ."
- Code:
if($("#text_editor_textarea").length) $("#text_editor_textarea")[0].placeholder= "Write something here. . ."
Last edited by enlil on February 14th 2012, 2:06 pm; edited 1 time in total
enlil- New Member
- Posts : 16
Reputation : 5
Language : c
Re: Forum Categories as Tabs
Very Easy,
Go To ACP---->Display--->Homepage----->Structure and Hierarchy---->Select There
HOPE THIS HELPS
Go To ACP---->Display--->Homepage----->Structure and Hierarchy---->Select There
HOPE THIS HELPS
Re: Forum Categories as Tabs
gamershotspot wrote:Very Easy,
Go To ACP---->Display--->Homepage----->Structure and Hierarchy---->Select There
HOPE THIS HELPS
Please don't use bold. Please keep to the default text. This is reserved for the staff for moderation. |
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Forum Categories as Tabs
This:
The script will need to be in a DOM ready function, it will need all categories to be loaded on the page to work.
- Code:
if(document.getElementById('text_editor_textarea')){document.getElementById('text_editor_textarea').placeholder= "Write something here. . .";}
The script will need to be in a DOM ready function, it will need all categories to be loaded on the page to work.
LGforum- Hyperactive
- Posts : 2265
Reputation : 264
Language : English
Location : UK
Re: Forum Categories as Tabs
if you are referring to my code, this :
- Code:
$(function(){ /* code */ });
- Code:
$(document).ready(function(){ /* code */ });
enlil- New Member
- Posts : 16
Reputation : 5
Language : c
Re: Forum Categories as Tabs
I know, but I thought you were saying to the OP to get rid of it, this is the sentence that confused me:
"nuke the " $(function(){...}) " behavior,"
Guess I read it wrong or something.
"nuke the " $(function(){...}) " behavior,"
Guess I read it wrong or something.
LGforum- Hyperactive
- Posts : 2265
Reputation : 264
Language : English
Location : UK
Re: Forum Categories as Tabs
enlil wrote:if you are referring to my code, this :Is the shorthand way to write :
- Code:
$(function(){ /* code */ });
So it's already done ^^
- Code:
$(document).ready(function(){ /* code */ });
I follow all the step you posted but nothing happened. Can you please make me a code for this forum categories as a TAB...
Forum link: ->> [url=marquel.forumtl.com/]marquel.forumtl.com/[/url]
THanks
olokers- New Member
- Posts : 14
Reputation : 1
Language : Tagalog
Re: Forum Categories as Tabs
what is index? is it template? I've phpbb3, how can i do it on my forum? check it out : http://www.promotemeup.co.cc --- it is phpbb3 , how to do it?
Re: Forum Categories as Tabs
enlil wrote:hi,
an example of script to use on index :And the css :
- Code:
$(function() {
$("div.table-title").closest("div.forabg").addClass("cat-table").first().before('<div id="cat-tabs"></div>');
$(".cat-table:not(:first)").hide();
$("div.table-title h2").each(function() {
$("#cat-tabs").append('<div class="ct-item">' + $(this).text() + "</div>")
});
$("#cat-tabs .ct-item").click(function() {
$("#cat-tabs .ct-abled").removeClass("ct-abled");
$(this).addClass("ct-abled");
$(".cat-table").not($(".cat-table").eq($("#cat-tabs .ct-item").index(this)).slideDown(500)).slideUp(500)
}).first().addClass("ct-abled")
});you can improve the css. on this forum it looks like this :
- Code:
#cat-tabs { text-align: center; margin: 10px auto; }
#cat-tabs .ct-item { display: inline; background: blue; color: #fff; margin: 5px; padding: 5px; }
#cat-tabs .ct-abled { color: blue; background: #fff; }
otherway, to my taste it's bad to do this ( you need to browse all category to see new messages )
http://tiki.makingforum.com/
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Similar topics
» Tabs Categories
» [Help]Categories As Tabs
» [help] categories as tabs [PunBB]
» Forum Categories as tabs? PHPBB3?
» How do you make categories as tabs?
» [Help]Categories As Tabs
» [help] categories as tabs [PunBB]
» Forum Categories as tabs? PHPBB3?
» How do you make categories as tabs?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum