Efeito de mudança de abas

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Efeito de mudança de abas

Mensagem por Akeido Qui 27 Fev 2020 - 16:32

Detalhes da questão


Endereço do fórum: https://www.narutorpgakatsuki.net
Versão do fórum: phpBB3

Descrição


Bom dia! Eu tenho este javascript de abas de categoria, mas o efeito de troca vem de baixo pra cima, eu gostaria que ele fosse lateral, já que as vezes as páginas ficam subindo devido a isso.

Código javascript:

Código:
(function ($, css) {
  'use strict';
 
  $(function () {
    
    var $div = $('<div>', { 'class': 'fa-category-controller' });
    
    $('.forabg').each(function (index, selector) {
      var $this = $(this);
      var title = $this.find('.table-title > h2').text();
 
      $this.attr('data-category-id', index);
      
      if (index === 0) {
        $this.addClass('fa-category-visible');
        
        $div.insertBefore($this);
        $div.append($('<a>', {
          'href'   : 'javascript:void(0);',
          'class'  : 'fa-category-controller-item fa-category-controller-active',
          'data-id': index,
          'text'   : title
        }));
        
        return;
      }
 
      $this.hide();
      $div.append($('<a>', {
        'href'   : 'javascript:void(0);',
        'class'  : 'fa-category-controller-item',
        'data-id': index,
        'text'   : title
      }));
    });
 
    $div
      .children('a')
        .on('click', function () {
          var $this   = $(this);
          var id      = $this.attr('data-id');
          var current = $('.fa-category-visible').attr('data-category-id');
 
          $('.fa-category-controller-active').removeClass('fa-category-controller-active');
          $this.addClass('.fa-category-controller-active');
 
          if (id === current) {
            return;
          }
 
          $('.fa-category-visible')
            .removeClass('fa-category-visible')
            .stop()
            .slideUp(450, function () {
              $('.forabg[data-category-id="' + id + '"]')
                .addClass('fa-category-visible')
                .stop()
                .slideDown(450)
              ;
            })
          ;
        })
    ;
 
    $('<style>', { 'text': css.join('\n') }).appendTo('head');
  });
}(jQuery, [
]));
Akeido

Akeido
Nível 6

Masculino
Membro desde : 02/08/2011
Mensagens : 69
Pontos ativos : 107

http://erilea.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de mudança de abas

Mensagem por Connor R. Qui 27 Fev 2020 - 21:33

Olá, teste isto abaixo. Não testei, mas deve funcionar.
Editado.
Código:

(function ($, css) {
  'use strict';
 
  $(function () {
   
    var $div = $('<div>', { 'class': 'fa-category-controller' });
   
    $('.forabg').each(function (index, selector) {
      var $this = $(this);
      var title = $this.find('.table-title > h2').text();
 
      $this.attr('data-category-id', index);
     
      if (index === 0) {
        $this.addClass('fa-category-visible');
       
        $div.insertBefore($this);
        $div.append($('<a>', {
          'href'  : 'javascript:void(0);',
          'class'  : 'fa-category-controller-item fa-category-controller-active',
          'data-id': index,
          'text'  : title
        }));
       
        return;
      }
 
      $this.hide();
      $div.append($('<a>', {
        'href'  : 'javascript:void(0);',
        'class'  : 'fa-category-controller-item',
        'data-id': index,
        'text'  : title
      }));
    });
 
    $div
      .children('a')
        .on('click', function () {
          var $this  = $(this);
          var id      = $this.attr('data-id');
          var current = $('.fa-category-visible').attr('data-category-id');
 
          $('.fa-category-controller-active').removeClass('fa-category-controller-active');
          $this.addClass('.fa-category-controller-active');
 
          if (id === current) {
            return;
          }
 
          $('.fa-category-visible')
            .removeClass('fa-category-visible')
            .stop()
            toggle("linear")
          ;
        })
    ;
 
    $('<style>', { 'text': css.join('\n') }).appendTo('head');
  });
}(jQuery, [
]));
Connor R.

Connor R.
Membro do fórum

Masculino
Membro desde : 06/08/2012
Mensagens : 1220
Pontos ativos : 1965

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de mudança de abas

Mensagem por Akeido Qui 27 Fev 2020 - 22:07

Connor R. escreveu:Olá, teste isto abaixo. Não testei, mas deve funcionar.
Editado.
Código:

(function ($, css) {
  'use strict';
 
  $(function () {
    
    var $div = $('<div>', { 'class': 'fa-category-controller' });
    
    $('.forabg').each(function (index, selector) {
      var $this = $(this);
      var title = $this.find('.table-title > h2').text();
 
      $this.attr('data-category-id', index);
      
      if (index === 0) {
        $this.addClass('fa-category-visible');
        
        $div.insertBefore($this);
        $div.append($('<a>', {
          'href'   : 'javascript:void(0);',
          'class'  : 'fa-category-controller-item fa-category-controller-active',
          'data-id': index,
          'text'   : title
        }));
        
        return;
      }
 
      $this.hide();
      $div.append($('<a>', {
        'href'   : 'javascript:void(0);',
        'class'  : 'fa-category-controller-item',
        'data-id': index,
        'text'   : title
      }));
    });
 
    $div
      .children('a')
        .on('click', function () {
          var $this   = $(this);
          var id      = $this.attr('data-id');
          var current = $('.fa-category-visible').attr('data-category-id');
 
          $('.fa-category-controller-active').removeClass('fa-category-controller-active');
          $this.addClass('.fa-category-controller-active');
 
          if (id === current) {
            return;
          }
 
          $('.fa-category-visible')
            .removeClass('fa-category-visible')
            .stop()
            toggle("linear")
          ;
        })
    ;
 
    $('<style>', { 'text': css.join('\n') }).appendTo('head');
  });
}(jQuery, [
]));

Boa noite, o código não funcionou, as categorias voltaram na organização normal, no caso sem abas.
Akeido

Akeido
Nível 6

Masculino
Membro desde : 02/08/2011
Mensagens : 69
Pontos ativos : 107

http://erilea.forumeiros.com

Ir para o topo Ir para baixo

Admineiro
  • 0

Tópico resolvido Re: Efeito de mudança de abas

Mensagem por pedxz Sab 29 Fev 2020 - 14:49

Olá @Akeido,

Veja se é este o efeito pretendido:
Código:
(function ($, css) {
  'use strict';
 
  $(function () {
    
    var $div = $('<div>', { 'class': 'fa-category-controller' });
    
    $('.forabg').each(function (index, selector) {
      var $this = $(this);
      var title = $this.find('.table-title > h2').text();
 
      $this.attr('data-category-id', index);
      
      if (index === 0) {
        $this.addClass('fa-category-visible');
        
        $div.insertBefore($this);
        $div.append($('<a>', {
          'href'   : 'javascript:void(0);',
          'class'  : 'fa-category-controller-item fa-category-controller-active',
          'data-id': index,
          'text'   : title
        }));
        
        return;
      }
 
      $this.hide();
      $div.append($('<a>', {
        'href'   : 'javascript:void(0);',
        'class'  : 'fa-category-controller-item',
        'data-id': index,
        'text'   : title
      }));
    });
 
    $div
      .children('a')
        .on('click', function () {
          var $this   = $(this);
          var id      = $this.attr('data-id');
          var current = $('.fa-category-visible').attr('data-category-id');
 
          $('.fa-category-controller-active').removeClass('fa-category-controller-active');
          $this.addClass('.fa-category-controller-active');
 
          if (id === current) {
            return;
          }
 
          $('.fa-category-visible')
            .removeClass('fa-category-visible')
            .stop()
            .animate({width: 'toggle'}, 1000, function () {
              $('.forabg[data-category-id="' + id + '"]')
                .addClass('fa-category-visible')
                .stop()
                .animate({width: 'toggle'}, 1000)
              ;
            })
          ;
        })
    ;
 
    $('<style>', { 'text': css.join('\n') }).appendTo('head');
  });
}(jQuery, [
]));


Cordialmente,
pedxz.
pedxz

pedxz
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7067
Pontos ativos : 8296

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de mudança de abas

Mensagem por Akeido Dom 1 Mar 2020 - 19:21

Pedxz escreveu:Olá @Akeido,

Veja se é este o efeito pretendido:
Código:
(function ($, css) {
  'use strict';
 
  $(function () {
    
    var $div = $('<div>', { 'class': 'fa-category-controller' });
    
    $('.forabg').each(function (index, selector) {
      var $this = $(this);
      var title = $this.find('.table-title > h2').text();
 
      $this.attr('data-category-id', index);
      
      if (index === 0) {
        $this.addClass('fa-category-visible');
        
        $div.insertBefore($this);
        $div.append($('<a>', {
          'href'   : 'javascript:void(0);',
          'class'  : 'fa-category-controller-item fa-category-controller-active',
          'data-id': index,
          'text'   : title
        }));
        
        return;
      }
 
      $this.hide();
      $div.append($('<a>', {
        'href'   : 'javascript:void(0);',
        'class'  : 'fa-category-controller-item',
        'data-id': index,
        'text'   : title
      }));
    });
 
    $div
      .children('a')
        .on('click', function () {
          var $this   = $(this);
          var id      = $this.attr('data-id');
          var current = $('.fa-category-visible').attr('data-category-id');
 
          $('.fa-category-controller-active').removeClass('fa-category-controller-active');
          $this.addClass('.fa-category-controller-active');
 
          if (id === current) {
            return;
          }
 
          $('.fa-category-visible')
            .removeClass('fa-category-visible')
            .stop()
            .animate({width: 'toggle'}, 1000, function () {
              $('.forabg[data-category-id="' + id + '"]')
                .addClass('fa-category-visible')
                .stop()
                .animate({width: 'toggle'}, 1000)
              ;
            })
          ;
        })
    ;
 
    $('<style>', { 'text': css.join('\n') }).appendTo('head');
  });
}(jQuery, [
]));


Cordialmente,
pedxz.

Isso, está ótimo pra mim, muito obrigado.
Akeido

Akeido
Nível 6

Masculino
Membro desde : 02/08/2011
Mensagens : 69
Pontos ativos : 107

http://erilea.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Efeito de mudança de abas

Mensagem por pedxz Seg 2 Mar 2020 - 7:13

Questão resolvida

Esta questão foi dada como resolvida pelo seu autor, e por esse motivo será marcada como resolvida e movida para o arquivo de questões resolvidas desta área.
pedxz

pedxz
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7067
Pontos ativos : 8296

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos