The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

add tab

View previous topic View next topic Go down

Solved add tab

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

how to add tab above categories

erchima
Forumember

Female Posts : 629
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 on March 24th 2014, 5:46 pm


Rhino.Freak
Helper
Helper

Male Posts : 1246
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: add tab

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

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

erchima
Forumember

Female Posts : 629
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 on 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
Hyperactive

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

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: add tab

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

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

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 on 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
Hyperactive

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

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: add tab

Post by erchima on 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


erchima
Forumember

Female Posts : 629
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 on March 25th 2014, 3:57 am

Hello,

The version of your forum is ?

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: add tab

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

punbb

erchima
Forumember

Female Posts : 629
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 on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: add tab

Post by erchima on 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
Forumember

Female Posts : 629
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 on March 26th 2014, 5:05 am

up

erchima
Forumember

Female Posts : 629
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 on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: add tab

Post by erchima on 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
Forumember

Female Posts : 629
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 on March 26th 2014, 8:46 am

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


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


SLGray
Administrator
Administrator

Male Posts : 36698
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: add tab

Post by erchima on 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
Forumember

Female Posts : 629
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 on March 26th 2014, 11:25 am

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: add tab

Post by erchima on 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
Forumember

Female Posts : 629
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 on March 27th 2014, 5:13 am

Where are you adding this code?


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


SLGray
Administrator
Administrator

Male Posts : 36698
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: add tab

Post by erchima on 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
Forumember

Female Posts : 629
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 on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: add tab

Post by erchima on 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
Forumember

Female Posts : 629
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 on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: add tab

Post by erchima on 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
Forumember

Female Posts : 629
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 on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: add tab

Post by erchima on 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
Forumember

Female Posts : 629
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 on 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
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 on March 28th 2014, 10:45 am

thanks for enhancements, but the problem has been solved

erchima
Forumember

Female Posts : 629
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 on March 28th 2014, 10:49 am

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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