Discussion on Nevia - Responsive HTML5 Template (Page 7)

Vasterad supports this item

Supported

This author's response time can be up to 1 business day.

680 comments found.

ziggyz27 Purchased

almost 11 years ago

Hi Vasterad Excellent theme, thank you.

This may help someone with Dynamic Tabs so let me know if you have any suggestions.

I needed more control on the Tabs as I wanted to give user control to add another tab if needed. So I modified it as follows in custom.js and it works. The only issue left to handle is i can only click on the existing first tab, the rest of the tabs that are added dynamically are there, content is there but when I click the tab, it does not switch the tab.


/*----------------------------------------------------*/
/*    Tabs
/*----------------------------------------------------*/

    var $tabsNav    = $('.tabs-nav'),
        $tabsNavLis = $tabsNav.children('li'),
        $tabContent = $('.tab-content'),
        $tabTemplate = "<li class="active"><a href="#tab{cntr}">Company #{cntr}</a></li>",
        $tabcounter = 2;

    $tabsNav.each(function() {
        var $this = $(this);
        //alert($this);
        $this.next().children('.tab-content').stop(true,true).hide()
                                             .first().show();

        $this.children('li').first().addClass('active').stop(true,true).show();
    });

    $tabsNavLis.on('click', function(e) {
        var $this = $(this);

        //alert($this);

        $this.siblings().removeClass('active').end()
             .addClass('active');

        $this.parent().next().children('.tab-content').stop(true,true).hide()
                                                      .siblings( $this.find('a').attr('href') ).fadeIn();

        e.preventDefault();
    });

     $( "#add_tab" )
        .click(function() {

            $id = $tabcounter;
            $li = $tabTemplate.replace( /#\{cntr\}/g, "#" + $id );
            $li = $li.replace( /#tab\{cntr\}/g, "#tab" + $id );

            //get current tab content id from active tab href attribute
            $cur = $tabsNav.find('.active').find('a').attr('href');

            //alert($cur);

            //remove active tab class
            $(".tabs-nav li").removeClass("active");

            //hide active tab content
            $($cur).hide();            

            //add new tab
            $tabsNav.append( $li );

            //add tab content
            $('.tabs-container').append( "<div class="tab-content" id="tab" + $tabcounter + "">test 123</div>");

            $tabsNav.listview().listview("refresh");            

            $tabcounter++;

        });

ziggyz27 Purchased

almost 11 years ago

Ok caught one bug, the statement prior to the counter increment at the end was causing tabs id to not increment so now its incrementing properly but the issue with Tabs not displaying the relevant div persists.

remove the follow line from above code:


$tabsNav.listview().listview("refresh");

altayevrim Purchased

almost 11 years ago

It’s really easy to use and integrate. There is just a problem, i don’t exactly know all elements and how to use them. Even in a small design there are lots of hidden things. But in a design like that lots lots of things that we can do. I’m really glad to purchasing a design like that, thanks a lot author!

Highly recommended, if you want great things…

Last Update	30 August 2024
High Resolution	Yes
Compatible Browsers	IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, Edge
ThemeForest Files Included	Layered PSD, PHP Files, HTML Files, CSS Files, JS Files
Documentation	Well Documented
Layout	Responsive
Tags	ajax contact form, business site, corporate website, creative portfolio, crisp business, html5, icons, layerslider, minimal, minimalist design, professional, responsive, retina ready, shop
Created	13 years ago

Discussion on Nevia - Responsive HTML5 Template

Discussion on Nevia - Responsive HTML5 Template

Vasterad supports this item

680 comments found.

Vasterad

Tell us what you think!