1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.5 help setting up custom tabs for site feed

Discussion in 'Styling and Customization Questions' started by zoldos, Nov 19, 2015.

  1. zoldos

    zoldos Well-Known Member

    I have setup custom tabs for my forum using the below code (it's all contained in PAGE_CONTAINER). It works great (the main tab for the forum display, and the second tab for the site news feed), but I can't get the news feed to display when the tab is selected/clicked. It always says "there is no feed to display" but if I click the displayed link, "View Older Feed", it then displays the current feed. How can I fix this? I'd like it display the feed as soon as the tab is clicked. Thanks!

    Below is all the code for the mod:

    Code:
    <xen:if is="{$isIndexPage}">
    <style>
    .tabs-menu {
        height: 30px;
        float: left;
        clear: both;
    }
    
    .tabs-menu li {
        height: 30px;
        line-height: 30px;
        float: left;
        margin-right: 10px;
        background-color: #ccc;
        border-top: 1px solid #d4d4d1;
        border-right: 1px solid #d4d4d1;
        border-left: 1px solid #d4d4d1;
    }
    
    .tabs-menu li.current {
        position: relative;
        background-color: #fff;
        border-bottom: 1px solid #fff;
        z-index: 5;
    }
    
    .tabs-menu li a {
        padding: 10px;
        text-transform: uppercase;
        color: #fff;
        text-decoration: none; 
    }
    
    .tabs-menu .current a {
        color: #2e7da3;
    }
    
    .tab {
        border: 1px solid #d4d4d1;
        background-color: #fff;
        float: left;
        margin-bottom: 20px;
        width: auto;
    }
    
    .tab-content {
     
        padding: 20px;
        display: none;
    }
    
    #tab-1 {
     display: block;  
    }
    </style>
    
    
    <script>
    $(document).ready(function() {
        $(".tabs-menu a").click(function(event) {
            event.preventDefault();
            $(this).parent().addClass("current");
            $(this).parent().siblings().removeClass("current");
            var tab = $(this).attr("href");
            $(".tab-content").not(tab).css("display", "none");
            $(tab).fadeIn();
        });
    });
    </script>
    </xen:if>
    
    Code:
    <xen:if is="{$isIndexPage}">
                           
                           
                            <div id="tabs-container">
                               <ul class="tabs-menu">
                                   <li class="current"><a href="#tab-1">Forum</a></li>
                                   <li><a href="#tab-2">Site News Feed</a></li>
                                   
                               </ul>
                                <div class="tab">
                                                     <div id="tab-1" class="tab-content">
                                                        {xen:raw $contents}
                                                     </div>
                                                     <div id="tab-2" class="tab-content">
                                                        <xen:include template="news_feed_page_global" />
                                 </div>
                                                     </div>
                                                   </div>
    
                            <xen:else />
                             {xen:raw $contents}
                            </xen:if>  
                            </xen:if>  
    
     

Share This Page