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
» Descubra Topíc'it: o aplicativo móvel para seus fóruns !
Hoje à(s) 08:03 am por Topic'it

» Instalação do Topic'It
Hoje à(s) 07:49 am por Topic'it

» Quadro de troféus e medalhas
Hoje à(s) 07:16 am por LeoziN_WallkeR

» Como colocar essa tabela
Hoje à(s) 04:50 am por AlexG

» Banner de area nova animais silvestres
Hoje à(s) 01:00 am por EDU2010

» Ranks forum
Ontem à(s) 09:44 pm por Gustavor

» Níveis de reputação
Ontem à(s) 09:22 pm por Taxy_InSaniTy

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Instale agora o aplicativo Topic'it e acesse o suporte de Forumeiros pelo celular.
Quem está conectado
246 usuários online :: 6 usuários cadastrados, Nenhum Invisível e 240 Visitantes :: 1 Motor de busca

Apple', iScroll, LeoziN_WallkeR, Shek, Stevenx, Topic'it

[ 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 : 4381
Pontos Ativos : 5667

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 : 4381
Pontos Ativos : 5667

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

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum