The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

add tab

+3
Pizza Boi
Rhino.Freak
erchima
7 posters

Go down

Solved add tab

Post by erchima March 24th 2014, 4:57 pm

how to add tab above categories
erchima
erchima
Forumember

Female Posts : 627
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: add tab

Post by Rhino.Freak March 24th 2014, 5:46 pm

Rhino.Freak
Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 104
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: add tab

Post by erchima March 25th 2014, 12:44 am

thank you, but not it i mean Very Happy
i want like on avacweb add tab  PqQTWd2
erchima
erchima
Forumember

Female Posts : 627
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: add tab

Post by Pizza Boi March 25th 2014, 3:09 am

Hi Very Happy

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
Pizza Boi
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

Back to top Go down

Solved Re: add tab

Post by Kite Trojan March 25th 2014, 3:12 am

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

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: add tab

Post by Pizza Boi March 25th 2014, 3:15 am

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

Hi Very Happy

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

Regards,
Pizza Boi
Pizza Boi
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

Back to top Go down

Solved Re: add tab

Post by erchima March 25th 2014, 3:50 am

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

i already search it but is not showing

add tab  EEJeEef
erchima
erchima
Forumember

Female Posts : 627
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: add tab

Post by Ange Tuteur March 25th 2014, 3:57 am

Hello,

The version of your forum is ?
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: add tab

Post by erchima March 25th 2014, 4:03 am

punbb
erchima
erchima
Forumember

Female Posts : 627
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: add tab

Post by Ange Tuteur March 25th 2014, 4:46 am

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
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: add tab

Post by erchima March 25th 2014, 5:06 am

wohooooo thank you very much :wouhou: 
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)
erchima
erchima
Forumember

Female Posts : 627
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: add tab

Post by erchima March 26th 2014, 5:05 am

up
erchima
erchima
Forumember

Female Posts : 627
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: add tab

Post by Ange Tuteur March 26th 2014, 7:20 am

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() }
    });
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: add tab

Post by erchima March 26th 2014, 7:35 am

thank you very much its work  :wouhou: 
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
erchima
erchima
Forumember

Female Posts : 627
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: add tab

Post by SLGray March 26th 2014, 8:46 am

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


add tab  Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51568
Reputation : 3525
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: add tab

Post by erchima March 26th 2014, 10:12 am

SLGray wrote:Is this all in one code?  You are mixing CSS and JavaScript together.
yes i want put to generalities
erchima
erchima
Forumember

Female Posts : 627
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: add tab

Post by Ange Tuteur March 26th 2014, 11:25 am

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

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: add tab

Post by erchima March 27th 2014, 2:41 am

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
 Crying or Very sad  Sad
erchima
erchima
Forumember

Female Posts : 627
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: add tab

Post by SLGray March 27th 2014, 5:13 am

Where are you adding this code?


add tab  Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51568
Reputation : 3525
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: add tab

Post by erchima March 27th 2014, 6:09 am

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
erchima
erchima
Forumember

Female Posts : 627
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: add tab

Post by Ange Tuteur March 27th 2014, 6:12 am

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

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: add tab

Post by erchima March 27th 2014, 6:17 am

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
erchima
erchima
Forumember

Female Posts : 627
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: add tab

Post by Ange Tuteur March 27th 2014, 6:22 am

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

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: add tab

Post by erchima March 27th 2014, 6:26 am

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?  Sad
erchima
erchima
Forumember

Female Posts : 627
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: add tab

Post by Ange Tuteur March 27th 2014, 6:33 am

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
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: add tab

Post by erchima March 27th 2014, 7:08 am

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.  :wouhou: 
it's work
thank you very much  kiss
erchima
erchima
Forumember

Female Posts : 627
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: add tab

Post by Michael_vx March 27th 2014, 7:37 am

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 Sad
my forum is phpbb2 is there some thing like it for phpbb2 none template
Michael_vx
Michael_vx
Forumember

Male Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: add tab

Post by erchima March 28th 2014, 10:45 am

thanks for enhancements, but the problem has been solved
erchima
erchima
Forumember

Female Posts : 627
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: add tab

Post by Ange Tuteur March 28th 2014, 10:49 am

Topic solved and archived
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum