add tab

how to add tab above categories

hello there!

https://help.forumotion.com/t66614-display-your-categories-as-tabs

read and enjoy

thank you, but not it i mean
i want like on avacweb

Hi

Sorry, I believe that copying AvacWeb's style would merit you plagiarism; however, I do remember Ange helping a person with almost the same predicament as yours. Please search his profile for the topic concerning that or if he finds this, he can repaste the code here.

Regards,
Pizza Boi

So, what you mean is the navigation bar in tabs?

Kite Trojan wrote:So, what you mean is the navigation bar in tabs?

Hi

Nope, he means the topics, forums, etc. Like the one in Avacweb, the navigation bar is above.

Regards,
Pizza Boi

I've seen ange tuteur post about this, but I forgot where it was xD

i already search it but is not showing

Hello,

The version of your forum is ?

punbb

Administration panel > modules > javascript codes management > create a new script

Title : what you wish
Placement : in the homepage
Paste the code below and save :

Code:

$(document).ready(function() {
    $('.main:has(.statused) .main-content').each(function() { $(this).attr('id','forum'+$(this).index()).hide() });
    $('.main:has(.statused) .main-head .page-title').each(function() { $(this).unwrap().attr('id','tab'+$(this).next().attr('id').replace(/forum/,'')) });
    $('.main:has(.statused)').before('<div id="tabNav"></div><div id="forumList"></div>');
    $('.main:has(.statused) .page-title').addClass('forumTab').appendTo('#tabNav');
    $('.main:has(.statused) .main-content').addClass('forumCatg').appendTo('#forumList');
    
    $('.forumTab').click(function() {
        var n = $(this).attr('id').replace(/tab/,'');
        if ($('#forum'+n).css('display') == 'none') {
            $('.forumCatg').not($('#forum'+n)).hide();
            $('#forum'+n).show()
        }
        else { $('#forum'+n).hide() }
    });
});

Then add this CSS :
Display > colors > CSS stylesheet

Code:

.forumTab {
    display:inline-block;
    background:#EEE;
    border:1px solid #CCC;
    padding:2px;
    margin:0 3px;
    cursor:pointer;
}
.forumTab:hover { background:#FFA; }

result should be similar to : http://generaltesting.forumotion.com/forum

wohooooo thank you very much  
i want it  

edit:
do not close this topic first 
if there is a problem I would ask here. 
and if it is solved I will mark as solved

edit:
how to create tabs with tab content with what I want?

example;
Tab 1
content with forum list (full subforum)

Tab 2
content with h1-chatbox (html)

Tab 3
content with h2-request (html)

up

For loading an html page you would have to use an iframe :

Code:

$(document).ready(function() {
    $('.main:has(.statused) .main-content').each(function() { $(this).attr('id','forum'+$(this).index()).hide() });
    $('.main:has(.statused) .main-head .page-title').each(function() { $(this).unwrap().attr('id','tab'+$(this).next().attr('id').replace(/forum/,'')) });
    $('.main:has(.statused)').before('<div id="tabNav"></div><div id="forumList"></div>');
    $('.main:has(.statused) .page-title').addClass('forumTab').appendTo('#tabNav');
    $('.main:has(.statused) .main-content').addClass('forumCatg').appendTo('#forumList');
    
    $('.forumTab').click(function() {
        var n = $(this).attr('id').replace(/tab/,'');
        if ($('#forum'+n).css('display') == 'none') {
            $('.forumCatg').not($('#forum'+n)).hide();
            $('#forum'+n).show()
        }
        else { $('#forum'+n).hide() }
    });
    
    $('#tabNav').append('<span id="h1Tab" class="forumTab">H1 PAGE</span>');
    $('#forumList').append('<iframe id="h1Page" class="forumCatg" src="/h1-" style="display:none;"></iframe>');
    $('#h1Tab').click(function() {
        if ($('#h1Page').css('display') == 'none') {
            $('.forumCatg').not($('#h1Page')).hide();
            $('#h1Page').show()
        }
        else { $('#h1Page').hide() }
    });
});

You're just adding onto the code by creating a new tab, and an iframe for your HTML page :

Code:

   $('#tabNav').append('<span id="h1Tab" class="forumTab">H1 PAGE</span>');
    $('#forumList').append('<iframe id="h1Page" class="forumCatg" src="/h1-" style="display:none;"></iframe>');
    $('#h1Tab').click(function() {
        if ($('#h1Page').css('display') == 'none') {
            $('.forumCatg').not($('#h1Page')).hide();
            $('#h1Page').show()
        }
        else { $('#h1Page').hide() }
    });

thank you very much its work   
i already making my tabs xD
but when click the tab content does not change

my tab is

Code:


<div id="erctabs_container">
   
   <ul id="ercstabs">
      
      <li class="ercactive">
          <a href="#erctab1">TAB1</a>
      </li>
      
      <li>
          <a href="#erctab2">TAB2</a>
      </li>
      
      <li>
          <a href="#erctab3">TAB3</a>
      </li>
      
      <li>
          <a href="#erctab4">TAB4</a>
      </li>
      
      <li>
          <a href="#erctab5">TAB5</a>
      </li>
      
      <li>
          <a href="#erctab6">TAB6</a>
      </li>
      
   </ul>
   
</div>
 
<div id="erctabs_content_container">
   
   <div style="display: block;" class="erctab_content" id="erctab1">
       tab 1 content
   </div>
   
   <div id="erctab2" class="erctab_content">
       content tab 2
   </div>
   
   <div id="erctab3" class="erctab_content">
       content tab 3
   </div>
   
   <div id="erctab4" class="erctab_content">
       content tab 5
   </div>
   
   <div id="erctab5" class="erctab_content">
       content tab 5
   </div>
    <style>
.ercglow {
        background: url("http://i45.servimg.com/u/f45/15/95/60/34/glitte10.gif");
    }
.ercsyarat {
    background: url("http://i39.servimg.com/u/f39/16/49/10/98/highli10.png") repeat-x scroll 0pt 1px rgb(153, 255, 153);
    padding: 5px;
    color: black;
    font-weight: bold;
margin-bottom:20px;
}
        #erctabs_container {
            border-bottom: 1px solid #ccc;
        }
        #ercstabs {
            list-style: none;
            padding: 5px 0 4px 0;
            margin: 0 0 0 10px;
            font-family: Verdana,Arial,Helvetica,sans-serif;
            font-size: 13px;
        }
        #ercstabs li {
            display: inline;
        }
#ercstabs li a {
    border-style: solid solid none;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    padding: 4px 6px;
    text-decoration: none;
    border-radius: 5px 5px 0px 0px;
    font-weight: bold;
    color: black;
    border-width: 1px 1px medium;
    border-color: grey;
    outline: medium none;
    background: #3AAA00 url(http://i.imgur.com/uvFX29f.png)!important;
}
#ercstabs li a:hover {
    padding: 4px 6px;
    background-color: grey;
    color: white;
    font-weight: bold;
}
#ercstabs li.active a {
    padding: 4px 6px 5px;
    border-bottom: medium none;
    font-weight: bold;
    color: white;
    background: #00569C url(http://i.imgur.com/uvFX29f.png)!important;}
#ercstabs li.active a:hover {
    padding: 4px 6px 5px;
    border-bottom: medium none;
    background-color: red;
}
#erctabs_content_container {
    border-width: medium 1px 1px;
    border-style: none solid solid;
    border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204);
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    padding: 10px;
    background: #00569C url(http://i.imgur.com/uvFX29f.png)!important;
    height: 200px;
    overflow: auto;
}
        .erctab_content {
            display: none;
        }
.erccoincopy{
    float: center;
    font-weight: bold;
    color: black;
    font-size: 13px;
}

</style><script>        $(document).ready(function(){
            //  When user clicks on tab, this code will be executed
            $("#ercstabs li").click(function() {
                //  First remove class "active" from currently active tab
                $("#ercstabs li").removeClass('ercactive');
       
                //  Now add class "active" to the selected/clicked tab
                $(this).ercaddClass("ercactive");
       
                //  Hide all tab content
                $(".erctab_content").hide();
       
                //  Here we get the href value of the selected tab
                var ercselected_tab = $(this).find("a").attr("href");
       
                //  Show the selected tab content
                $(ercselected_tab).fadeIn();
       
                //  At the end, we add return false so that the click on the link is not executed
                return false;
            });
        });</script>
   <div style="clear:both;" id="w27f207">
      
      <div align="center">
         
         <div style="text-align:center; display:inline-block; margin:0 auto;">
            
            <table syle="padding:0; margin:0; border:none;" cellpadding="0" cellspacing="0" border="0">
               
               <tbody>
                  
                  <tr>
                     
                     <td style="padding:32px;" valign="top">
                        
                     </td>
                     
                     <td style="padding:32px;" valign="top">
                        
                     </td>
                     
                  </tr>
                  
               </tbody>
               
            </table>
            
         </div>
         
      </div>
      
   </div>
   
   <div style="height:3px">
      
   </div>
</div>

can u fix it

Is this all in one code? You are mixing CSS and JavaScript together.

SLGray wrote:Is this all in one code?  You are mixing CSS and JavaScript together.

yes i want put to generalities

The example I gave adds new HTML elements. Are you modifying the templates or..?

no, I have the above code but the code does not run smoothly, when I click another tab, the content should not be changed like this:

TAB 1
content: erchima 1

TAB 2
content: erchima 2

When I click TAB 2 content was unchanged at erchima 1
the code I used was:

Code:


<div id="erctabs_container">
    
   <ul id="ercstabs">
      
      <li class="ercactive">
          <a href="#erctab1">TAB1</a>
      </li>
      
      <li>
          <a href="#erctab2">TAB2</a>
      </li>
      
      <li>
          <a href="#erctab3">TAB3</a>
      </li>
      
      <li>
          <a href="#erctab4">TAB4</a>
      </li>
      
      <li>
          <a href="#erctab5">TAB5</a>
      </li>
      
      <li>
          <a href="#erctab6">TAB6</a>
      </li>
      
   </ul>
    
</div>
 
<div id="erctabs_content_container">
    
   <div style="display: block;" class="erctab_content" id="erctab1">
       tab 1 content
   </div>
    
   <div id="erctab2" class="erctab_content">
       content tab 2
   </div>
    
   <div id="erctab3" class="erctab_content">
       content tab 3
   </div>
    
   <div id="erctab4" class="erctab_content">
       content tab 5
   </div>
    
   <div id="erctab5" class="erctab_content">
       content tab 5
   </div>
    <style>
.ercglow {
        background: url("http://i45.servimg.com/u/f45/15/95/60/34/glitte10.gif");
    }
.ercsyarat {
    background: url("http://i39.servimg.com/u/f39/16/49/10/98/highli10.png") repeat-x scroll 0pt 1px rgb(153, 255, 153);
    padding: 5px;
    color: black;
    font-weight: bold;
margin-bottom:20px;
}
        #erctabs_container {
            border-bottom: 1px solid #ccc;
        }
        #ercstabs {
            list-style: none;
            padding: 5px 0 4px 0;
            margin: 0 0 0 10px;
            font-family: Verdana,Arial,Helvetica,sans-serif;
            font-size: 13px;
        }
        #ercstabs li {
            display: inline;
        }
#ercstabs li a {
    border-style: solid solid none;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    padding: 4px 6px;
    text-decoration: none;
    border-radius: 5px 5px 0px 0px;
    font-weight: bold;
    color: black;
    border-width: 1px 1px medium;
    border-color: grey;
    outline: medium none;
    background: #3AAA00 url(http://i.imgur.com/uvFX29f.png)!important;
}
#ercstabs li a:hover {
    padding: 4px 6px;
    background-color: grey;
    color: white;
    font-weight: bold;
}
#ercstabs li.active a {
    padding: 4px 6px 5px;
    border-bottom: medium none;
    font-weight: bold;
    color: white;
    background: #00569C url(http://i.imgur.com/uvFX29f.png)!important;}
#ercstabs li.active a:hover {
    padding: 4px 6px 5px;
    border-bottom: medium none;
    background-color: red;
}
#erctabs_content_container {
    border-width: medium 1px 1px;
    border-style: none solid solid;
    border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204);
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    padding: 10px;
    background: #00569C url(http://i.imgur.com/uvFX29f.png)!important;
    height: 200px;
    overflow: auto;
}
        .erctab_content {
            display: none;
        }
.erccoincopy{
    float: center;
    font-weight: bold;
    color: black;
    font-size: 13px;
}

</style><script>        $(document).ready(function(){
            //  When user clicks on tab, this code will be executed
            $("#ercstabs li").click(function() {
                //  First remove class "active" from currently active tab
                $("#ercstabs li").removeClass('ercactive');
        
                //  Now add class "active" to the selected/clicked tab
                $(this).ercaddClass("ercactive");
        
                //  Hide all tab content
                $(".erctab_content").hide();
        
                //  Here we get the href value of the selected tab
                var ercselected_tab = $(this).find("a").attr("href");
        
                //  Show the selected tab content
                $(ercselected_tab).fadeIn();
        
                //  At the end, we add return false so that the click on the link is not executed
                return false;
            });
        });</script>
   <div style="clear:both;" id="w27f207">
      
      <div align="center">
          
         <div style="text-align:center; display:inline-block; margin:0 auto;">
            
            <table syle="padding:0; margin:0; border:none;" cellpadding="0" cellspacing="0" border="0">
                
               <tbody>
                  
                  <tr>
                      
                     <td style="padding:32px;" valign="top">
                        
                     </td>
                      
                     <td style="padding:32px;" valign="top">
                        
                     </td>
                      
                  </tr>
                  
               </tbody>
                
            </table>
            
         </div>
          
      </div>
      
   </div>
    
   <div style="height:3px">
      
   </div>
</div>

I would be very grateful to you for helping me fix the code
   

Where are you adding this code?

SLGray wrote:Where are you adding this code?

on HTML page then will I call in generalities
in the code there is code that conflicts 
please help me to fix it

Are you using the tab code I provided or someone else ? I'm not exactly sure what you're using anymore.

Ange Tuteur wrote:Are you using the tab code I provided or someone else ? I'm not exactly sure what you're using anymore.

i learn here https://jqueryui.com/tabs/
then I apply with css & js
but there is a code that does not run

You wont be able to use the functions for jQueryUI without the library. Have you installed the library in your forum ?

but I believe only the js under.

Code:


<script>        $(document).ready(function(){
            //  When user clicks on tab, this code will be executed
            $("#ercstabs li").click(function() {
                //  First remove class "active" from currently active tab
                $("#ercstabs li").removeClass('ercactive');
        
                //  Now add class "active" to the selected/clicked tab
                $(this).ercaddClass("ercactive");
        
                //  Hide all tab content
                $(".erctab_content").hide();
        
                //  Here we get the href value of the selected tab
                var ercselected_tab = $(this).find("a").attr("href");
        
                //  Show the selected tab content
                $(ercselected_tab).fadeIn();
        
                //  At the end, we add return false so that the click on the link is not executed
                return false;
            });
        });</script>

can u fix it?  

ercaddClass() isn't a function, use addClass() instead.

Code:

$(document).ready(function(){
                //  When user clicks on tab, this code will be executed
                $("#ercstabs li").click(function() {
                    //  First remove class "active" from currently active tab
                    $("#ercstabs li").removeClass('ercactive');
           
                    //  Now add class "active" to the selected/clicked tab
                    $(this).addClass("ercactive");
           
                    //  Hide all tab content
                    $(".erctab_content").hide();
           
                    //  Here we get the href value of the selected tab
                    var ercselected_tab = $(this).find("a").attr("href");
           
                    //  Show the selected tab content
                    $(ercselected_tab).fadeIn();
           
                    //  At the end, we add return false so that the click on the link is not executed
                    return false;
                });
});

Ange Tuteur wrote:ercaddClass() isn't a function, use addClass() instead.

Code:

$(document).ready(function(){
                //  When user clicks on tab, this code will be executed
                $("#ercstabs li").click(function() {
                    //  First remove class "active" from currently active tab
                    $("#ercstabs li").removeClass('ercactive');
            
                    //  Now add class "active" to the selected/clicked tab
                    $(this).addClass("ercactive");
            
                    //  Hide all tab content
                    $(".erctab_content").hide();
            
                    //  Here we get the href value of the selected tab
                    var ercselected_tab = $(this).find("a").attr("href");
            
                    //  Show the selected tab content
                    $(ercselected_tab).fadeIn();
            
                    //  At the end, we add return false so that the click on the link is not executed
                    return false;
                });
});

wohoooo i love it.   
it's work
thank you very much  

Ange Tuteur wrote:Administration panel > modules > javascript codes management > create a new script

Title : what you wish
Placement : in the homepage
Paste the code below and save :

Code:

$(document).ready(function() {
    $('.main:has(.statused) .main-content').each(function() { $(this).attr('id','forum'+$(this).index()).hide() });
    $('.main:has(.statused) .main-head .page-title').each(function() { $(this).unwrap().attr('id','tab'+$(this).next().attr('id').replace(/forum/,'')) });
    $('.main:has(.statused)').before('<div id="tabNav"></div><div id="forumList"></div>');
    $('.main:has(.statused) .page-title').addClass('forumTab').appendTo('#tabNav');
    $('.main:has(.statused) .main-content').addClass('forumCatg').appendTo('#forumList');
    
    $('.forumTab').click(function() {
        var n = $(this).attr('id').replace(/tab/,'');
        if ($('#forum'+n).css('display') == 'none') {
            $('.forumCatg').not($('#forum'+n)).hide();
            $('#forum'+n).show()
        }
        else { $('#forum'+n).hide() }
    });
});

Then add this CSS :
Display > colors > CSS stylesheet

Code:

.forumTab {
    display:inline-block;
    background:#EEE;
    border:1px solid #CCC;
    padding:2px;
    margin:0 3px;
    cursor:pointer;
}
.forumTab:hover { background:#FFA; }

result should be similar to : http://generaltesting.forumotion.com/forum

great work for punbb
my forum is phpbb2 is there some thing like it for phpbb2 none template

thanks for enhancements, but the problem has been solved