Disable tab that shows all results

Question

Disable tab that shows all results

Navigation

#1 by (4 votes)
#2 by (1 votes)
#3 by (0 votes)

3

I have problems with this code, because I want to register the case, however I want to remove the tab where everyone appears, either part of each selected!

The first tab is to show all (I want to disable), I want it to start straight from test1, but it does not start, it always shows all

//* Isotope js
    function protfolioIsotope(){
        if ( $('.portfolio').length ){ 
            // Activate isotope in container
            $(".portfolio_inner").imagesLoaded( function() {
                $(".portfolio_inner").isotope({
                    layoutMode: 'fitRows',  
                }); 
            }); 
            
            // Add isotope click function 
            $(".portfolio_filter li").on('click',function(){
                $(".portfolio_filter li").removeClass("active");
                $(this).addClass("active"); 
				element.removeAttribute('data-filter');
                var selector = $(this).attr("data-filter");
                $(".portfolio_inner").isotope({
                    filter: selector,
                    animationOptions: {
                        duration: 450,
                        easing: "linear",
                        queue: false,
                    }
                });
                return false;
            }); 
             
            //*  Simple LightBox js 
            $('.imageGallery .light').simpleLightbox()
        };
    };

@import 'https://www.quattropublicidades.com.br/starck/css/bootstrap.min.css';
@import 'https://www.quattropublicidades.com.br/starck/css/font-awesome.min.css';
@import 'https://www.quattropublicidades.com.br/starck/css/style.css';

<!-- jQuery v3.3.1 -->
<script src="https://www.quattropublicidades.com.br/starck/js/jquery-3.3.1.min.js"></script><!--Bootstrapv4.0.0--><scriptsrc="https://www.quattropublicidades.com.br/starck/js/popper.min.js"></script>
<script src="https://www.quattropublicidades.com.br/starck/js/bootstrap.min.js"></script><scriptsrc="https://www.quattropublicidades.com.br/starck/vendors/parallaxmouse/parallax.min.js"></script>
<script src="https://www.quattropublicidades.com.br/starck/vendors/lightbox/simpleLightbox.min.js"></script><scriptsrc="https://www.quattropublicidades.com.br/starck/vendors/isotope/imagesloaded.pkgd.min.js"></script>
<script src="https://www.quattropublicidades.com.br/starck/vendors/isotope/isotope.pkgd.min.js"></script><sectionclass="portfolio">
  <div class="container">
    <div class="row">
      <h2 class="col-xl-3 tittle">Meus Trabalhos</h2>
      <ul class="portfolio_filter col-xl-9">
        <li class="active" data-filter="*"><a href="#">todos</a></li>
        <li data-filter=".teste1"><a href="#"> teste1</a></li>
        <li data-filter=".teste2"><a href="#">teste2</a></li>
        <li data-filter=".teste3"><a href="#">teste3</a></li>
      </ul>
    </div>
    <div class="row portfolio_inner">
      <div class="col-lg-3 col-sm-6 graphic creative project teste1">
        teste 1
      </div>
      <div class="col-lg-3 col-sm-6 graphic creative project teste2">
        teste 2
      </div>
      <div class="col-lg-3 col-sm-6 graphic creative project teste3">
        teste 3
      </div>

    </div>


  </div>
</section>

javascript jquery html5 css3

asked by anonymous 15.11.2018 / 16:51

3 answers

1

To remove the "Everyone" you need:

Remove the HTML from the filters, ie remove the

<li class="active" data-filter="*"><a href="#">todos</a></li>

Define the initial filter in the isotope constructor

$(".portfolio_inner").isotope({
    layoutMode: 'fitRows',  
    filter: '.teste1'  // adicionar esta linha
});

Example of your working code:

//* Isotope js
    function protfolioIsotope(){
        if ( $('.portfolio').length ){ 
            // Activate isotope in container
            $(".portfolio_inner").imagesLoaded( function() {
                $(".portfolio_inner").isotope({
                    layoutMode: 'fitRows',  
                    filter: '.teste1'  // <--- filtro inicial
                }); 
            }); 
            
            // Add isotope click function 
            $(".portfolio_filter li").on('click',function(){
                $(".portfolio_filter li").removeClass("active");
                $(this).addClass("active"); 
                // element.removeAttribute('data-filter');  // <--- linha removida
                var selector = $(this).attr("data-filter");
                $(".portfolio_inner").isotope({
                    filter: selector,
                    animationOptions: {
                        duration: 450,
                        easing: "linear",
                        queue: false,
                    }
                });
                return false;
            }); 
             
            //*  Simple LightBox js 
            $('.imageGallery .light').simpleLightbox()
        };
    };

    protfolioIsotope();

@import 'https://www.quattropublicidades.com.br/starck/css/bootstrap.min.css';
@import 'https://www.quattropublicidades.com.br/starck/css/font-awesome.min.css';
@import 'https://www.quattropublicidades.com.br/starck/css/style.css';

<!-- jQuery v3.3.1 -->
<script src="https://www.quattropublicidades.com.br/starck/js/jquery-3.3.1.min.js"></script><!--Bootstrapv4.0.0--><scriptsrc="https://www.quattropublicidades.com.br/starck/js/popper.min.js"></script>
<script src="https://www.quattropublicidades.com.br/starck/js/bootstrap.min.js"></script><scriptsrc="https://www.quattropublicidades.com.br/starck/vendors/parallaxmouse/parallax.min.js"></script>
<script src="https://www.quattropublicidades.com.br/starck/vendors/lightbox/simpleLightbox.min.js"></script><scriptsrc="https://www.quattropublicidades.com.br/starck/vendors/isotope/imagesloaded.pkgd.min.js"></script>
<script src="https://www.quattropublicidades.com.br/starck/vendors/isotope/isotope.pkgd.min.js"></script><sectionclass="portfolio">
  <div class="container">
    <div class="row">
      <h2 class="col-xl-3 tittle">Meus Trabalhos</h2>
      <ul class="portfolio_filter col-xl-9">
        <!-- <li class="active" data-filter="*"><a href="#">todos</a></li> <-- linha removida -->
        <li data-filter=".teste1" class="active"><a href="#"> teste1</a></li>
        <li data-filter=".teste2"><a href="#">teste2</a></li>
        <li data-filter=".teste3"><a href="#">teste3</a></li>
      </ul>
    </div>
    <div class="row portfolio_inner">
      <div class="col-lg-3 col-sm-6 graphic creative project teste1">
        teste 1
      </div>
      <div class="col-lg-3 col-sm-6 graphic creative project teste2">
        teste 2
      </div>
      <div class="col-lg-3 col-sm-6 graphic creative project teste3">
        teste 3
      </div>

    </div>


  </div>
</section>

21.11.2018 / 18:20

0

For the link that you added in your comment that defines what will be active is the active class ( class="active" ) and what defines who belongs to the filter is the code data-filter="" being * (asterisk)

Just add the active class in test1 and remove the li from showing all:

<div class="row">
      <h2 class="col-xl-3 tittle">Meus Trabalhos</h2>
      <ul class="portfolio_filter col-xl-9">
        <li class="active" data-filter=".teste1"><a href="#"> teste1</a></li>
        <li data-filter=".teste2"><a href="#">teste2</a></li>
        <li data-filter=".teste3"><a href="#">teste3</a></li>
      </ul>
    </div>

21.11.2018 / 17:59

How to put quotes in a variable for MySQL query Assign function dynamically

score 4 · Accepted Answer

If you do not want the todos , simply do not include it in the layout and when loading the page pass the filter you want, in the example below I put the class .teste1

And note that you left in the code the "graphic creative project" tags are the markers of your filter, see that I added the .teste2 class in the third element, so it will also appear in the Test tab 2, due to the filter.

//* Isotope js
    function protfolioIsotope(){
        if ( $('.portfolio').length ){ 
            // Activate isotope in container
            $(".portfolio_inner").imagesLoaded( function() {
                $(".portfolio_inner").isotope({
                    filter: '.teste1',
                    layoutMode: 'fitRows',  
                    
                }); 
            }); 
            
            // Add isotope click function 
            $(".portfolio_filter li").on('click',function(){
                $(".portfolio_filter li").removeClass("active");
                $(this).addClass("active"); 
                var selector = $(this).attr("data-filter");
                $(".portfolio_inner").isotope({
                    filter: selector,
                    animationOptions: {
                        duration: 450,
                        easing: "linear",
                        queue: false,
                    }
                });
                return false;
            }); 
             
            //*  Simple LightBox js 
            $('.imageGallery .light').simpleLightbox()
        };
    }; 
    
    //* Select js
    function selectmenu(){
        if ( $('.post_select').length ){ 
            $('select').niceSelect();
        };
    };  
       
    
    protfolioIsotope ();

@import 'https://www.quattropublicidades.com.br/starck/css/bootstrap.min.css';
@import 'https://www.quattropublicidades.com.br/starck/css/font-awesome.min.css';
@import 'https://www.quattropublicidades.com.br/starck/css/style.css';

<!-- jQuery v3.3.1 -->
<script src="https://www.quattropublicidades.com.br/starck/js/jquery-3.3.1.min.js"></script><!--Bootstrapv4.0.0--><scriptsrc="https://www.quattropublicidades.com.br/starck/js/popper.min.js"></script>
<script src="https://www.quattropublicidades.com.br/starck/js/bootstrap.min.js"></script><scriptsrc="https://www.quattropublicidades.com.br/starck/vendors/parallaxmouse/parallax.min.js"></script>
<script src="https://www.quattropublicidades.com.br/starck/vendors/lightbox/simpleLightbox.min.js"></script><scriptsrc="https://www.quattropublicidades.com.br/starck/vendors/isotope/imagesloaded.pkgd.min.js"></script>
<script src="https://www.quattropublicidades.com.br/starck/vendors/isotope/isotope.pkgd.min.js"></script><sectionclass="portfolio">
  <div class="container">
    <div class="row">
      <h2 class="col-xl-3 tittle">Meus Trabalhos</h2>
      <ul class="portfolio_filter col-xl-9">
        <!--li data-filter="*"><a href="#">todos</a></li>-->
        <li class="active" data-filter=".teste1"><a href="#"> teste1</a></li>
        <li data-filter=".teste2"><a href="#">teste2</a></li>
        <li data-filter=".teste3"><a href="#">teste3</a></li>
      </ul>
    </div>
    <div class="row portfolio_inner">
      <div class="col-lg-3 col-sm-6 teste1">
        teste 1
      </div>
      <div class="col-lg-3 col-sm-6 teste2">
        teste 2
      </div>
      <div class="col-lg-3 col-sm-6 teste2 teste3">
        teste 3
      </div>
    </div>
  </div>
</section>