The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Forum Categories as Tabs

View previous topic View next topic Go down

Forum Categories as Tabs

Post by FL.ux on February 12th 2012, 2:37 pm

How can i display my forum categories in to tabs???

like here: http://boardtalk.org/forum/index.php?style=10

pls... help.... Crying or Very sad Crying or Very sad

FL.ux
Forumember

Male Posts : 842
Reputation : 18
Language : I hope I could be a FM staff :'(
Location : I shall fly to the subterranean sky.

Back to top Go down

Re: Forum Categories as Tabs

Post by jemykirti on February 12th 2012, 3:29 pm

i'd like to know how to do that too. Somebody help..!

jemykirti
Forumember

Posts : 37
Reputation : 1
Language : english,indonesia,chinese

Back to top Go down

Re: Forum Categories as Tabs

Post by LGforum on February 12th 2012, 4:04 pm

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

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Re: Forum Categories as Tabs

Post by Omu on February 12th 2012, 4:36 pm

Easy, let me test it Smile
#Edit: I finished the code Smile 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]

Omu
Active Poster

Male Posts : 1019
Reputation : 86
Language : Romanian, English, French
Location : Romania

http://supportdrops.com/

Back to top Go down

Re: Forum Categories as Tabs

Post by LGforum on February 12th 2012, 7:07 pm

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)

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Re: Forum Categories as Tabs

Post by FL.ux on February 12th 2012, 11:39 pm


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

Male Posts : 842
Reputation : 18
Language : I hope I could be a FM staff :'(
Location : I shall fly to the subterranean sky.

Back to top Go down

Re: Forum Categories as Tabs

Post by enlil on February 13th 2012, 12:09 am

hi,


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")
});
And the css :

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; }
you can improve the css. on this forum it looks like this :


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

Back to top Go down

Re: Forum Categories as Tabs

Post by Sanket on February 13th 2012, 8:38 am

@FL.ux wrote:that code sucks....


Mind your language you are using with someone who just tried to help you.

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: Forum Categories as Tabs

Post by FL.ux on February 13th 2012, 11:04 am

sorry it didn't work...

Sad

FL.ux
Forumember

Male Posts : 842
Reputation : 18
Language : I hope I could be a FM staff :'(
Location : I shall fly to the subterranean sky.

Back to top Go down

Re: Forum Categories as Tabs

Post by enlil on February 13th 2012, 1:20 pm

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

enlil
New Member

Posts : 16
Reputation : 5
Language : c

Back to top Go down

Re: Forum Categories as Tabs

Post by FL.ux on February 13th 2012, 11:46 pm

i also got it to work.. here..

but not on my forum... anyone has an idea why??

FL.ux
Forumember

Male Posts : 842
Reputation : 18
Language : I hope I could be a FM staff :'(
Location : I shall fly to the subterranean sky.

Back to top Go down

Re: Forum Categories as Tabs

Post by enlil on February 14th 2012, 12:46 am

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 :

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,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"):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" />')});
   
});
With the CSS :

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");
=> save : can take values true ( the last tab showed will be saved for next opening of the page ) or false ( it will always be the default tab that will be showed )

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

Back to top Go down

Re: Forum Categories as Tabs

Post by FL.ux on February 14th 2012, 10:40 am

Hmmm... here's my forum url..

didyouknow.forumtl.com

FL.ux
Forumember

Male Posts : 842
Reputation : 18
Language : I hope I could be a FM staff :'(
Location : I shall fly to the subterranean sky.

Back to top Go down

Re: Forum Categories as Tabs

Post by enlil on February 14th 2012, 2:02 pm

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 :

Code:
document.getElementById("text_editor_textarea").placeholder = "Write something here. . ."
By :

Code:
if($("#text_editor_textarea").length) $("#text_editor_textarea")[0].placeholder= "Write something here. . ."
( the script was assuming that there was a #text_editor_textarea on each page, so when there wasn't one it caused an error which broke the " $(function(){...}) " functionnality )


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

Back to top Go down

Re: Forum Categories as Tabs

Post by gamershotspot on February 14th 2012, 2:05 pm

Very Easy,

Go To ACP---->Display--->Homepage----->Structure and Hierarchy---->Select There


HOPE THIS HELPS Very Happy

gamershotspot
New Member

Posts : 12
Reputation : 2
Language : English

http://www.gamershotspot.forumotion.com

Back to top Go down

Re: Forum Categories as Tabs

Post by Nera. on February 14th 2012, 6:07 pm

@gamershotspot wrote:Very Easy,

Go To ACP---->Display--->Homepage----->Structure and Hierarchy---->Select There


HOPE THIS HELPS Very Happy

Please don't use bold. Please keep to the default text. This is reserved for the staff for moderation.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Re: Forum Categories as Tabs

Post by LGforum on February 14th 2012, 7:34 pm

This:
Code:

  if(document.getElementById('text_editor_textarea')){document.getElementById('text_editor_textarea').placeholder= "Write something here. . .";}
Will be fine.

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

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Re: Forum Categories as Tabs

Post by enlil on February 14th 2012, 8:54 pm

if you are referring to my code, this :

Code:
$(function(){ /* code */ });
Is the shorthand way to write :

Code:
$(document).ready(function(){ /* code */ });
So it's already done ^^

enlil
New Member

Posts : 16
Reputation : 5
Language : c

Back to top Go down

Re: Forum Categories as Tabs

Post by LGforum on February 14th 2012, 9:12 pm

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.

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Re: Forum Categories as Tabs

Post by olokers on February 19th 2012, 1:54 am

@enlil wrote:if you are referring to my code, this :

Code:
$(function(){ /* code */ });
Is the shorthand way to write :

Code:
$(document).ready(function(){ /* code */ });
So it's already done ^^

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 : 13
Reputation : 1
Language : Tagalog

Back to top Go down

Re: Forum Categories as Tabs

Post by promotemeup on February 26th 2012, 9:26 am

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?

promotemeup
Forumember

Male Posts : 147
Reputation : 11
Language : English
Location : India, Gujarat, Surat

http://www.promotemeup.forumotion.com

Back to top Go down

Re: Forum Categories as Tabs

Post by Nera. on February 26th 2012, 11:08 am

@enlil wrote:hi,


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")
});
And the css :

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; }
you can improve the css. on this forum it looks like this :


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

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum