Bug na atualização dos últimos assuntos

Detalhes da questão

Endereço do fórum: http://rikudourpg.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Olá! Estou tendo um problema com a atualização dos Últimos assuntos.

Quando aperto o botão de atualizar, ele faz com que o Widget "Parceiros" se transforme no Widget de Últimos Assuntos. Veja: https://imgur.com/a/rYstHAW

O javascript para atualizar os últimos assuntos é esse:

Código:

/**
 * Create a refresh button on the latest topics.
 *
 * @author Luiz Felipe F. <https://lffg.github.com>
 * @see https://ajuda.forumeiros.com/t113295-
 * @see https://github.com/lffg/code-in-js/blob/master/fdf/t113295.js
 * @license MIT
 */
 
(function($, styles) {
  'use strict';
 
  var IMAGE_SOURCE = 'https://i.imgur.com/aTCsNba.png';
  var CONTENT_SELECTOR = '#comments_scroll_div:eq(0)';
 
  function refreshContent() {
    var $self = $(this);
 
    // Prevent multiple clicks:
    if ($self.is('.in-use')) {
      return;
    }
 
    $self.addClass('in-use');
 
    $.get(window.location.pathname, function(response) {
      $(CONTENT_SELECTOR).html($(CONTENT_SELECTOR, response).html());
      $self.removeClass('in-use');
    });
  }
 
  $(function() {
    var $trigger = $('<img />', {
      src: IMAGE_SOURCE || 'https://i.imgur.com/aTCsNba.png'
    })
      .addClass('lf-refresh-trigger')
      .on('click', refreshContent);
 
    $(CONTENT_SELECTOR)
      .parents('.module')
      .find('.h3')
      .append($trigger);
 
    $('head').append($('<style>', { text: styles.join('\n') }));
  });
})(jQuery, [
  '.h3 {',
  '  position: relative;',
  '}',
  '',
  '.lf-refresh-trigger {',
  '  cursor: pointer;',
  '  position: absolute;',
  '  top: 50%;',
  '  right: 10px;',
  '  transform: translateY(-50%);',
  '}',
  '',
  '.lf-refresh-trigger.in-use {',
  '  cursor: not-allowed;',
  '  opacity: .7;',
  '}'
]);

Agradeço desde já e bom fim de semana!

Olá @Zênite,
O Erro ocorre devido ao scroll existente no widget Parceiros, o script vai buscar um widget que possui o mesmo. Passe-me o seguinte template: mod_recent_topics (portal), por favor!


Aguardo uma resposta sua,
pedxz.

Olá novamente! O código é o seguinte:

Código:

<div class="module">
   <div class="h3"><i class="ion-chatbubble-working"></i>{L_RECENT_TOPICS}</div>

     <!-- BEGIN scrolling_row -->
   {MARQUEE_JS_SRC}
   <div id="comments_scroll_div">
   <div class="marquee" data-direction='{SCROLL_WAY}' data-duration='{SCROLL_DELAY}' data-pauseOnHover="true" style="overflow:hidden;height:{SCROLL_HEIGHT}px;">
      <!-- BEGIN recent_topic_row -->
      <div class="mod-recent-row">
         <a href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}" class="mod-recent-title">{scrolling_row.recent_topic_row.L_TOPIC_TITLE}</a>
         <span class="mod-recent-info">
            <span class="mod-recent-time">
               <i class="ion-clock"></i>{scrolling_row.recent_topic_row.S_POSTTIME}
            </span>

            <span class="mod-recent-author">
               <i class="ion-ios-person"></i>
               <!-- BEGIN switch_poster -->
                  <a href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}">{scrolling_row.recent_topic_row.switch_poster.S_POSTER}</a>
               <!-- END switch_poster -->

               <!-- BEGIN switch_poster_guest -->
                  {scrolling_row.recent_topic_row.switch_poster_guest.S_POSTER}
               <!-- END switch_poster_guest -->
            </span>
         </span>
      </div>
      <!-- END recent_topic_row -->
   </div>
   </div>
   <script>
      $(".marquee").marquee();
   </script>
<!-- END scrolling_row -->

<!-- BEGIN classical_row -->
   <div class="mod-recent-row">
   <!-- BEGIN recent_topic_row -->
      <a href="{classical_row.recent_topic_row.U_TITLE}" class="mod-recent-title">{classical_row.recent_topic_row.L_TITLE}</a>
      <span class="mod-recent-info">
         <span class="mod-recent-time">
            <i class="ion-clock"></i>{classical_row.recent_topic_row.S_POSTTIME}
         </span>

         <span class="mod-recent-author">
            <i class="ion-ios-person"></i>
            <!-- BEGIN switch_poster -->
               <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
            <!-- END switch_poster -->

            <!-- BEGIN switch_poster_guest -->
               {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
            <!-- END switch_poster_guest -->
         </span>
      </span>
      <!--
      <a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
      -->
   <!-- END recent_topic_row -->
   </div>
<!-- END classical_row -->
</div>

Até mais ver!

Mude o template para:

Código:

<div class="module">
  <div class="h3"><i class="ion-chatbubble-working"></i>{L_RECENT_TOPICS}</div>
 
    <!-- BEGIN scrolling_row -->
  {MARQUEE_JS_SRC}
  <div id="comments_scroll_div lastsubjects">
  <div class="marquee" data-direction='{SCROLL_WAY}' data-duration='{SCROLL_DELAY}' data-pauseOnHover="true" style="overflow:hidden;height:{SCROLL_HEIGHT}px;">
      <!-- BEGIN recent_topic_row -->
      <div class="mod-recent-row">
        <a href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}" class="mod-recent-title">{scrolling_row.recent_topic_row.L_TOPIC_TITLE}</a>
        <span class="mod-recent-info">
            <span class="mod-recent-time">
              <i class="ion-clock"></i>{scrolling_row.recent_topic_row.S_POSTTIME}
            </span>
 
            <span class="mod-recent-author">
              <i class="ion-ios-person"></i>
              <!-- BEGIN switch_poster -->
                  <a href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}">{scrolling_row.recent_topic_row.switch_poster.S_POSTER}</a>
              <!-- END switch_poster -->
 
              <!-- BEGIN switch_poster_guest -->
                  {scrolling_row.recent_topic_row.switch_poster_guest.S_POSTER}
              <!-- END switch_poster_guest -->
            </span>
        </span>
      </div>
      <!-- END recent_topic_row -->
  </div>
  </div>
  <script>
      $(".marquee").marquee();
  </script>
<!-- END scrolling_row -->
 
<!-- BEGIN classical_row -->
  <div class="mod-recent-row">
  <!-- BEGIN recent_topic_row -->
      <a href="{classical_row.recent_topic_row.U_TITLE}" class="mod-recent-title">{classical_row.recent_topic_row.L_TITLE}</a>
      <span class="mod-recent-info">
        <span class="mod-recent-time">
            <i class="ion-clock"></i>{classical_row.recent_topic_row.S_POSTTIME}
        </span>
 
        <span class="mod-recent-author">
            <i class="ion-ios-person"></i>
            <!-- BEGIN switch_poster -->
              <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
            <!-- END switch_poster -->
 
            <!-- BEGIN switch_poster_guest -->
              {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
            <!-- END switch_poster_guest -->
        </span>
      </span>
      <!--
      <a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
      -->
  <!-- END recent_topic_row -->
  </div>
<!-- END classical_row -->
</div>

E o Script para:

Código:

/**
 * Create a refresh button on the latest topics.
 *
 * @author Luiz Felipe F. <https://lffg.github.com>
 * @see https://ajuda.forumeiros.com/t113295-
 * @see https://github.com/lffg/code-in-js/blob/master/fdf/t113295.js
 * @license MIT
 */
 
(function($, styles) {
  'use strict';
 
  var IMAGE_SOURCE = 'https://i.imgur.com/aTCsNba.png';
  var CONTENT_SELECTOR = '#lastsubjects:eq(0)';
 
  function refreshContent() {
    var $self = $(this);
 
    // Prevent multiple clicks:
    if ($self.is('.in-use')) {
      return;
    }
 
    $self.addClass('in-use');
 
    $.get(window.location.pathname, function(response) {
      $(CONTENT_SELECTOR).html($(CONTENT_SELECTOR, response).html());
      $self.removeClass('in-use');
    });
  }
 
  $(function() {
    var $trigger = $('<img />', {
      src: IMAGE_SOURCE || 'https://i.imgur.com/aTCsNba.png'
    })
      .addClass('lf-refresh-trigger')
      .on('click', refreshContent);
 
    $(CONTENT_SELECTOR)
      .parents('.module')
      .find('.h3')
      .append($trigger);
 
    $('head').append($('<style>', { text: styles.join('\n') }));
  });
})(jQuery, [
  '.h3 {',
  '  position: relative;',
  '}',
  '',
  '.lf-refresh-trigger {',
  '  cursor: pointer;',
  '  position: absolute;',
  '  top: 50%;',
  '  right: 10px;',
  '  transform: translateY(-50%);',
  '}',
  '',
  '.lf-refresh-trigger.in-use {',
  '  cursor: not-allowed;',
  '  opacity: .7;',
  '}'
]);

Mudei, mas agora o botão de atualizar os últimos assuntos desapareceu :<

edit: E a scrollbar também

Olá @Zênite,

Troque o template por este:

Código:

<div class="module">
  <div class="h3"><i class="ion-chatbubble-working"></i>{L_RECENT_TOPICS}</div>
 
    <!-- BEGIN scrolling_row -->
  {MARQUEE_JS_SRC}
  <div id="comments_scroll_div" class="lastsubjects">
  <div class="marquee" data-direction='{SCROLL_WAY}' data-duration='{SCROLL_DELAY}' data-pauseOnHover="true" style="overflow:hidden;height:{SCROLL_HEIGHT}px;">
      <!-- BEGIN recent_topic_row -->
      <div class="mod-recent-row">
        <a href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}" class="mod-recent-title">{scrolling_row.recent_topic_row.L_TOPIC_TITLE}</a>
        <span class="mod-recent-info">
            <span class="mod-recent-time">
              <i class="ion-clock"></i>{scrolling_row.recent_topic_row.S_POSTTIME}
            </span>
 
            <span class="mod-recent-author">
              <i class="ion-ios-person"></i>
              <!-- BEGIN switch_poster -->
                  <a href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}">{scrolling_row.recent_topic_row.switch_poster.S_POSTER}</a>
              <!-- END switch_poster -->
 
              <!-- BEGIN switch_poster_guest -->
                  {scrolling_row.recent_topic_row.switch_poster_guest.S_POSTER}
              <!-- END switch_poster_guest -->
            </span>
        </span>
      </div>
      <!-- END recent_topic_row -->
  </div>
  </div>
  <script>
      $(".marquee").marquee();
  </script>
