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

blacky007

2015-10-14, 09:21 PM
this Tutorial working on mybb 1.8 ???

jaydee9296

2016-02-13, 03:22 AM
Is this still working on mybb 1.8?

Blackbeard

2016-02-13, 02:17 PM
(2016-02-13, 03:22 AM)jaydee9296 Wrote: [ -> ]Is this still working on mybb 1.8?

(2015-12-28, 01:10 AM)Destroy666 Wrote: [ -> ]That tutorial is for 1.6, you need to make it jQuery-compatible with 1.8 and your theme. So no additional jQuery loading, no need for noConflict either, etc.

jaydee9296

2016-02-14, 05:55 AM
(2016-02-13, 02:17 PM)Blackbeard Wrote: [ -> ]
(2016-02-13, 03:22 AM)jaydee9296 Wrote: [ -> ]Is this still working on mybb 1.8?

(2015-12-28, 01:10 AM)Destroy666 Wrote: [ -> ]That tutorial is for 1.6, you need to make it jQuery-compatible with 1.8 and your theme. So no additional jQuery loading, no need for noConflict either, etc.

Okay I'll pass on this tutorial Big Grin

call911

2016-06-03, 02:53 AM
working well with 1.8.7, thank you
demo site in my signature ^_^

xSicKxSkiLLs

2016-11-16, 12:52 AM
This still works for 1.8, but I want to add cookies so it remembers what tab the user come from, could someone help me with this, i tried colab this with https://community.mybb.com/thread-139594.html

but i just can't seem to get it to do what i want.
Any help would be appreciated.

User 6029

2016-11-17, 08:16 AM
*after helping another user via: https://community.mybb.com/thread-205800.html whom was having difficulty with implementing these tabs..., I figured I would share the following:

This Tutorial still works well but I made a few minor changes...,


Edit Template: forumbit_depth1_cat

Add at the top: 
<div id="cat_{$forum['fid']}" class="tabbed_content">

Edit Template: forumbit_depth1_cat

Add at the very bottom:
</div>


Edit Template: index

Find:
{$forums}

Add this before it:
<script type="text/javascript">
$(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.tabbed_content').slideUp();
var catshow = $(this).attr('rel');
$('#'+ catshow).slideDown();
});
});
</script>
<table border="0" width="100%" class="tab_cat_border" cellpadding="4" cellspacing="0" style="margin-bottom: 0px;">
<tr align="center">
<td class="tab_cat at tab" title="" rel="cat_1, #cat_3" border="1px">Category 1 &amp; 2</td>
<td class="tab_cat tab" title="" rel="cat_8, #cat_9" border="1px">Category 3 &amp; 4</td>
<td class="tab_cat tab" title="" rel="cat_10, #cat_11" border="1px">Category 5 &amp; 6</td>
<td class="tab_cat tab" title="" rel="cat_12, #cat_13" border="1px">Category 7 &amp; 8</td>
</tr>
</table>

* adjust the category  ID #'s to suit your specific category ID #'s



Edit Stylesheet: global.css

Add the following to global.css

/** Tabbed Category on index **/

#tabbed_content {
    width: auto !important;
}

.tab_cat {
    background: #EFEFEF !important;    
    cursor: pointer;
    padding: 6px;
    font-size: 12px;
    border-top: 1px solid #D4D4D4;
    border-left:  1px solid #D4D4D4;
    border-right:  1px solid #D4D4D4;
    border-bottom:  0;
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}

.tab_cat_border {
    width: 80%;
    padding-left: 20px;
}

.at {
    background: #007FD6 !important;
    color: #FFF;
    padding: 6px;
    font-size: 12px;
    border-top: 1px solid #0066A2;
    border-left:  1px solid #0066A2;
    border-right:  1px solid #0066A2;
    border-bottom:  0;
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}


.tborder {
    padding: 0px 0px 0px 0px !important; 
    border-top: 1px solid #007FD6 !important;
    border-bottom: 1px solid #D4D4D4 !important;
    border-left: 1px solid #D4D4D4 !important;
    border-right: 1px solid #D4D4D4 !important;
}

.thead {
    background: #007FD6 url('images/thead.png') bottom left repeat-x !important;
}


/** Category 1 & 2 **/

#cat_1{
/* display: none; */
}

#cat_3{
/* display: none; */
}

/** Category 3 & 4 **/

#cat_8{
display: none;
}

#cat_9{
display: none;
}

/** Category 5 & 6 **/

#cat_10{
display: none;
}

#cat_11{
display: none;
}

/** Category 7 & 8 **/

#cat_12{
display: none;
}

#cat_13{
display: none;
}

* adjust the category  ID #'s to suit your specific category ID #'s

Example:

[Image: zwky1k.jpg]


