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.

No aguardo.

Olá,

Vá em Painel de controle Módulos HTML & JavaScript Gestão dos códigos JavaScripts 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 Visualização Imagens e Cores Cores 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 */

(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

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

Muito obrigado

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

---