Disable tab showing all results

Asked

Viewed 166 times

3

I’m having problems with this code, because I want to register the case, however I want to remove the tab where all appear, want part of each selected!

The first tab, is to show all (I want to disable), I want you to start straight from the teste1, but it doesn’t start, 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>
<!-- Bootstrap v4.0.0 -->
<script src="https://www.quattropublicidades.com.br/starck/js/popper.min.js"></script>
<script src="https://www.quattropublicidades.com.br/starck/js/bootstrap.min.js"></script>
<script src="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>
<script src="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>
<section class="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
  • 1

    Evandro vc could improve the text of the question, giving more details and explaining better what you intend. The way it’s written is kind of confusing not to understand very well the problem and what you want...

  • have 5 Nav-tabs, being that the first shows all the results, I want it not appear more ex - all | cards | folders | banners, I want to take the all

  • Please , improve your question so we can help you.

  • Take the All tab, put a class in it type class="all" and in CSS put . all{display:None} ready will disappear from the screen

  • not have this class, I will post on the server and pass the link for you understand ok

  • https://www.quattropublicidades.com.br/starck/protfolio.html at a glance, and see that I want to remove all

  • You just want to take the "All" out of the Isotope? Nothing else??

Show 2 more comments

3 answers

3


If you don’t want the tab 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 had left in the code the example "tags" (Graphic Creative project) they are the markers of your filter, see that I added the class . teste2 in the third element, so it will also appear in the Test 2 tab, 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>
<!-- Bootstrap v4.0.0 -->
<script src="https://www.quattropublicidades.com.br/starck/js/popper.min.js"></script>
<script src="https://www.quattropublicidades.com.br/starck/js/bootstrap.min.js"></script>
<script src="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>
<script src="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>

<section class="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>

  • We respond almost at the same time.. hahaha

  • @fernandosavio is that I even stopped to fix the first question :P

  • @Leandroangelo perfect, as I can make just one, thank you to Father Avio.. rs details that when we are full of head we can not arrange..... obligationooo

1

To remove the "All" you need:

  1. Remove HTML from filters, i.e., remove

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

  2. Set the initial filter in the Isotope

    $(".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>
<!-- Bootstrap v4.0.0 -->
<script src="https://www.quattropublicidades.com.br/starck/js/popper.min.js"></script>
<script src="https://www.quattropublicidades.com.br/starck/js/bootstrap.min.js"></script>
<script src="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>
<script src="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>
<section class="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>

0

By the link 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="" where * (asterisk) refers to all,

Just add the active class in the teste1 and remove the li from show 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>

Browser other questions tagged javascript jquery html5 css3

You are not signed in. Login or sign up in order to post.