Ok.., after that you would simply modify your "color_whatever.css" files to have the respective color changes for example:


color_black.css
add:
.at {
    background: #3E3D3E !important;
    color: #FFF;
    border-top: 1px solid #3E3D3E;
    border-left:  1px solid #3E3D3E;
    border-right:  1px solid #3E3D3E;
}

.thead {
    background: #3E3D3E url(images/colors/black_thead.png) bottom left repeat-x !important;
}

.tborder {
    border-top: 1px solid #3E3D3E !important;
}

color_calm.css
add:
.at {
    background: #4E7C63 !important;
    color: #FFF;
    border-top: 1px solid #4E7C63;
    border-left:  1px solid #4E7C63;
    border-right:  1px solid #4E7C63;
}

.thead {
    background: #4E7C63 url(images/colors/calm_thead.png) bottom left repeat-x !important;
}

.tborder {
    border-top: 1px solid #4E7C63 !important;
}

color_dawn.css
add:
.at {
    background: #EFAC6C !important;
    color: #FFF;
    border-top: 1px solid #EFAC6C;
    border-left:  1px solid #EFAC6C;
    border-right:  1px solid #EFAC6C;
}

.thead {
    background: #EFAC6C url(images/colors/dawn_thead.png) bottom left repeat-x !important;
}

.tborder {
    border-top: 1px solid #EFAC6C !important;
}

color_earth.css
add:
.at {
    background: #685242 !important;
    color: #FFF;
    border-top: 1px solid #685242;
    border-left:  1px solid #685242;
    border-right:  1px solid #685242;
}

.thead {
    background: #685242 url(images/colors/earth_thead.png) bottom left repeat-x !important;
}

.tborder {
    border-top: 1px solid #685242 !important;
}

color_flame.css
add:

.at {
    background: #9B0000 !important;
    color: #FFF;
    border-top: 1px solid #9B0000;
    border-left:  1px solid #9B0000;
    border-right:  1px solid #9B0000;
}

.thead {
    background: #9B0000 url(images/colors/flame_thead.png) bottom left repeat-x !important;
}

.tborder {
    border-top: 1px solid #9B0000 !important;
}

color_leaf.css
add:

.at {
    background: #55A531 !important;
    color: #FFF;
    border-top: 1px solid #55A531;
    border-left:  1px solid #55A531;
    border-right:  1px solid #55A531;
}

.thead {
    background: #55A531 url(images/colors/leaf_thead.png) bottom left repeat-x !important;
}

.tborder {
    border-top: 1px solid #55A531 !important;
}

color_night.css
add:

.at {
    background: #02365A !important;
    color: #FFF;
    border-top: 1px solid #02365A;
    border-left:  1px solid #02365A;
    border-right:  1px solid #02365A;
}

.thead {
    background: #02365A url(images/colors/night_thead.png) bottom left repeat-x !important;
}

.tborder {
    border-top: 1px solid #02365A !important;
}

color_sun.css
add:
.at {
    background: #FFE993 !important;
    color: #000;
    border-top: 1px solid #FFE993;
    border-left:  1px solid #FFE993;
    border-right:  1px solid #FFE993;
}

.thead {
    background: #FFE993 url(images/colors/sun_thead.png) bottom left repeat-x !important;
}

.tborder {
    border-top: 1px solid #FFE993 !important;
}

color_twilight.css
add:

.at {
    background: #3E5C6F !important;
    color: #FFF;
    border-top: 1px solid #3E5C6F;
    border-left:  1px solid #3E5C6F;
    border-right:  1px solid #3E5C6F;
}

.thead {
    background: #3E5C6F url(images/colors/twilight_thead.png) bottom left repeat-x !important;
}

.tborder {
    border-top: 1px solid #3E5C6F !important;
}

color_water.css
add:

.at {
    background: #2B8F90 !important;
    color: #FFF;
    border-top: 1px solid #2B8F90;
    border-left:  1px solid #2B8F90;
    border-right:  1px solid #2B8F90;
}

.thead {
    background: #2B8F90 url(images/colors/water_thead.png) bottom left repeat-x !important;
}

.tborder {
    border-top: 1px solid #2B8F90 !important;
}


Example:
[Image: 2rp7g4l.png]

If this is complicated..., here is this tutorial already completed in the the default theme:
[attachment=37810]

thelovelyone

2016-12-18, 11:42 PM
@vintagedaddyo

Thanks for that. I tried to combine it with the color picker adding ",at." to skin.js, var customElements, so the tab background adjusts to the picked color, but it won't change. Can you tell me how can i achieve that?

User 6029

2016-12-19, 09:38 AM
(2016-12-18, 11:42 PM)thelovelyone Wrote: [ -> ]@vintagedaddyo

Thanks for that. I tried to combine it with the color picker adding ",at." to skin.js, var customElements, so the tab background adjusts to the picked color,  but it won't change. Can you tell me how can i achieve that?

ello...,

sorry for the delay in response.., been busy with other life stuff and have not had much time to look at this for you....,


.at is not what you are looking for..., td.tab_cat.at.tab is more like it....

ok..., now this is by far not even close to all that needs to be done (you will see what I mean after this as I have not had the time to get to the selected state and such as of yet for this modification)..., but I do not currently have the time to focus on this..., but for basic tab and colorpicker functionality...

Firstly you need to start modifying your skin.js adding another  var for borders * "this could be enhanced with further vars and modifications..., but alas I clearly do not have the time to focus on this much further at the present  moment..."

$(document).ready(function($){
	var customBorders = ".tborder, .thead, td.tab_cat.at.tab";
	var customElements = "#panel, .tfoot, .upper, .thead, .postbit_buttons > a:link, td.tab_cat.at.tab";
	var customText = ".post_block h3, .post_block h3 a, .trow1 a:link, .trow2 a:link, #logo ul.top_links a:link, #panel .lower a:link, .navigation a:link";

	$('#colorpicker').ColorPicker({
		color: '#0000ff',
		onSubmit: function(hsb, hex, rgb, el) {
			$(el).val(hex);
			$(el).ColorPickerHide();
			$(el).css("backgroundColor", "#" + hex);
			$(customElements).css("background-color", "#" + hex);
			$(customText).css("color", "#" + hex);
			$(customBorders).css("border-color", "#" + hex);
			$.cookie('customcolor',hex,{ expires: 365, path: '/'});
		},
		onBeforeShow: function () {
			$(this).ColorPickerSetColor(this.value);
		},

		onChange: function (hsb, hex, rgb) {
			currentHex = hex;
			$(customElements).css("background-color", "#" + hex);
			$(customText).css("color", "#" + hex);
		    $(customBorders).css("border-color", "#" + hex);
			$.cookie('customcolor',hex,{ expires: 365, path: '/'});
		}
	})
	
	.bind('keyup', function(){
		$(this).ColorPickerSetColor(this.value);
	})

	if ( ($.cookie('customcolor') != null))	{
		$(customElements).css("background-color", "#" + $.cookie('customcolor'));
		$(customText).css("color", "#" + $.cookie('customcolor'));
		$(customBorders).css("border-color", "#" + $.cookie('customcolor'));
		$("#colorpicker").val($.cookie('customcolor'));
	}
	else{
		$(customElements).css("background-color","#0066A2");
		$(customText).css("color","#0066A2");
	    $(customBorders).css("border-color","#0066A2");
	}

});


You also need to remove the !important from certain items as that will block the colorpicker from changing items as !important is obviously a override...., oh, and you also need to remove the thead bg image...

The css with the thead bg image removed and the necessary !important removed..., keep the remaining intact...

/** Tabbed Category on index **/

#tabbed_content {
    width: auto !important;
}

.tab_cat {
    background: #EFEFEF;    
    cursor: pointer;
    color: #000;
    padding: 6px;
    font-size: 12px;
    border-top: 1px solid #D4D4D4;
    border-left:  1px solid #D4D4D4;
    border-right:  1px solid #D4D4D4;
    border-bottom:  0;
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}

.tab_cat_border {
    width: 80%;
    padding-left: 20px;
}

.at {
    background-color: #007FD6;
    color: #FFF;
    padding: 6px;
    font-size: 12px;
    border-top: 1px solid #0066A2;
    border-left:  1px solid #0066A2;
    border-right:  1px solid #0066A2;
    border-bottom:  0;
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}


.tborder {
    padding: 0px 0px 0px 0px !important;
    border-top: 1px solid #007FD6 ;
    border-bottom: 1px solid #D4D4D4 ;
    border-left: 1px solid #D4D4D4 ;
    border-right: 1px solid #D4D4D4 ;
}

.thead {
    background: #007FD6;
    border-top: 1px solid #007FD6;
    border-left:  1px solid #0066A2;
    border-right:  1px solid #0066A2;
    border-bottom: 1px solid #007FD6;
}


/** Category 1 & 2 **/

#cat_1{
/* display: none; */
}

#cat_3{
/* display: none; */
}

/** Category 3 & 4 **/

#cat_8{
display: none;
}

#cat_9{
display: none;
}

/** Category 5 & 6 **/

#cat_10{
display: none;
}

#cat_11{
display: none;
}

/** Category 7 & 8 **/

#cat_12{
display: none;
}

#cat_13{
display: none;
}


Example:


[Image: 1o0qyw.png]

* I will look into the other mentioned issues once I actually have time to do so...

thelovelyone

2016-12-19, 06:58 PM
Thanks, will look into it,
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)