MyBB Community Forums

Full Version: Stuck on tabs menu
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
which theme actually you are using ?
basically multiple loading of jQuery library should be avoided.

you can remove jquery.min.js from headerinclude template
Quote:<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Edit: jquery noconflict code also needs to be removed
(2016-11-13, 03:35 PM)vintagedaddyo Wrote: [ -> ]
(2016-11-13, 03:32 PM)Chucky. Wrote: [ -> ]Didn't work haha, I think it's the theme as no plugins work for tabs and I've tried several hard coding methods Sad

I am staring at my current theme with the exact code in it and it works fine, all screenshot examples are from a soon to be released theme that I am working on and currently giving you the exact code that is functioning perfectly with the correct usage of existing cat ids

I haven't a clue why it's not working, but as I said even MyTabs and Tabbed Menu plugins doesn't work, it pretty much gives the exact same problem (all categories displayed on the first tab while other tabs don't work). I've also tried two other hard coding methods, one with cookies and one without, and now your method. For some reason the theme just doesn't want to play ball  Huh

(2016-11-13, 03:39 PM).m. Wrote: [ -> ]which theme actually you are using ?
basically multiple loading of jQuery library should be avoided.

you can remove jquery.min.js from headerinclude template
Quote:<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Edit: jquery noconflict code also needs to be removed

I have removed the following codes from headerinclude, they are scripts from previous tab methods:

<script type="text/javascript">
jQuery(document).ready(function($){

if ($.cookie('active_index_tab') == 'tab_2') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_2');    
     } else if ($.cookie('active_index_tab') == 'tab_3') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_3');
      } else if ($.cookie('active_index_tab') == 'tab_4') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_4');    
      } else if ($.cookie('active_index_tab') == 'tab_5') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_5');    
        } else if ($.cookie('active_index_tab') == 'tab_6') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_6');    
     } else if ($.cookie('active_index_tab') == 'tab_7') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_7');    
      } else if ($.cookie('active_index_tab') == 'tab_8') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_8');    
     } else if ($.cookie('active_index_tab') == 'tab_9') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_9');    
     } else if ($.cookie('active_index_tab') == 'tab_10') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_10');
     }

$('#forum_tabs > .forum_tab_links > span > a').click(function(){
       var tab_id = $(this).attr('id');
       parent_class = $('#forum_tabs').attr("class");
       $('#forum_tabs > .forum_tab_links > span > a').removeClass('active'); // remove active class from all links
       $(this).addClass('active'); // add active class to clicked tab
       if ( $("#forum_tabs").hasClass(parent_class) ) {
       $("#forum_tabs").removeClass(parent_class).addClass(tab_id);
       } else {  $('#forum_tabs').addClass(tab_id); }
      $.cookie('active_index_tab',tab_id, {expires: 365});
});

});

</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


I have also removed jquery noconflict. That hasn't really helped.
(2016-11-13, 03:43 PM)Chucky. Wrote: [ -> ]
(2016-11-13, 03:35 PM)vintagedaddyo Wrote: [ -> ]
(2016-11-13, 03:32 PM)Chucky. Wrote: [ -> ]Didn't work haha, I think it's the theme as no plugins work for tabs and I've tried several hard coding methods Sad

I am staring at my current theme with the exact code in it and it works fine, all screenshot examples are from a soon to be released theme that I am working on and currently giving you the exact code that is functioning perfectly with the correct usage of existing cat ids

I haven't a clue why it's not working, but as I said even MyTabs and Tabbed Menu plugins doesn't work, it pretty much gives the exact same problem (all categories displayed on the first tab while other tabs don't work). I've also tried two other hard coding methods, one with cookies and one without, and now your method. For some reason the theme just doesn't want to play ball  Huh

(2016-11-13, 03:39 PM).m. Wrote: [ -> ]which theme actually you are using ?
basically multiple loading of jQuery library should be avoided.

you can remove jquery.min.js from headerinclude template
Quote:<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Edit: jquery noconflict code also needs to be removed

I have removed the following codes from headerinclude, they are scripts from previous tab methods:

<script type="text/javascript">
jQuery(document).ready(function($){

if ($.cookie('active_index_tab') == 'tab_2') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_2');    
     } else if ($.cookie('active_index_tab') == 'tab_3') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_3');
      } else if ($.cookie('active_index_tab') == 'tab_4') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_4');    
      } else if ($.cookie('active_index_tab') == 'tab_5') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_5');    
        } else if ($.cookie('active_index_tab') == 'tab_6') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_6');    
     } else if ($.cookie('active_index_tab') == 'tab_7') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_7');    
      } else if ($.cookie('active_index_tab') == 'tab_8') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_8');    
     } else if ($.cookie('active_index_tab') == 'tab_9') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_9');    
     } else if ($.cookie('active_index_tab') == 'tab_10') {
     $('#forum_tabs').removeClass('tab_1').addClass('tab_10');
     }

$('#forum_tabs > .forum_tab_links > span > a').click(function(){
       var tab_id = $(this).attr('id');
       parent_class = $('#forum_tabs').attr("class");
       $('#forum_tabs > .forum_tab_links > span > a').removeClass('active'); // remove active class from all links
       $(this).addClass('active'); // add active class to clicked tab
       if ( $("#forum_tabs").hasClass(parent_class) ) {
       $("#forum_tabs").removeClass(parent_class).addClass(tab_id);
       } else {  $('#forum_tabs').addClass(tab_id); }
      $.cookie('active_index_tab',tab_id, {expires: 365});
});

});

</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


I have also removed jquery noconflict. That hasn't really helped.

Did you do this?

Edit Template: forumbit_depth1_cat

Go to template forumbit_depth1_cat and add the div tag to cover all the template:

<div id="cat_{$forum['fid']}" class="tabbed_content">
....
</div>

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

and add this at the bottom:
</div>
Yes I did do that from previous tab methods. I have now deleted the unused scripts. Adding that code to the forumbit_depth1_cat has removed the other two categories from the first tab which is great, but the second tab still doesn't work.
(2016-11-13, 03:57 PM)Chucky. Wrote: [ -> ]Yes I did do that from previous tab methods. I have now deleted the unused scripts. Adding that code to the forumbit_depth1_cat has removed the other two categories from the first tab which is great, but the second tab still doesn't work.


Also "tabbed_content" is specific to these instructions..., as seen here:

<div id="cat_{$forum['fid']}" class="tabbed_content">

and here:
#tabbed_content {
	width: auto !important;
}

So if you used another intruction it may have said something like:
<div id="cat_{$forum['fid']}" class="content">

and no mention in css...

Anywhoo...., also are the cat_#s both correct for tab 2
(2016-11-13, 04:00 PM)vintagedaddyo Wrote: [ -> ]
(2016-11-13, 03:57 PM)Chucky. Wrote: [ -> ]Yes I did do that from previous tab methods. I have now deleted the unused scripts. Adding that code to the forumbit_depth1_cat has removed the other two categories from the first tab which is great, but the second tab still doesn't work.

Are the cat_#s both correct for tab 2

Yes, I believe so.

Cat one: forum-management&fid=20
Cat two: forum-management&fid=40
Cat three: forum-management&fid=41
Cat four: forum-management&fid=42

Table:

<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_20, #cat_40" border="1px">Category 1 &amp; 2</td>
<td class="tab_cat tab" title="" rel="cat_41, #cat_42" border="1px">Category 3 &amp; 4</td>
</tr>
</table>

CSS:

/** Category 1 & 2 **/

#cat_20{
}

#cat_40{
}

/** Category 3 & 4 **/

#cat_41{
display: none;
}

#cat_42{
display: none;
}

EDIT: <div id="cat_{$forum['fid']}" class="content">

Yes, that seems like what was inside forumbit_depth1_cat before.
After logging into your board..., I found that it was not a template issue but rather a corrupted jquery file..., I linked an external jquery and it worked fine...., so I replaced your corrupted jquery file and your tabs are now working..., added a sneek peek theme in there as well as I needed to add a random theme just to see if it was a theme specific issue or a file related issue..., anywhoo.., that takes care of that and happy foruming! Smile

[Image: xomrfl.png]
Thread marked as solved.
Pages: 1 2