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 : Previous  1, 2

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

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

Unknown Data

avatar
Registered Member
Registered Member
First topic message reminder :

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

26Accespted 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?

27Accespted Re: Showing Categories as Tabs on Fri Dec 28, 2012 9:02 pm

GreyPhantom


Registered Member
Registered Member
I don't like how it works, I hope it work like Tabbed Menu in MyBB Forum where the first category will be the first category to appear in forum load page.

28Accespted Re: Showing Categories as Tabs on Tue Feb 19, 2013 3:03 am

Derri


Registered Member
Registered Member
Is there a way to center the tabs?

29Accespted Re: Showing Categories as Tabs on Mon Feb 25, 2013 6:58 pm

zenzo


Registered Member
Registered Member
can you highlight where to insert the tab

please give me a sample of div id to insert

thanks

30Accespted Re: Showing Categories as Tabs on Sat Mar 02, 2013 1:43 am

Sanket

avatar
Administrator
Administrator
What do you mean?

http://www.webartzforum.com

31Accespted Re: Showing Categories as Tabs on Sat Mar 02, 2013 1:53 am

Teknas

avatar
Registered Member
Registered Member
Sanket, I think he is asking if the Original Poster could highlight where the code needs to be added.

http://gaminghub.forumotion.com

32Accespted Re: Showing Categories as Tabs on Fri May 17, 2013 8:52 pm

Petermichael


Registered Member
Registered Member
nice dude ..

33Accespted Re: Showing Categories as Tabs on Thu Jan 30, 2014 4:58 pm

ashik4u


Registered Member
Registered Member
Is there any way to make a tab default while opening the site?

34Accespted Re: Showing Categories as Tabs on Thu Mar 20, 2014 8:25 pm

fraNNNta


Registered Member
Registered Member
I love that

Sponsored content


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

Go to page : Previous  1, 2

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