<!-- END scrolling_row -->
 
<!-- BEGIN classical_row -->
  <div class="mod-recent-row">
  <!-- BEGIN recent_topic_row -->
      <a href="{classical_row.recent_topic_row.U_TITLE}" class="mod-recent-title">{classical_row.recent_topic_row.L_TITLE}</a>
      <span class="mod-recent-info">
        <span class="mod-recent-time">
            <i class="ion-clock"></i>{classical_row.recent_topic_row.S_POSTTIME}
        </span>
 
        <span class="mod-recent-author">
            <i class="ion-ios-person"></i>
            <!-- BEGIN switch_poster -->
              <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
            <!-- END switch_poster -->
 
            <!-- BEGIN switch_poster_guest -->
              {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
            <!-- END switch_poster_guest -->
        </span>
      </span>
      <!--
      <a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
      -->
  <!-- END recent_topic_row -->
  </div>
<!-- END classical_row -->
</div>

E o script por este:

Código:

/**
 * Create a refresh button on the latest topics.
 *
 * @author Luiz Felipe F. <https://lffg.github.com>
 * @see https://ajuda.forumeiros.com/t113295-
 * @see https://github.com/lffg/code-in-js/blob/master/fdf/t113295.js
 * @license MIT
 */
 
(function($, styles) {
  'use strict';
 
  var IMAGE_SOURCE = 'https://i.imgur.com/aTCsNba.png';
  var CONTENT_SELECTOR = '#comments_scroll_div.lastsubjects';
 
  function refreshContent() {
    var $self = $(this);
 
    // Prevent multiple clicks:
    if ($self.is('.in-use')) {
      return;
    }
 
    $self.addClass('in-use');
 
    $.get(window.location.pathname, function(response) {
      $(CONTENT_SELECTOR).html($(CONTENT_SELECTOR, response).html());
      $self.removeClass('in-use');
    });
  }
 
  $(function() {
    var $trigger = $('<img />', {
      src: IMAGE_SOURCE || 'https://i.imgur.com/aTCsNba.png'
    })
      .addClass('lf-refresh-trigger')
      .on('click', refreshContent);
 
    $(CONTENT_SELECTOR)
      .parents('.module')
      .find('.h3')
      .append($trigger);
 
    $('head').append($('<style>', { text: styles.join('\n') }));
  });
})(jQuery, [
  '.h3 {',
  '  position: relative;',
  '}',
  '',
  '.lf-refresh-trigger {',
  '  cursor: pointer;',
  '  position: absolute;',
  '  top: 50%;',
  '  right: 10px;',
  '  transform: translateY(-50%);',
  '}',
  '',
  '.lf-refresh-trigger.in-use {',
  '  cursor: not-allowed;',
  '  opacity: .7;',
  '}'
]);

Até mais.

Olha, eu ainda não tenho ideia de como agradecer vocês pela paciência e pela competência.

Deu tudo certo, está tudo funcionando perfeitamente! Muito obrigado!

Podem fechar!!