MyBB Community Forums

MyBB Community Forums > Resources > Tutorials > [Tutorial] Tabbed forum with jQuery (multi categories in one tab)
Full Version: [Tutorial] Tabbed forum with jQuery (multi categories in one tab)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

WINBOY

2012-04-23, 03:40 PM
can anyone upload here that plugin as i m not able to download from his site.
thx

Dragon_Void

2012-04-23, 03:46 PM
(2012-04-23, 03:40 PM)WINBOY Wrote: [ -> ]can anyone upload here that plugin as i m not able to download from his site.
thx

http://community.mybb.com/attachment.php?aid=17719

It was already uploaded here...

WINBOY

2012-04-23, 03:57 PM
but on that mybbcentral site its size is 69kg and yours is 19 kb...
i m new in web building so pls guide for easy way.

http://www.mybbcentral.com/thread-7687.html
in my admin cp...

in forumbit_depth1_cat.....below is template.
what to do next?
where i have to add the div tag??

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<thead>
<tr>
<td class="thead" colspan="5">
<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
<div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div>
</td>
</tr>
</thead>
<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">
<tr>
<td class="tcat" colspan="2"><span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>
<td class="tcat" width="200" align="center"><span class="smalltext"><strong>{$lang->forumbit_lastpost}</strong></span></td>
</tr>
{$sub_forums}
</tbody>
</table>
<br />
MY INDEX PAGE IS ....
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
	lang.no_new_posts = "{$lang->no_new_posts}";
	lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}
{$forums}
{$boardstats}

<dl class="forum_legend smalltext">
	<dt><img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}" title="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
	<dd>{$lang->new_posts}</dd>

	<dt><img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}" title="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
	<dd>{$lang->no_new_posts}</dd>

	<dt><img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}" title="{$lang->forum_locked}" style="vertical-align: middle;" /></dt>
	<dd>{$lang->forum_locked}</dd>
</dl>
<br style="clear: both" />
{$footer}
</body>
</html>

AND I CHANGED IT TO...

<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
	lang.no_new_posts = "{$lang->no_new_posts}";
	lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}
script type="text/javascript" src="jscripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$.noConflict();
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.content').slideUp();
var catshow = $(this).attr('rel');
$('#'+ catshow).slideDown();
});
});
</script>
<table border="0" width="100%" class="tborder" cellpadding="4" cellspacing="0" style="margin-bottom: 3px;">
<tr align="center">
<td class="tcat at tab" title="Category 1" style="cursor: pointer;" rel="cat_1">Category 1</td>
<td class="tcat tab" title="Category 4 &amp; 6" style="cursor: pointer;" rel="cat_4, #cat_6">Category 4 &amp; 6</td>
<td class="tcat tab" title="Category 9" style="cursor: pointer;" rel="cat_9, #cat_11">Category 9</td>
</tr>
</table>
{$forums}
{$boardstats}

<dl class="forum_legend smalltext">
	<dt><img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}" title="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
	<dd>{$lang->new_posts}</dd>

	<dt><img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}" title="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
	<dd>{$lang->no_new_posts}</dd>

	<dt><img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}" title="{$lang->forum_locked}" style="vertical-align: middle;" /></dt>
	<dd>{$lang->forum_locked}</dd>
</dl>
<br style="clear: both" />
{$footer}
</body>
</html>

IS IT OK....

WINBOY

2012-04-24, 04:58 PM
FINALLY I HAD DONE....

thx.... i had almost done but there is problem u can see below...

[Image: a911423033.jpg]

but i want look and format like below screenshot.
there should be space between catogery and in not in single line but i need 3-4 categories in single raw means if i made 20 category than it will be in 5 raw but not in single raw..

please help guys.
thx.
[Image: b18fac803d.bmp]

Yaldaram

2012-04-24, 05:11 PM
Use class="smalltext" in the <td> tag.

Dragon_Void

2012-04-24, 05:13 PM
Please remove all the code you added, and try this plugin: http://mods.mybb.com/view/mytabs

Not sure if it works still, but it should

WINBOY

2012-04-24, 06:26 PM
Thx...Dragin Void..its workign fine....
but when i click on tab , it take 3-4 sec to open caetgory under it...
and i want to dark name of tab and is it possible to give specific color to opened tab???

REP ADDED TO DRAGON.

Dragon_Void

2012-04-25, 06:16 AM
(2012-04-24, 06:26 PM)WINBOY Wrote: [ -> ]Thx...Dragin Void..its workign fine....
but when i click on tab , it take 3-4 sec to open caetgory under it...
and i want to dark name of tab and is it possible to give specific color to opened tab???

REP ADDED TO DRAGON.
Sorry for taking so long to get back to you...

For the load issues, go to your acp, Forums & Posts>MyTabs>settings then where it says "use ajax" select No

For the tab color: (same page)
In the "Default Selected Tab Style" box, replace everything with this:
<td class="thead-other-tab" style="border: 1px solid black; margin-right: 5px; padding: 2px 5px 2px 5px;">
	<div>
		<a href="{$link}">{$name}</a>
	</div>
</td>

and in the "Default Selected Tab Style" box, replace everything with this:
<td class="thead-active-tab" style="border: 1px solid black; margin-right: 5px; padding: 2px 5px 2px 5px;">
	<div>
		<strong><a href="{$link}">{$name}</a></strong>
	</div>
</td>

Then go to Acp>Templates & Style>Themes>*your theme*>add stylesheet, and call it tabs.css, then add the following to it:

.thead-active-tab {
	background: #7c796d;
	color: #FFFFFF;
}

.thead-other-tab {
	background: #026CB1 url(images/thead_bg.gif) top left repeat-x;
	color: #ffffff;
}

Then you can edit the color, by editing the properties of ".thead-active-tab"

User 2877

2012-04-25, 06:30 AM
Quote:but on that mybbcentral site its size is 69kg and yours is 19 kb...
i m new in web building so pls guide for easy way.

That's because you're counting the screenshots which are not required to be uploaded.

Tabbed Menu from Mybb Central is a 9k jscript and an 11k plugin file. This one uses jquery which is 54k. So my plugin is less than 1/2 the K size per page load and 1/4 if you just consider the javascript.


This one here is a good plugin I just want to make sure you make accurate statements.

Dante The Demon

2012-06-15, 05:45 AM
(2012-04-24, 06:26 PM)WINBOY Wrote: [ -> ]Thx...Dragin Void..its workign fine....
but when i click on tab , it take 3-4 sec to open caetgory under it...
and i want to dark name of tab and is it possible to give specific color to opened tab???

REP ADDED TO DRAGON.

Go to Admin-CP - MyTabs Settings & Disable AJAX.

Then it should work fine Smile

And if you guys need help on adding jQuery Tabs PM me.

AskAmn ~ The MyBB Expert.
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
MyBB Community Forums > Resources > Tutorials > [Tutorial] Tabbed forum with jQuery (multi categories in one tab)