Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Últimos assuntos
» Remover pequeno espaço no final do fórum
Hoje à(s) 05:57 pm por Luiz

» Logo para forum...
Hoje à(s) 05:57 pm por Lost154

» Emblemas não está sendo modificado
Hoje à(s) 05:53 pm por iScroll

» Código JavaScript do Chatbox não surtiu efeito
Hoje à(s) 05:40 pm por Lemon~

» Deixar apenas um dos menus com imagem
Hoje à(s) 05:39 pm por Luiz

» Neve no fórum
Hoje à(s) 05:35 pm por Luiz

» Favicon meu para forum....
Hoje à(s) 05:27 pm por GustavoDM11

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Luiz
 
Gaaratsu
 
iScroll
 
Daniel Yan
 
Ketholy
 
Eduardo Lima
 
Shek
 
ranzatti
 
Lost154
 
cocas20
 

Quem está conectado
250 usuários online :: 15 usuários cadastrados, Nenhum Invisível e 235 Visitantes :: 2 Motores de busca

Daniel Yan, Gaaratsu, gangablue, GustavoDM11, iScroll, juleic1123, Ketholy, Lemon~, Lost154, Luiz, Maiicinhu, MateusAnjosV, Pedxz, RenatoFPW, zGalaxyIIZBII

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Limitar tamanho do quote

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

Resolvido Limitar tamanho do quote

Mensagem por Daniel Z em 22/11/16, 10:14 pm

Detalhes da questão


Endereço do fórum: www.rpg-players.com
Versão do fórum: PunBB

Descrição


Buenas.
Quando temos posts muito longos e alguém decide por fazer um quote, ou ainda um multi-quote, acaba por deixar as postagens extensas demais no fórum.

Gostaria que pudessem me ajudar a aplicar algum código para que limitasse o tamanho do quote visível, e se a pessoa quisesse ler todo conteúdo, clicaria em seu final para expandir.

Um exemplo disso:



http://economia.estadao.com.br/noticias/suas-contas,renda-fixa-e-boa-opcao-para-aposentados,10000089584

Não sei se é possível fazer esse efeito "Click to expand" só com CSS, no entanto.
Nesse site do estadão ele parece ser acionado por javascript.
avatar

Daniel Z
Nível 8

Masculino
Inscrito dia : 30/04/2012
Mensagens : 104
Pontos Ativos : 167

Ver perfil do usuário http://rpgteste.queroforum.net/

Resolvido Re: Limitar tamanho do quote

Mensagem por Daniel Z em 24/11/16, 01:25 pm

No aguardo.
avatar

Daniel Z
Nível 8

Masculino
Inscrito dia : 30/04/2012
Mensagens : 104
Pontos Ativos : 167

Ver perfil do usuário http://rpgteste.queroforum.net/
  • 0

Resolvido Re: Limitar tamanho do quote

Mensagem por Kyo Panda em 27/11/16, 09:00 pm

Olá,

Vá em Painel de controle :seta2: Módulos :seta2: HTML & JavaScript :seta2: Gestão dos códigos JavaScripts :seta2: Criar um novo JavaScript e adicione esse código com Investimento em Nos tópicos:

Código:
/*global jQuery */

; (function ($) {
    'use strict';

    var config;

    config = {
        height: 200,
        label: 'Continuar lendo'
    };

    $(function () {

        $('.postbody blockquote').each(function () {
            var self;

            self = $(this);

            if (self.height() > config.height) {
                self
                    .addClass('quote-collapsed')
                    .append($('<a>', {
                        href: 'javascript:void(0);',
                        class: 'quote-expand',
                        text: config.label
                    }));
            }
        });

        $('.postbody .quote-expand').on('click', function () {
            var self;

            self = $(this);

            self.closest('blockquote').removeClass('quote-collapsed');
            self.remove();
        });
    });
}) (jQuery);

Após, em Painel de controle :seta2: Visualização :seta2: Imagens e Cores :seta2: Cores :seta2: Folha de estilo CSS, adicione o seguinte código ao final da caixa de texto:

Código:
/** BEGIN Quote Collapse */

div.postbody blockquote.quote-collapsed {
  max-height: 200px;
  overflow: hidden;
  position: relative;
}

div.postbody blockquote.quote-collapsed:after {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 50%;
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
}

div.postbody blockquote {
  transition: 250ms ease height;
}

div.postbody blockquote a.quote-expand {
  position: absolute;
  display: block;
  bottom: 1em;
  z-index: 1;
  width: 150px;
  border: 1px rgba(0, 0, 0, 0.5) solid;
  height: 30px;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  background-color: #fff;
  left: 50%;
  margin-left: -75px;
}

/** END Quote Collapse */

(ノ◕ヮ◕)ノ*:・゚✧
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4583
Pontos Ativos : 5832

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Limitar tamanho do quote

Mensagem por Daniel Z em 27/11/16, 09:23 pm

@"Kyo Panda"
Rapaz, funcionou que é uma beleza.

Muito obrigado Piscada
avatar

Daniel Z
Nível 8

Masculino
Inscrito dia : 30/04/2012
Mensagens : 104
Pontos Ativos : 167

Ver perfil do usuário http://rpgteste.queroforum.net/
  • 0

Resolvido Re: Limitar tamanho do quote

Mensagem por Kyo Panda em 27/11/16, 09:39 pm

Se sentir que algumas citações estão sendo reduzidas mesmo com pouco conteúdo para tal, no código Javascript que passei, em:

Código:
config = {
    height: 200,
    label: 'Continuar lendo'
};

Apenas aumente o valor do height: 200. Quanto maior o valor, maior poderão ser as citações antes de serem reduzidas. ^-^

---

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4583
Pontos Ativos : 5832

Ver perfil do usuário http://ajuda.forumeiros.com

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