Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Conflito de Áreas do Plugin Isotope

19-09-2017 08:01

https://isotope.metafizzy.co/


como faço para unir essas partes aqui uma é somente de filtragem por categoria outra é somente de filtragem de letras.


Filtragem de Categorias
'use strict'; $(document).ready(function() { var $grid = $('.default-grid').isotope({ itemSelector: '.default-grid-item', masonry: { } }); /*======= Filterning js starts ======= */ $(window).on('load',function(){ var $container = $('.filter-container'); $container.isotope({ filter: '*', animationOptions: { duration: 750, easing: 'linear', queue: false } }); $('.sorting-filter li .filter-tab').on('click',function(){ $('.sorting-filter .current').removeClass('current'); $(this).addClass('current'); var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector, animationOptions: { duration: 750, easing: 'linear', queue: false } }); return false; }); }); /*======= Filterning js ends ======= */ /*======= Sorting js starts ======= */ $(window).on('load',function(){ var $container = $('.sorting-container'); $container.isotope({ sortBy : 'name_asc', sortAscending : true, filter: '*', animationOptions: { duration: 750, easing: 'linear', queue: false } }); $('.sorting_txt-filter li .sorting-tab').on('click',function(){ // get href attribute, minus the '#' var sortName = $(this).val(); $('#container').isotope({ sortBy : sortName }); return false; }); $('.sorting_txt-filter li .sorting-tab').on('click',function(){ $('.sorting_txt-filter .current').removeClass('current'); $(this).addClass('current'); var order_tab = ($(this).val()); var selector = $(this).attr('data-filter'); if(order_tab=="asc") order_tab=true; else order_tab=false; $container.isotope({ sortAscending: order_tab, filter: selector, animationOptions: { duration: 750, easing: 'linear', queue: false } }); return false; }); }); /*======= Sorting js ends ======= */ });

Filtragem de palavras,
// quick search regex var qsRegex; var buttonFilter; // init Isotope var $grid = $('.filter-container').isotope({ itemSelector: '.col-xl-6', layoutMode: 'fitRows', filter: function() { var $this = $(this); var searchResult = qsRegex ? $this.text().match( qsRegex ) : true; var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true; return searchResult && buttonResult; } }); $('#filters').on( 'click', 'button', function() { buttonFilter = $( this ).attr('data-filter'); $grid.isotope(); }); // use value of search field to filter var $quicksearch = $('#quicksearch').keyup( debounce( function() { qsRegex = new RegExp( $quicksearch.val(), 'gi' ); $grid.isotope(); }) ); // change is-checked class on buttons $('.button-group').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function() { $buttonGroup.find('.is-checked').removeClass('is-checked'); $( this ).addClass('is-checked'); }); }); // debounce so filtering doesn't happen every millisecond function debounce( fn, threshold ) { var timeout; return function debounced() { if ( timeout ) { clearTimeout( timeout ); } function delayed() { fn(); timeout = null; } setTimeout( delayed, threshold || 100 ); }; }

Já tentei unir as partes mais importantes dos dois, ja tentei de tudo, existe alguma forma de fazer os dois rodarem juntos ? obrigado.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Conflito de Áreas do Plugin Isotope

19-09-2017 12:30

Não conhecia o script. Baixei o script e estou na index dos exemplos.

Ali na index tem Filter metal. Você fala esse filtro, tipo, categoria metal que comecem com a letra a?
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Conflito de Áreas do Plugin Isotope

19-09-2017 15:55

Então eu gostaria de unir esse dois templates ambos utilizam isotope


Como disse preciso unir o template um por conta de utilizar a busca via palavras e unir o template dois para utilizar a busca por categorias.

Download dos dois templates
www.twbteam.com.br/UnirTemplates.rar

O html, css consegui fazer funcionar tudo 100% agora a questão do java script quando eu consigo unir o plugin para de funcionar.
0
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Conflito de Áreas do Plugin Isotope

19-09-2017 16:01

O link estava errado faltou o http://

http://www.twbteam.com.br/UnirTemplates.rar
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Conflito de Áreas do Plugin Isotope

19-09-2017 19:32

Vou testar.
0
A melhor hospedagem para o seu site HostGator!
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Conflito de Áreas do Plugin Isotope

19-09-2017 19:47

Esse conflito você fala em relação ao layout ou aos scripts?

Eu fiz o seguinte, abri o arquivo Template/task-board.html e no final da página antes do fechamento da tag body coloquei todo o conteúdo do arquivo Template2/index.html

A única coisa que mudei nesse código que adicionei no task-board.html foi fazer a chamada do js.

<script src="../Template2/js/index.js"></script>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Conflito de Áreas do Plugin Isotope

21-09-2017 03:34

Imagem

Então é o seguinte veja na imagem que contem 3 tipos de filtragem por Status / Prioridade / Pesquisar

Status e Prioridade Funcionam normalmente juntos, Agora quando tento interligar Pesquisa junto Status e Prioridade Param de Funcionar.
Ambos os códigos funcionam sozinhos, mas quando tento juntar os dois não funcionam,
Código Pesquisar
// quick search regex var qsRegex; var buttonFilter; // init Isotope var $grid = $('.filter-container').isotope({ itemSelector: '.col-xl-6', layoutMode: 'fitRows', filter: function() { var $this = $(this); var searchResult = qsRegex ? $this.text().match( qsRegex ) : true; var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true; return searchResult && buttonResult; } }); $('#filter-tab').on( 'click', 'button', function() { buttonFilter = $( this ).attr('data-filter'); $grid.isotope(); }); // use value of search field to filter var $quicksearch = $('#quicksearch').keyup( debounce( function() { qsRegex = new RegExp( $quicksearch.val(), 'gi' ); $grid.isotope(); }) ); // change is-checked class on buttons $('.button-group').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function() { $buttonGroup.find('.is-checked').removeClass('is-checked'); $( this ).addClass('is-checked'); }); }); // debounce so filtering doesn't happen every millisecond function debounce( fn, threshold ) { var timeout; return function debounced() { if ( timeout ) { clearTimeout( timeout ); } function delayed() { fn(); timeout = null; } setTimeout( delayed, threshold || 100 ); }; }

Código de Status e Prioridade.

'use strict'; $(document).ready(function() { var $grid = $('.default-grid').isotope({ itemSelector: '.default-grid-item', masonry: { } }); /*======= Filterning js starts ======= */ $(window).on('load',function(){ var $container = $('.filter-container'); $container.isotope({ filter: '*', animationOptions: { duration: 750, easing: 'linear', queue: false } }); $('.sorting-filter li .filter-tab').on('click',function(){ $('.sorting-filter .current').removeClass('current'); $(this).addClass('current'); var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector, animationOptions: { duration: 750, easing: 'linear', queue: false } }); return false; }); }); /*======= Filterning js ends ======= */ /*======= Sorting js starts ======= */ $(window).on('load',function(){ var $container = $('.sorting-container'); $container.isotope({ sortBy : 'name_asc', sortAscending : true, filter: '*', animationOptions: { duration: 750, easing: 'linear', queue: false } }); $('.sorting_txt-filter li .sorting-tab').on('click',function(){ // get href attribute, minus the '#' var sortName = $(this).val(); $('#container').isotope({ sortBy : sortName }); return false; }); $('.sorting_txt-filter li .sorting-tab').on('click',function(){ $('.sorting_txt-filter .current').removeClass('current'); $(this).addClass('current'); var order_tab = ($(this).val()); var selector = $(this).attr('data-filter'); if(order_tab=="asc") order_tab=true; else order_tab=false; $container.isotope({ sortAscending: order_tab, filter: selector, animationOptions: { duration: 750, easing: 'linear', queue: false } }); return false; }); }); /*======= Sorting js ends ======= */ });


Qual forma eu teria de fazer os dois funcionarem juntos em vista que quando eu desbilito o arquivo de um dos dois funcionam normalmente, filtram pesquisar por palavras normalmente sozinho, e filtra normalmente o Status e Prioridade sozinhos.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Conflito de Áreas do Plugin Isotope

21-09-2017 13:45

Rodei aqui ambos exemplos.

O exemplo da pasta Template não vi nada funcionar.
O exemplo da pasta Template2 funciona.

Como ambos scripts usam diversos plugins achar qual exatamente que está dando conflito é complicado.
O mais indicado é tentar o jQuery noconflict https://api.jquery.com/jquery.noconflict/
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Conflito de Áreas do Plugin Isotope

21-09-2017 19:07

Aonde coloco o noconflit

'use strict'; $(document).ready(function() { var $grid = $('.default-grid').isotope({ itemSelector: '.default-grid-item', masonry: { } }); /*======= Filterning js starts ======= */ $(window).on('load',function(){ var $container = $('.filter-container'); $container.isotope({ filter: '*', animationOptions: { duration: 750, easing: 'linear', queue: false } }); $('.sorting-filter li .filter-tab').on('click',function(){ $('.sorting-filter .current').removeClass('current'); $(this).addClass('current'); var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector, animationOptions: { duration: 750, easing: 'linear', queue: false } }); return false; }); }); /*======= Filterning js ends ======= */ /*======= Sorting js starts ======= */ $(window).on('load',function(){ var $container = $('.sorting-container'); $container.isotope({ sortBy : 'name_asc', sortAscending : true, filter: '*', animationOptions: { duration: 750, easing: 'linear', queue: false } }); $('.sorting_txt-filter li .sorting-tab').on('click',function(){ // get href attribute, minus the '#' var sortName = $(this).val(); $('#container').isotope({ sortBy : sortName }); return false; }); $('.sorting_txt-filter li .sorting-tab').on('click',function(){ $('.sorting_txt-filter .current').removeClass('current'); $(this).addClass('current'); var order_tab = ($(this).val()); var selector = $(this).attr('data-filter'); if(order_tab=="asc") order_tab=true; else order_tab=false; $container.isotope({ sortAscending: order_tab, filter: selector, animationOptions: { duration: 750, easing: 'linear', queue: false } }); return false; }); }); /*======= Sorting js ends ======= */ });

Aqui também aonde eu coloco ? obrigado
// quick search regex var qsRegex; var buttonFilter; // init Isotope var $grid2 = $('.filter-container').isotope({ itemSelector: '.col-xl-6', layoutMode: 'fitRows', filter: function() { var $this = $(this); var searchResult = qsRegex ? $this.text().match( qsRegex ) : true; var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true; return searchResult && buttonResult; } }); $('#filter-tab').on( 'click', 'button', function() { buttonFilter = $( this ).attr('data-filter'); $grid2.isotope(); }); // use value of search field to filter var $quicksearch = $('#quicksearch').keyup( debounce( function() { qsRegex = new RegExp( $quicksearch.val(), 'gi' ); $grid2.isotope(); }) ); // change is-checked class on buttons $('.button-group').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function() { $buttonGroup.find('.is-checked').removeClass('is-checked'); $( this ).addClass('is-checked'); }); }); // debounce so filtering doesn't happen every millisecond function debounce( fn, threshold ) { var timeout; return function debounced() { if ( timeout ) { clearTimeout( timeout ); } function delayed() { fn(); timeout = null; } setTimeout( delayed, threshold || 100 ); }; }

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Conflito de Áreas do Plugin Isotope

22-09-2017 14:58

Se esses scripts são chamadas por .js, você coloca após a chamada do jQuery. Como mostrado no exemplo a seguir:

<script src="other_lib.js"></script> <script src="jquery.js"></script> <script> $.noConflict(); // Code that uses other library's $ can follow here. </script>

Você também pode usar da seguinte forma:

<script src="other_lib.js"></script> <script src="jquery.js"></script> <script> $.noConflict(); jQuery( document ).ready(function( $ ) { // Code that uses jQuery's $ can follow here. }); // Code that uses other library's $ can follow here. </script>

Você vê ai que tem duas áreas para colocar o código.

Uma para jQuery
// Code that uses jQuery's $ can follow here.


E outra área fora da função para outras bibliotecas

// Code that uses other library's $ can follow here.

Você pode fazer alguns testes colocando o código do jQuery dentro da área definida. E o outro código você deixa na área específica acima.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Conflito de Áreas do Plugin Isotope

22-09-2017 15:34

Tentei assim mas não deu certo.

Não funciona nenhum dos dois o jquery está sendo carregado acima deles.
<script> $.noConflict(); jQuery( document ).ready(function( $ ) { 'use strict'; $(document).ready(function($) { var $grid = $('.default-grid').isotope({ itemSelector: '.default-grid-item', masonry: { } }); /*======= Filterning js starts ======= */ $(window).on('load',function(){ var $container = $('.filter-container'); $container.isotope({ filter: '*', animationOptions: { duration: 750, easing: 'linear', queue: false } }); $('.sorting-filter li .filter-tab').on('click',function(){ $('.sorting-filter .current').removeClass('current'); $(this).addClass('current'); var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector, animationOptions: { duration: 750, easing: 'linear', queue: false } }); return false; }); }); /*======= Filterning js ends ======= */ /*======= Sorting js starts ======= */ $(window).on('load',function(){ var $container = $('.sorting-container'); $container.isotope({ sortBy : 'name_asc', sortAscending : true, filter: '*', animationOptions: { duration: 750, easing: 'linear', queue: false } }); $('.sorting_txt-filter li .sorting-tab').on('click',function(){ // get href attribute, minus the '#' var sortName = $(this).val(); $('#container').isotope({ sortBy : sortName }); return false; }); $('.sorting_txt-filter li .sorting-tab').on('click',function(){ $('.sorting_txt-filter .current').removeClass('current'); $(this).addClass('current'); var order_tab = ($(this).val()); var selector = $(this).attr('data-filter'); if(order_tab=="asc") order_tab=true; else order_tab=false; $container.isotope({ sortAscending: order_tab, filter: selector, animationOptions: { duration: 750, easing: 'linear', queue: false } }); return false; }); }); /*======= Sorting js ends ======= */ });// Code that uses jQuery's $ can follow here. }); // Code that uses other library's $ can follow here. </script> <script> $.noConflict(); jQuery( document ).ready(function( $ ) { // quick search regex var qsRegex; var buttonFilter; var $jq = jQuery.noConflict(); // init Isotope var $grid2 = $jq('.filter-container').isotope({ itemSelector: '.col-xl-6', layoutMode: 'fitRows', filter: function() { var $this = $(this); var searchResult = qsRegex ? $this.text().match( qsRegex ) : true; var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true; return searchResult && buttonResult; } }); // use value of search field to filter var $quicksearch = $('#quicksearch').keyup( debounce( function() { qsRegex = new RegExp( $quicksearch.val(), 'gi' ); $grid2.isotope(); }) ); // change is-checked class on buttons $('.button-group').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function() { $buttonGroup.find('.is-checked').removeClass('is-checked'); $( this ).addClass('is-checked'); }); }); // debounce so filtering doesn't happen every millisecond function debounce( fn, threshold ) { var timeout; return function debounced() { if ( timeout ) { clearTimeout( timeout ); } function delayed() { fn(); timeout = null; } setTimeout( delayed, threshold || 100 ); }; } </script>

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Conflito de Áreas do Plugin Isotope

22-09-2017 15:43

Eu rodei aqui as duas pastas que você enviou. Na pasta template usei o filtro e a caixa de busca e nada funcionou.

O único que funcionou foi o exemplo da pasta Template2. Ali tem a busca pelas categorias e a caixa de busca. Que funciona sem problema.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Conflito de Áreas do Plugin Isotope

22-09-2017 15:48

o que eu mandei era só um exemplo, o meu mesmo é um pouco diferente o código.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Conflito de Áreas do Plugin Isotope

22-09-2017 15:57

O exemplo do Template2 não tem todos recursos que precisa. Tem o filtro e a busca? Porque não joga o layout em cima dele?
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Conflito de Áreas do Plugin Isotope

01-10-2017 03:46

Agora consegui pegar um exemplo e adequar para mais o menos o que eu preciso, só que estou tendo um problema


Então é seguinte quando seleciono um filtro exemplo metal se eu digitar algo na pesquisa não filtra para de funcionar só volta a funcionar se der um F5 na página.
Está dando outro conflito também quando eu pesquiso algo no campo de texto se eu filtrar a categoria parar de funcionar a filtragem de texto Exemplo abri a página digitei Sodium ele busca somente o sodium vermelho mas se eu selecionar metal junto ele passa a tirar a ordenação de texto sodium e mostra várias outras coisas .

Abaixo Novo Link para baixar.
http://www.mediafire.com/file/ll6h6wi17 ... squisa.zip


como faço para resolver esses dois bugs ? obrigado.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Conflito de Áreas do Plugin Isotope

01-10-2017 15:21

Tem uma opção do script Isotope que funciona a caixa de busca com o filtro nos botões nesse link https://codepen.io/desandro/pen/mCdbD

Nessa lista do link a seguir você encontra vários modos de usar o Isotope https://isotope.metafizzy.co/extras.html
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Conflito de Áreas do Plugin Isotope

02-10-2017 07:22

Como eu faço para quando selecionar um item sumir o nome de Status e ficar marcado somente o nome que eu selecionei ?

<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="status" data-toggle="dropdown"><i class="icofont icofont-chart-histogram-alt"></i> Status</a> <div id="filters" class="dropdown-menu" aria-labelledby="status"> <a class="dropdown-item filter-tab" data-filter="*">Todos</a> <div class="dropdown-divider"></div> <a class="dropdown-item filter-tab" data-filter=".Trabalhando" >Trabalhando</a> <a class="dropdown-item filter-tab" data-filter=".Arquivado">Arquivado</a> <a class="dropdown-item filter-tab" data-filter=".Finalizado">Finalizado</a> </div> </li>

Imagem
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Conflito de Áreas do Plugin Isotope

02-10-2017 08:03

Geralmente esse efeito no caso de lista é feito com select, e aplicando efeitos de CSS ou jQuery.

Nos links a seguir você encontra alguns exemplos

http://freefrontend.com/css-select-boxes/
https://bavotasan.com/2011/style-select ... -only-css/
http://selectric.js.org/demo.html
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Conflito de Áreas do Plugin Isotope

02-10-2017 09:46

Olá então eu peguei um dos exemplos mas eu gostaria de saber como eu faço para alterar ele para não aparecer de cara o nome do campo

Ex ele aparece Category para você selecionar, Gostaria dele Abrir direto na primeira categoria com nome acima já

Imagem de Exemplo
Imagem

Arquivos do Exemplo
http://www.twbteam.com.br/categoria.rar
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Conflito de Áreas do Plugin Isotope

02-10-2017 19:57

Montei um exemplo bem simples baseado nesse link https://www.w3schools.com/css/css_dropdowns.asp
Ai é só trabalhar no CSS.

<style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 150px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 0px 0px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } p:hover{ background-color:#ccc; width:100%; } p{ height:30px; text-align:middle; line-height: 30px; text-align: center; margin: 0; padding: 0; } span.item{ background-color:#ccc; } </style> <script src="jquery.js"></script> <script> $(function() { $("p.item").click(function() { $("span.item").text($(this).text()); }); }); </script> <div class="dropdown"> <span class="item">menu</span> <div class="dropdown-content"> <p class="item">um</p> <p class="item">dois</p> <p class="item">três</p> <p class="item">quatro</p> </div> </div>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Conflito de Áreas do Plugin Isotope

11-10-2017 03:11

Deixa eu te perguntar algo como eu consigo acrescentar paginação junto com a pesquisa e a filtragem ? você achou algum exemplo dentro do isotope que faça isso? obrigado
0
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Conflito de Áreas do Plugin Isotope

11-10-2017 03:17

Eu achei esse exemplo aqui

https://codepen.io/Igorxp5/pen/ojJLQE

mas não consegui integrar junto ao meu código que já estava pronto

// quick search regex var qsRegex; var buttonFilter; // init Isotope var $grid = $('.filter-container').isotope({ itemSelector: '.col-xl-6', layoutMode: 'fitRows', filter: function() { var $this = $(this); var searchResult = qsRegex ? $this.text().match( qsRegex ) : true; var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true; return searchResult && buttonResult; } }); $('#filters').on( 'click', 'a', function() { buttonFilter = $( this ).attr('data-filter'); $grid.isotope(); }); $('#filters2').on( 'click', 'a', function() { buttonFilter = $( this ).attr('data-filter'); $grid.isotope(); }); // use value of search field to filter var $quicksearch = $('#quicksearch').keyup( debounce( function() { qsRegex = new RegExp( $quicksearch.val(), 'gi' ); $grid.isotope(); }) ); // change is-checked class on buttons $('.dropdown-item').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'a', function() { $buttonGroup.find('.dropdown-item').removeClass('active'); $( this ).addClass('active'); }); }); // debounce so filtering doesn't happen every millisecond function debounce( fn, threshold ) { var timeout; return function debounced() { if ( timeout ) { clearTimeout( timeout ); } function delayed() { fn(); timeout = null; } setTimeout( delayed, threshold || 100 ); }; } //Ascending order var responsiveIsotope = [ [480, 4], [720, 6] ]; var itemsPerPageDefault = 1; var itemsPerPage = defineItemsPerPage(); var currentNumberPages = 1; var currentPage = 1; var currentFilter = '*'; var filterAtribute = 'data-filter'; var pageAtribute = 'data-page'; var pagerClass = 'isotope-pager'; function changeFilter(selector) { $container.isotope({ filter: selector }); } function goToPage(n) { currentPage = n; var selector = itemSelector; selector += ( currentFilter != '*' ) ? '['+filterAtribute+'="'+currentFilter+'"]' : ''; selector += '['+pageAtribute+'="'+currentPage+'"]'; changeFilter(selector); } function defineItemsPerPage() { var pages = itemsPerPageDefault; for( var i = 0; i < responsiveIsotope.length; i++ ) { if( $(window).width() <= responsiveIsotope[i][0] ) { pages = responsiveIsotope[i][1]; break; } } return pages; } function setPagination() { var SettingsPagesOnItems = function(){ var itemsLength = $container.children(itemSelector).length; var pages = Math.ceil(itemsLength / itemsPerPage); var item = 1; var page = 1; var selector = itemSelector; selector += ( currentFilter != '*' ) ? '['+filterAtribute+'="'+currentFilter+'"]' : ''; $container.children(selector).each(function(){ if( item > itemsPerPage ) { page++; item = 1; } $(this).attr(pageAtribute, page); item++; }); currentNumberPages = page; }(); var CreatePagers = function() { var $isotopePager = ( $('.'+pagerClass).length == 0 ) ? $('<div class="'+pagerClass+'"></div>') : $('.'+pagerClass); $isotopePager.html(''); for( var i = 0; i < currentNumberPages; i++ ) { var $pager = $('<a href="javascript:void(0);" class="pager" '+pageAtribute+'="'+(i+1)+'"></a>'); $pager.html(i+1); $pager.click(function(){ var page = $(this).eq(0).attr(pageAtribute); goToPage(page); }); $pager.appendTo($isotopePager); } $container.after($isotopePager); }(); } setPagination(); goToPage(1); //Adicionando Event de Click para as categorias $('.filters a').click(function(){ var filter = $(this).attr(filterAtribute); currentFilter = filter; setPagination(); goToPage(1); }); //Evento Responsivo $(window).resize(function(){ itemsPerPage = defineItemsPerPage(); setPagination(); goToPage(1); });

0
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Conflito de Áreas do Plugin Isotope

11-10-2017 04:36

Consegui Fazer Funcionar cada um separadamente, mas quando tento juntar em um arquivo só funciona somente a paginação

Código Paginação
var itemSelector = '.col-xl-6'; var $container = $('.filter-container').isotope({ masonry: { columnWidth: itemSelector, } }); //Ascending order var responsiveIsotope = [ [480, 4], [720, 6] ]; var itemsPerPageDefault = 2; var itemsPerPage = defineItemsPerPage(); var currentNumberPages = 1; var currentPage = 1; var currentFilter = '*'; var filterAtribute = 'data-filter'; var pageAtribute = 'data-page'; var pagerClass = 'isotope-pager'; function changeFilter(selector) { $container.isotope({ filter: selector }); } function goToPage(n) { currentPage = n; var selector = itemSelector; selector += ( currentFilter != '*' ) ? '['+filterAtribute+'="'+currentFilter+'"]' : ''; selector += '['+pageAtribute+'="'+currentPage+'"]'; changeFilter(selector); } function defineItemsPerPage() { var pages = itemsPerPageDefault; for( var i = 0; i < responsiveIsotope.length; i++ ) { if( $(window).width() <= responsiveIsotope[i][0] ) { pages = responsiveIsotope[i][1]; break; } } return pages; } function setPagination() { var SettingsPagesOnItems = function(){ var itemsLength = $container.children(itemSelector).length; var pages = Math.ceil(itemsLength / itemsPerPage); var item = 1; var page = 1; var selector = itemSelector; selector += ( currentFilter != '*' ) ? '['+filterAtribute+'="'+currentFilter+'"]' : ''; $container.children(selector).each(function(){ if( item > itemsPerPage ) { page++; item = 1; } $(this).attr(pageAtribute, page); item++; }); currentNumberPages = page; }(); var CreatePagers = function() { var $isotopePager = ( $('.'+pagerClass).length == 0 ) ? $('<div class="'+pagerClass+'"></div>') : $('.'+pagerClass); $isotopePager.html(''); for( var i = 0; i < currentNumberPages; i++ ) { var $pager = $('<a href="javascript:void(0);" class="pager" '+pageAtribute+'="'+(i+1)+'"></a>'); $pager.html(i+1); $pager.click(function(){ var page = $(this).eq(0).attr(pageAtribute); goToPage(page); }); $pager.appendTo($isotopePager); } $container.after($isotopePager); }(); } setPagination(); goToPage(1); //Adicionando Event de Click para as categorias $('.filters a').click(function(){ var filter = $(this).attr(filterAtribute); currentFilter = filter; setPagination(); goToPage(1); }); //Evento Responsivo $(window).resize(function(){ itemsPerPage = defineItemsPerPage(); setPagination(); goToPage(1); });

Código Campo de Pesquisa + Filtro.
// quick search regex var qsRegex; var buttonFilter; // init Isotope var $grid = $('.filter-container').isotope({ itemSelector: '.col-xl-6', layoutMode: 'fitRows', filter: function() { var $this = $(this); var searchResult = qsRegex ? $this.text().match( qsRegex ) : true; var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true; return searchResult && buttonResult; } }); $('#filters').on( 'click', 'a', function() { buttonFilter = $( this ).attr('data-filter'); $grid.isotope(); }); $('#filters2').on( 'click', 'a', function() { buttonFilter = $( this ).attr('data-filter'); $grid.isotope(); }); // use value of search field to filter var $quicksearch = $('#quicksearch').keyup( debounce( function() { qsRegex = new RegExp( $quicksearch.val(), 'gi' ); $grid.isotope(); }) ); // change is-checked class on buttons $('.dropdown-item').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'a', function() { $buttonGroup.find('.dropdown-item').removeClass('active'); $( this ).addClass('active'); }); }); // debounce so filtering doesn't happen every millisecond function debounce( fn, threshold ) { var timeout; return function debounced() { if ( timeout ) { clearTimeout( timeout ); } function delayed() { fn(); timeout = null; } setTimeout( delayed, threshold || 100 ); }; }


Como faço para unir os dois códigos ? Obrigado
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Conflito de Áreas do Plugin Isotope

11-10-2017 07:12

Juntou o script do post http://codigosnaweb.com/forum/viewtopic ... 958#p35914 com o da paginação?
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Conflito de Áreas do Plugin Isotope

11-10-2017 11:23

Sim, tentei juntas esses dois códigos ai acima mas não consegui.
0

Quem está online

Usuários navegando neste fórum: Bing [Bot]