Efeito de mudança de abas

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

Atendido / Resolvido Efeito de mudança de abas

Mensagem por Akeido 27.02.20 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 5

Masculino
Inscrito dia : 02/08/2011
Mensagens : 57
Pontos ativos : 90

http://superonzerv.forumeiros.net/

Atendido / Resolvido Re: Efeito de mudança de abas

Mensagem por Connor R. 27.02.20 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
Inscrito dia : 06/08/2012
Mensagens : 1182
Pontos ativos : 1914

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

Atendido / Resolvido Re: Efeito de mudança de abas

Mensagem por Akeido 27.02.20 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 5

Masculino
Inscrito dia : 02/08/2011
Mensagens : 57
Pontos ativos : 90

http://superonzerv.forumeiros.net/
  • 0

Atendido / Resolvido Re: Efeito de mudança de abas

Mensagem por pedxz 29.02.20 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.


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6065
Pontos ativos : 7203

Atendido / Resolvido Re: Efeito de mudança de abas

Mensagem por Akeido 01.03.20 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 5

Masculino
Inscrito dia : 02/08/2011
Mensagens : 57
Pontos ativos : 90

http://superonzerv.forumeiros.net/

Atendido / Resolvido Re: Efeito de mudança de abas

Mensagem por pedxz 02.03.20 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.


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6065
Pontos ativos : 7203

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum