Efeito de mudança de abas

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, [
]));

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. 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.

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 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.