WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

Go to page : 1, 2  Next

View previous topic View next topic Go down  Message [Page 1 of 2]

1Accespted Showing Categories as Tabs on Fri Mar 23, 2012 2:30 am

Unknown Data

avatar
Registered Member
Registered Member
Showing Categories as Tabs
Display the categories as clickable tabs on Forumotion


To display the forums, can be done i many different ways. Here will the categories be displayed as tabs, and when someone clicks a tab, will the categories forums be displayed, while the other categories (+forums) is hidden. The function itself is very simple, because we just a moving around existing elements and creating a couple of new ones.

The function will add a number of tabs on the top, according to the number of categories you got. A little box under those tabs will also be visible, with the content of the clicked tabs forums. And that's actually just about it.

To give a short description of what the Javascript does, then read the following points:
- We start out with creating the function ttf, which will display the clicked categories forums and hide the others. This is done by finding the forums which comes with the category, and set a created elements content, equal to those forums. We can find the categories forums, by looping through all the categories and give them all a number, an get them by using that number.
- The next part of code will activate, when the whole page is loaded. After that are we checking if this is the index front page, and if that is true, will we create all our elements (tabs and the content below the tabs) and give them an ID, so we are able to change thier content and style. As mentioned before, are we creating a loop, to make the number of tabs exact to the number of categories. When this is done are we moving the elements around, and then will the function be able to run.

Here you have the Javascript for the 4 different versions of forumotion boards:

Invision:
Code:
function tttf(n) {
var tables = document.getElementById("main-content").getElementsByTagName("table")[n].parentNode;
document.getElementById("ttid").innerHTML = tables.innerHTML;
}
$(function() {
if (location.pathname=="/forum" || location.pathname=="/") {
var tables = $(".index-box").get();
var tf = document.getElementById("main-content");
var ttab = document.createElement("ul");
ttab.setAttribute("id","ttcl");
for (i=0; i<tables.length; i++) {
tables[i].parentNode.style.display="none";
ttab.innerHTML += "<li><a href='javascript:void(0);' onclick='tttf(" + [i] + ")'>" + tables[i].previousSibling.childNodes[0].innerHTML + "</a></li>";
tf.parentNode.insertBefore(ttab,tf);
}
var tl = document.createElement("div");
tl.innerHTML = "<div id='ttid'>Click on the above tabs to choose a category!</div>";
tf.parentNode.insertBefore(tl,tf);
}
});
PHPBB2:
Code:
function tttf(n) {
var tables = $("#page-body table.forumline")[n];
document.getElementById("ttid").innerHTML = "<table class='forumline' width='100%' cellspacing='1' cellpadding='0' border='0'>" + tables.innerHTML + "</table>";
}
$(function() {
if (location.pathname=="/forum" || location.pathname=="/") {
var tables = $("#page-body table.forumline").get();
var tf = document.getElementById("page-body");
var ttab = document.createElement("ul");
ttab.setAttribute("id","ttcl");
for (i=0; i<tables.length; i++) {
if (i==tables.length-1) {
break;
}
tables[i].style.display="none";
ttab.innerHTML += "<li><a href='javascript:void(0);' onclick='tttf(" + [i] + ")'>" + document.getElementById('page-body').getElementsByTagName('h2')[i].innerHTML + "</a></li>";
tf.parentNode.insertBefore(ttab,tf);
}
var tl = document.createElement("div");
tl.innerHTML = "<div id='ttid'>Click on the above tabs to choose a category!</div>";
tf.parentNode.insertBefore(tl,tf);
}
});
PHPBB3:
Code:
function tttf(n) {
var tables = $("#main-content .forabg")[n];
document.getElementById("ttid").innerHTML = "<div class='forabg'>" + tables.innerHTML + "</div>";
}
$(function() {
if (location.pathname=="/forum" || location.pathname=="/") {
var tables = $(".forabg").get();
var tf = document.getElementById("main-content");
var ttab = document.createElement("ul");
ttab.setAttribute("id","ttcl");
for (i=0; i<tables.length; i++) {
tables[i].style.display="none";
ttab.innerHTML += "<li><a href='javascript:void(0);' onclick='tttf(" + [i] + ")'>" + tables[i].childNodes[0].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].innerHTML + "</a></li>";
tf.parentNode.insertBefore(ttab,tf);
}
var tl = document.createElement("div");
tl.innerHTML = "<div id='ttid'>Click on the above tabs to choose a category!</div>";
tf.parentNode.insertBefore(tl,tf);
}
});
PUNBB:
Code:
function tttf(n) {
var tables = document.getElementById("main-content").getElementsByTagName("table")[n].parentNode;
document.getElementById("ttid").innerHTML = tables.innerHTML;
}
$(function() {
if (location.pathname=="/forum" || location.pathname=="/") {
var tables = document.getElementById("main-content").getElementsByTagName("table");
var tf = document.getElementById("main-content");
var ttab = document.createElement("ul");
ttab.setAttribute("id","ttcl");
for (i=0; i<tables.length; i++) {
tables[i].parentNode.style.display="none";
tables[i].parentNode.previousSibling.style.display="none";
ttab.innerHTML += "<li><a href='javascript:void(0);' onclick='tttf(" + [i] + ")'>" + tables[i].parentNode.previousSibling.childNodes[0].childNodes[0].innerHTML + "</a></li>";
tf.parentNode.insertBefore(ttab,tf);
}
var tl = document.createElement("div");
tl.innerHTML = "<div id='ttid'>Click on the above tabs to choose a category!</div>";
tf.parentNode.insertBefore(tl,tf);
}
});
Remember to place the function so its either visible on your forum or on all pages. Both things should work.

CSS isn't necessary, because we're moving existing elements around, and creating elements that have a fine default style.
But! I've anyway writtin a little CSS, which will frame the tabs and the selected categories.
Code:
#ttcl {
display: block;
list-style-type: none;
margin: 10px 0px 10px 0px;
}
#ttcl li {
display: inline;
padding: 5px;
margin: 0px 0px 0px 5px;
background: #FFFFFF;
border-radius: 5px;
border: 1px solid #000000;
}
#ttid {
display: block;
background: #FFFFFF;
border-radius: 5px;
border: 1px solid #000000;
padding: 5px;
margin: 5px;
}
Enjoy!

*If you are using PHPBB2 or PUNBB and have edited the templates for categories, will the function properly not work.

Notice : These tutorials are copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

http://woops.dk

2Accespted Re: Showing Categories as Tabs on Fri Mar 30, 2012 2:56 am

promotemeup


Registered Member
Registered Member
Doesn't work on my invision board: http://www.codingschool.co.cc or http://www.coding-school.co.cc = Please Help =

http://www.promotemeup.co.cc

3Accespted Re: Showing Categories as Tabs on Fri Mar 30, 2012 3:43 am

Unknown Data

avatar
Registered Member
Registered Member
Have you enabled javascript, before creating a javascript fil for the code?

http://woops.dk

4Accespted Re: Showing Categories as Tabs on Fri Mar 30, 2012 3:44 am

promotemeup


Registered Member
Registered Member
Yes, i've javascript enabled.

http://www.promotemeup.co.cc

5Accespted Re: Showing Categories as Tabs on Fri Mar 30, 2012 3:55 am

promotemeup


Registered Member
Registered Member
hey, works now!

But please can u tell how to change the button color and text color ?

Thank you! Very Happy

http://www.promotemeup.co.cc

6Accespted Re: Showing Categories as Tabs on Fri Mar 30, 2012 6:09 pm

Unknown Data

avatar
Registered Member
Registered Member
Edit the given CSS, by usling the "color" property.

http://woops.dk

7Accespted Re: Showing Categories as Tabs on Tue Apr 03, 2012 12:22 pm

ankillien

avatar
Administrator
Administrator
Tutorial Accepted

8Accespted Re: Showing Categories as Tabs on Wed Apr 11, 2012 8:12 pm

Matti

avatar
Registered Member
Registered Member
I tried this for PunBB and seems not to work i have put the code to Javascript codes management and i can't see any different.

http://csshelp.forumotion.net/

9Accespted Re: Showing Categories as Tabs on Wed Apr 11, 2012 8:35 pm

Unknown Data

avatar
Registered Member
Registered Member
Have you changee the templates? Otherwise URL please.

http://woops.dk

10Accespted Re: Showing Categories as Tabs on Fri Jul 13, 2012 11:16 am

aldoani


Registered Member
Registered Member
Good.. Thank U

