Widgets em cima do chat - ModernBB

2 participantes

Ir para baixo

Tópico resolvido Widgets em cima do chat - ModernBB

Mensagem por Zênite 03.01.19 16:03

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.
Zênite
Zênite
****

Membro desde : 18/12/2018
Mensagens : 218
Pontos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets em cima do chat - ModernBB

Mensagem por RafaelS. 03.01.19 17:58

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

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

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets em cima do chat - ModernBB

Mensagem por Zênite 03.01.19 19:06

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.
Zênite
Zênite
****

Membro desde : 18/12/2018
Mensagens : 218
Pontos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets em cima do chat - ModernBB

Mensagem por RafaelS. 03.01.19 23:39

Olá @Zênite,

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

Até mais. Feliz
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets em cima do chat - ModernBB

Mensagem por Zênite 03.01.19 23:54

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

Membro desde : 18/12/2018
Mensagens : 218
Pontos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets em cima do chat - ModernBB

Mensagem por RafaelS. 04.01.19 0:02

Olá @Zênite,

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

Até mais.
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets em cima do chat - ModernBB

Mensagem por Zênite 04.01.19 0:03

Retirado!
Zênite
Zênite
****

Membro desde : 18/12/2018
Mensagens : 218
Pontos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets em cima do chat - ModernBB

Mensagem por RafaelS. 04.01.19 0:12

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. Feliz
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets em cima do chat - ModernBB

Mensagem por Zênite 04.01.19 0:20

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
Zênite
Zênite
****

Membro desde : 18/12/2018
Mensagens : 218
Pontos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets em cima do chat - ModernBB

Mensagem por RafaelS. 04.01.19 0:24

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

Fico no aguardo. Feliz
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets em cima do chat - ModernBB

Mensagem por Zênite 04.01.19 0:29

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!
Zênite
Zênite
****

Membro desde : 18/12/2018
Mensagens : 218
Pontos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets em cima do chat - ModernBB

Mensagem por RafaelS. 04.01.19 0:32

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. Feliz
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets em cima do chat - ModernBB

Mensagem por Zênite 04.01.19 0:42

Troquei e o botão de atualização sumiu ><
Zênite
Zênite
****

Membro desde : 18/12/2018
Mensagens : 218
Pontos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets em cima do chat - ModernBB

Mensagem por RafaelS. 04.01.19 1:02

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. Feliz
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets em cima do chat - ModernBB

Mensagem por Zênite 04.01.19 1:07

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

Desculpe a trabalheira Louco


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; :<
Zênite
Zênite
****

Membro desde : 18/12/2018
Mensagens : 218
Pontos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets em cima do chat - ModernBB

Mensagem por RafaelS. 04.01.19 12:43

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. Feliz
Até mais.
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets em cima do chat - ModernBB

Mensagem por Zênite 04.01.19 12:49

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!
Zênite
Zênite
****

Membro desde : 18/12/2018
Mensagens : 218
Pontos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets em cima do chat - ModernBB

Mensagem por RafaelS. 04.01.19 12:51

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. Feliz
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets em cima do chat - ModernBB

Mensagem por Zênite 04.01.19 13:09

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

Membro desde : 18/12/2018
Mensagens : 218
Pontos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Widgets em cima do chat - ModernBB

Mensagem por Convidado 04.01.19 13:50

Tópico resolvido


Movido para "Questões resolvidas".
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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