Widgets em cima do chat - ModernBB

Detalhes da questão

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

Descrição

Olá, aqui estou novamente. A última dúvida que tive foi resolvida, porém, me atrapalhei com as questões e acabou faltando uma parte.

Em síntese, eu queria que os Widgets "Últimos assuntos" e "Trama do Fórum" (personalizado) ficassem acima do chatbox. Parte dessa dúvida foi resolvida nesse tópico: clique, mas como eu ainda não tinha criado o widget "Trama do Fórum", não foi possível fazer um código que o deixasse ao lado dos últimos assuntos.

Atualmente, ele está assim: clique

A ideia é ficar assim: clique

Quando tentei mexer, o widget personalizado ficou acima dos últimos assuntos, bugando tudo ><

Bem, obrigado desde já, espero não ter sido confuso e, mais uma vez, agradeço pela estrutura e pela ajuda que vocês têm prestado. As respostas são rápidas, diretas e o atendimento é fenomenal.

Olá @Zênite,

Troque o código Javascript daquele tópico por este:

Código:

$(function(){
    $('#main-content').prepend('<div id="topwidg"></div>');
    $('.module:contains("Últimos assuntos")').css({'width':'25%','float':'left'}).detach().appendTo('#main-content #topwidg');
    $('.module:contains("Trama do Fórum")').css({'width':'70%','float':'left'}).detach().appendTo('#main-content #topwidg');
});

Adicione ainda à folha de estilos (CSS):

Código:

#topwidg .module {
    margin: 8px;
}

Até mais.

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'

Ele ficou assim: clique

Existe uma forma de deixar o widget intitulado "Trama do Fórum" com a mesma altura do Últimos Assuntos, de forma que posteriormente eu instale uma scrollbar nele? (se isso for uma pergunta além da pergunta original, eu abro outro tópico e peço que já fechem esse, inclusive agradeço desde já mais uma vez pela velocidade e qualidade)

Edit: outra coisa que aconteceu foi o Últimos Assuntos voltar a se mover sozinho. Anteriormente ele ficava parado, tendo uma scrollbar para o movimento.

Olá @Zênite,

Reparei que desativou o widget "Trama do Fórum", teria como deixar ele ativo para efetuar os testes?

Até mais.

Feito! >< Perdão, tinha tirado para não parecer bugado, mas já botei de volta!

Olá @Zênite,

Reparei que já adicionou conteúdo ao widget, mas irei pedir que remova só por uns instantes ok?

Até mais.

Retirado!

Ok!

Vamos adicionar mais estes códigos à sua folha de estilos:

Código:

#topwidg .module .js-marquee-wrapper {
    animation: none !important;
    margin-top: 0 !important;
}
#topwidg .module:nth-child(2) div:not(.h3) {
    overflow-y: scroll;
    height: 205px;
}
#topwidg {
    height: 295px;
}
#topwidg .module {
    height: 265px;
}

Experimente adicionar agora um texto qualquer para verificar o resultado!

Até mais.

Visualmente está perfeito. Mas notei um bug agora que só aconteceu após a mudança: quando eu aperto no botão de atualizar do "Últimos Assuntos", o Widget dos Parceiros se transforma no Widget de Últimos assuntos. Veja: https://i.imgur.com/zBbOK9o.png


Acredito que os códigos estejam entrando em conflito, o que eu faço?? socorr

Até logo! E muito obrigado, você está sendo mais veloz que um foguete xd

É mesmo! Oops não estou reparando nesses pormenores.
Pode me conceder novamente o código de atualização dos widgets?

Fico no aguardo.

Código de Atualização dos últimos assuntos:

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

CSS relacionado à barra de rolagem dos últimos assuntos (vai que tem algo a ver com isso):

Código:

/* Barra de rolagem nos últimos assuntos */

#comments_scroll_div > .marquee {
  overflow-y: scroll !important;
  margin: -10px;
  padding: 10px;
  height: 220px !important;
}
 
#comments_scroll_div > .marquee > .js-marquee-wrapper {
  animation: none !important;
  margin-top: 0 !important;
}


Conteúdo dentro do Widget "Parceiros" (vai que tem algo a ver com isso também):

Código:

<div class="inner">
    <span class="corners-top"><span></span></span> 
   <div id="comments_scroll_div">
       
      <marquee style="width: 180px; height: 300px;" onmouseout="document.getElementById('comments_scroll_container').start();" onmouseover="document.getElementById('comments_scroll_container').stop();" scrolldelay="50" scrollamount="3" direction="up" id="comments_scroll_container">
            
         <!--    Lista de Parceiros    --> 
         <center>
             <a target="_blank" class="postlink" href="http://www.ajuda.forumeiros.com"><img alt="" border="0" src="https://2img.net/i/fa/banner/pt/banner5.png" /></a> 
         </center>
      </marquee>
         
   </div>
     <span class="corners-bottom"><span></span></span>
</div>

Tentei deixar tudo o que acredito que possa ter ligação com o bug, qualquer coisa a mais só pedir que mando!

Olá!

Troque o código de atualização dos widgets 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 = '#topwidg #comments_scroll_div';
 
  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.

Troquei e o botão de atualização sumiu ><

Olá novamente!

Troque 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: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;',
  '}'
]);

Até mais.

Agora os parceiros voltaram a bugar da mesma forma que aqui -> https://i.imgur.com/zBbOK9o.png

Desculpe a trabalheira


Edit: um colega de fórum foi testar o widget de Trama do Fórum inserindo texto nele, o que aconteceu foi o widget voltar para o posicionamento lateral à esquerda, que é como o fórum está agora; :<

Olá Zênite,

O widget se soltou porque alguém modificou o seu título! Ao fazer isso, é preciso alterar no Javascript também para que o código saiba qual é o "widget" que deve ser movido para o centro do fórum.

Assim sendo, troque o código para este:

Código:

$(function(){
    $('#main-content').prepend('<div id="topwidg"></div>');
    $('.module:contains("Últimos assuntos")').css({'width':'25%','float':'left'}).detach().appendTo('#main-content #topwidg');
    $('.module:contains("Trama")').css({'width':'70%','float':'left'}).detach().appendTo('#main-content #topwidg');
});

Assim, desde que o widget tenha a palavra "trama" já será movido para o centro.
Até mais.

Nossa, que vergonha. Já descobri quem foi o comédia xd

Muito obrigado por tudo, @RafaelS. seu atendimento foi espetacular, como sempre, tanto em informações, quanto na velocidade da resposta e objetividade. Estão de parabéns!

Pode fechar!

Olá @Zênite!

Ótimo! Como os widgets já se encontram no topo do fórum, podemos dar este tópico por arquivado?
Sobre o assunto da atualização dos widgets, recomendo que abra um novo tópico uma vez que foge um pouco do assunto.

Até mais.

Podemos sim! Depois eu abro um pra desbugar os últimos assuntos! Obrigado e até mais!