http://dowan.7olm.org/

11Accespted Re: Showing Categories as Tabs on Mon Aug 06, 2012 11:02 am

PandahFish


Registered Member
Registered Member
Really awesome tutorial Wink

12Accespted Re: Showing Categories as Tabs on Sun Aug 19, 2012 12:01 pm

cboy123


Registered Member
Registered Member
Hello, I got a problem here



Could you help me with this overlapping problem?

13Accespted Re: Showing Categories as Tabs on Sun Aug 19, 2012 1:43 pm

ankillien

avatar
Administrator
Administrator
Can you post link to your forum please?

14Accespted Re: Showing Categories as Tabs on Mon Aug 20, 2012 2:05 pm

cboy123


Registered Member
Registered Member
tnmaa.forumotion
BTW, it is on phpbb3 and I am not the founder of the forum.
Please delete the link afterwards thanks.

Whoa... I cannot post links but it is Dot com at the end.

15Accespted Re: Showing Categories as Tabs on Mon Aug 20, 2012 5:36 pm

ankillien

avatar
Administrator
Administrator
I don't see tabs on your forum. Have you removed them?

16Accespted Re: Showing Categories as Tabs on Tue Aug 21, 2012 8:49 am

cboy123


Registered Member
Registered Member
Yes I removed them since it burns in the eyes seeing this style.


I think this picture is enough.

17Accespted Re: Showing Categories as Tabs on Thu Aug 23, 2012 10:35 pm

ankillien

avatar
Administrator
Administrator
Sorry, the picture is not enough.
I need to see it in action to be able to catch the error and solve it. You can set it up on a test forum, if yo have.

18Accespted Re: Showing Categories as Tabs on Sat Aug 25, 2012 5:45 am

cboy123


Registered Member
Registered Member
cboy123demoforum.forumtl DOT com
That's it.

19Accespted Re: Showing Categories as Tabs on Thu Aug 30, 2012 5:31 pm

cboy123


Registered Member
Registered Member
BUMP for my problem

20Accespted Re: Showing Categories as Tabs on Tue Sep 25, 2012 2:16 pm

kaynil

avatar
Registered Member
Registered Member
Hi. I logged in after so much to thank you guys for all the tutorials.
I have a punBB, so I skipped this entry thinking it wouldn't work, but I will go according to one of the coments here and try with the Invision version. cheers

21Accespted Re: Showing Categories as Tabs on Tue Sep 25, 2012 3:24 pm

Sanket

avatar
Administrator
Administrator
Welcome back.

http://www.webartzforum.com

22Accespted Re: Showing Categories as Tabs on Thu Sep 27, 2012 3:05 am

Rii SouL

avatar
Registered Member
Registered Member
I tried this on my forum but it isn't working.

My version is punbb, url is:
Nevermind about url, can't post it yet lol
If needed please let me know how I'd post it.

I believe I have not altered the templates since I really don't know much about this and I don't want to damage anything Embarassed lol

Anyone able to help me? would greatly appreciate it. Wink

Thank you in advance,
Rii


Sorry, I found more information regading this topic that might be useful to me. This post can be ignored for the time being, I will come back and let you know if I was able to get it working. Smile



Last edited by Rii SouL on Thu Sep 27, 2012 11:34 pm; edited 1 time in total (Reason for editing : Found more information on topic.)

http://the-lost-souls.forumotion.com

23Accespted Re: Showing Categories as Tabs on Sun Oct 07, 2012 11:12 am

eTmaxD


Registered Member
Registered Member
Thanks for the tutorial.... Very Happy
If i want to have a category displayed by standard what i have to do?

Also i would like to ask if its ok to not use 'categories' but 'forums'...(dont know what are the differences)

http://etmaxd.forumgreek.com/

24Accespted Re: Showing Categories as Tabs on Mon Dec 10, 2012 6:21 pm

GreyPhantom


Registered Member
Registered Member
When I use that , it seems to be like this : http://prntscr.com/lt613

25Accespted Re: Showing Categories as Tabs on Mon Dec 10, 2012 9:36 pm

blaze21


Registered Member
Registered Member
Can't this " Click on the above tabs to choose a category " be cut from code? How do i make it disappear ? It always has to be clicked to show categories. How do i get rid of it?

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 2]

Go to page : 1, 2  Next

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