Category Tabs
4 posters
Page 1 of 1
Category Tabs
Hi,
Since Ange is not around I can't ask for his help regarding his Category Tabs tutorial. So I'll ask for some assistance here. Anyways, I used to have the script running in my forum (phpBB3) but all of sudden it stopped working but the weird part that it's still working on my test forum. I can't seem to find what's interfering with it.
Since Ange is not around I can't ask for his help regarding his Category Tabs tutorial. So I'll ask for some assistance here. Anyways, I used to have the script running in my forum (phpBB3) but all of sudden it stopped working but the weird part that it's still working on my test forum. I can't seem to find what's interfering with it.
- Code:
$(function() {
// automatically detects the version
var version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('div.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : document.getElementById('fa_edge') ? 4 : 'badapple';
if (version == 'badapple') {
if (window.console && console.warn) console.warn('The plugin "fa_tabs" is not supported for your forum version.');
return;
}
window.fa_tabs = {
active : my_getcookie('fa_tab_active') || 0, // active tab
list : [], // category list
version : version, // forum version
// language settings
lang : {
title : 'Select a Category',
placeholder : 'Category',
all : 'All'
},
// selectors
select : {
content : !version ? '#content-container td:has(> img[height="5"])' : 'main-content',
category : ['.forumline:has(.secondarytitle)', '.forabg', '.main:has(.tcr) .main-head', '.borderwrap:has(.index-box)', '.forum-category'][version]
},
// function for changing the active category
change : function(index) {
my_setcookie('fa_tab_active', index); // save the active tab to a cookie
// actions to run if the tab is not "all"
if (index != 'all') {
if (fa_tabs.active == 'all') {
fa_tabs.tab[0].previousSibling.className = '';
fa_tabs.display('none');
} else {
fa_tabs.tab[fa_tabs.active].className = '';
fa_tabs.list[fa_tabs.active].style.display = 'none';
}
fa_tabs.tab[index].className = 'fa_tabactif';
fa_tabs.list[index].style.display = '';
if (fa_tabs.version == 2) {
if (fa_tabs.active != 'all') fa_tabs.list[fa_tabs.active].nextSibling.style.display = 'none';
fa_tabs.list[index].nextSibling.style.display = '';
}
} else {
if (fa_tabs.active != 'all') fa_tabs.tab[fa_tabs.active].className = '';
fa_tabs.tab[0].previousSibling.className = 'fa_tabactif';
fa_tabs.display('');
}
fa_tabs.active = index;
},
// change the display of all categories
display : function(state) {
for (var i = 0, j = fa_tabs.list.length; i < j; i++) {
fa_tabs.list[i].style.display = state;
if (version == 2) fa_tabs.list[i].nextSibling.style.display = state;
};
},
// stop tab scrolling
stop : function() {
if (fa_tabs.interval) {
window.clearInterval(fa_tabs.interval);
fa_tabs.interval = null;
}
},
// scroll tablist
scroll : function(by, max) {
if (!fa_tabs.interval) {
var node = document.getElementById('fa_tablist').firstChild.firstChild;
fa_tabs.interval = window.setInterval(function() {
var margin = +node.style.marginLeft.replace(/px/, '');
(by < 0 && margin <= max) || (by > 0 && margin >= max) ? fa_tabs.stop() : node.style.marginLeft = margin + by + 'px';
}, 1);
}
}
};
// startup variables
var frag = document.createDocumentFragment(),
container = $('<div id="fa_category_tabs"><h2 id="fa_tabs_title">' + fa_tabs.lang.title + '</h2></div>')[0],
tablist = $('<div id="fa_tablist"><div class="inner_tabs"><div></div></div></div>')[0],
catglist = $('<div id="fa_catglist" />')[0],
a = $(fa_tabs.select.category, !version ? $(fa_tabs.select.content)[0] : document.getElementById(fa_tabs.select.content)),
i = 0,
j = a.length,
htmlStr = '<a href="javascript:fa_tabs.change(\'all\');">' + fa_tabs.lang.all + '</a>';
// drop off the main container before the first category
a[0] && a[0].parentNode.insertBefore(container, a[0]);
// loop through each category
for (; i < j; i++) {
if (version == 2) var next = a[i].nextSibling;
// create our tabs
htmlStr += '<a href="javascript:fa_tabs.change(' + i + ');">' + ($('H2:first', a[i]).text() || fa_tabs.lang.placeholder + ' ' + i) + '</a>';
// append the category to the list and hide it
catglist.appendChild(a[i]);
a[i].style.display = 'none';
// get the next sibling as well for punbb
if (version == 2) {
catglist.appendChild(next);
next.style.display = 'none';
}
fa_tabs.list[i] = a[i]; // cache the category to the array
}
if (fa_tabs.list[0]) {
tablist.firstChild.firstChild.innerHTML = htmlStr; // fill in the tablist
fa_tabs.tab = [].slice.call(tablist.getElementsByTagName('A')); // create an array for the tabs
fa_tabs.tab.shift(); // remove the all tab
fa_tabs.change(fa_tabs.active); // setup the active tab
// finally add the content to the document
frag.appendChild(tablist);
frag.appendChild(catglist);
container.appendChild(frag);
window.setTimeout(function() {
if (tablist.firstChild.scrollWidth > tablist.firstChild.clientWidth) {
tablist.className = 'fa_tabs_overflow';
tablist.firstChild.firstChild.style.marginLeft = '0px';
tablist.insertAdjacentHTML('beforeend', '<a class="tab_scroller scroll_left" href="#" onmousedown="fa_tabs.scroll(1, 0); return false;" onclick="fa_tabs.stop(); return false;" onmouseout="fa_tabs.stop();"><</a><a class="tab_scroller scroll_right" href="#" onmousedown="fa_tabs.scroll(-1, -' + (tablist.firstChild.scrollWidth - tablist.firstChild.clientWidth) + '); return false;" onclick="fa_tabs.stop(); return false;" onmouseout="fa_tabs.stop();">></a>');
}
}, 100);
}
});
$('head').append('<style type="text/css">#fa_tabs_title{color:#333;font-size:24px;font-weight:400;font-family:arial,sans-serif;margin:3px;line-height:24px}.inner_tabs a,a.tab_scroller{font-family:arial,sans-serif;height:30px;line-height:30px}#fa_tablist{position:relative;white-space:nowrap}#fa_tablist.fa_tabs_overflow{padding:0 18px}.inner_tabs{overflow:hidden;padding-bottom:1px;margin-bottom:-1px}a.tab_scroller{color:#FFF;background:#333;font-size:16px;text-align:center;position:absolute;bottom:2px;width:15px;opacity:.1}a.tab_scroller.scroll_left{left:0}a.tab_scroller.scroll_right{right:0}#fa_tablist:hover a.tab_scroller{opacity:.7}#fa_tablist a.tab_scroller:hover{opacity:1}#fa_catglist{background:#EEE;border:1px solid #CCC;border-radius:3px;padding:10px 6px}.inner_tabs a{color:#333 !important;background:#DDD;border:1px solid #CCC;border-bottom:none;border-radius:3px 3px 0 0;text-decoration:none!important;font-size:12px;font-weight:700;display:inline-block;padding:0 10px;margin:3px 3px 0}.inner_tabs a.fa_tabactif,.inner_tabs a:hover{background:#EEE;position:relative;bottom:-1px;opacity:1}</style>');
Last edited by Sir Chivas™ on October 8th 2023, 4:28 am; edited 2 times in total
TonnyKamper and poesia-verses like this post
Re: Category Tabs
Hello
Did you try to deactivate the rest javascript to check iif a code is causing this conflict?
Did you try to deactivate the rest javascript to check iif a code is causing this conflict?
Re: Category Tabs
Good morning!
I installed the script on my forum and it works.
You have quite a few console errors (13) on your forum:
I especially don't like this mistake:
It originates in this place
There's a mistake in the single brackets. If you "create" a string to be added with single quotes - you cannot use them inside the initialized string without escaping.
I paid attention to this particular mistake because they are the ones that often break scripts.
The easiest way to remove the error is to change the use of quotation marks
I installed the script on my forum and it works.
You have quite a few console errors (13) on your forum:
I especially don't like this mistake:
- Code:
Uncaught SyntaxError: missing ) after argument list (at (index):2024:1284)
It originates in this place
There's a mistake in the single brackets. If you "create" a string to be added with single quotes - you cannot use them inside the initialized string without escaping.
I paid attention to this particular mistake because they are the ones that often break scripts.
The easiest way to remove the error is to change the use of quotation marks
- Code:
" ' onclick="fae_toggle_category(this);'><h2>AF's Contests</h2></div><div id='f61' "
Razor12345- Support Moderator
- Posts : 1594
Reputation : 270
Language : Ukr, Rus, Eng
Location : Ukraine
SarkZKalie and TonnyKamper like this post
Re: Category Tabs
Hi Skouliki, no, I shall try that.
@Razor12345, I've sent you private message with details of the founder account. I cannot find that part of the script anywhere. That was part of category/forum called AF's contests. I've deleted to see if that was the issue any nothing has changed.
@Razor12345, I've sent you private message with details of the founder account. I cannot find that part of the script anywhere. That was part of category/forum called AF's contests. I've deleted to see if that was the issue any nothing has changed.
Re: Category Tabs
Your PM has been received with thanks.
|
Answered in the PM what's wrong.
Now work correct:
Razor12345- Support Moderator
- Posts : 1594
Reputation : 270
Language : Ukr, Rus, Eng
Location : Ukraine
Ape, Sir Chivas™ and TonnyKamper like this post
Re: Category Tabs
As always thank you for taking your time and explaining the errors step by step. You can trash this since the error was from another script..
Razor12345- Support Moderator
- Posts : 1594
Reputation : 270
Language : Ukr, Rus, Eng
Location : Ukraine
Re: Category Tabs
Sir Chivas wrote:I need help on the same script. I want to remove the "All" part where it shows as normal. I want to only display them as tabs.
Topic re-open
------------
At the end of script add this code:
- Code:
$('head').append('<style type="text/css">.inner_tabs a:first-child { display: none; }</style>');
Result:
Razor12345- Support Moderator
- Posts : 1594
Reputation : 270
Language : Ukr, Rus, Eng
Location : Ukraine
SLGray, Sir Chivas™, SarkZKalie and TonnyKamper like this post
Re: Category Tabs
Problem solved & topic archived.
|
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Similar topics
» Who's Online Tabs
» Category Showing as "Forum" instead of the category name.
» Stats Tabs
» Reputation tabs
» How to add a menu with tabs?
» Category Showing as "Forum" instead of the category name.
» Stats Tabs
» Reputation tabs
» How to add a menu with tabs?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum