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.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Registre-se em verde
Hoje à(s) 11:48 pm por Harleen

» Widget staff online
Hoje à(s) 11:33 pm por Harleen

» Assinatura grande!
Hoje à(s) 09:46 pm por Uatyla

» Sub-Fóruns
Hoje à(s) 07:23 pm por Harleen

» Skin do Fórum
Hoje à(s) 07:03 pm por Harleen

» Caixa de busca
Hoje à(s) 06:58 pm por Fatalisss

» Categorias
Hoje à(s) 05:16 pm por Froozen

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Luiz
 
Marcelo22m2
 
Kyo Panda
 
paulim78
 
APOllO
 
Shek
 
Lincoln
 
Roger_Crazzy
 
Holkis
 

Quem está conectado
215 usuários online :: 7 usuários cadastrados, Nenhum Invisível e 208 Visitantes :: 2 Motores de busca

Ajux, Harleen, JulioPais, Key of Destiny, MarcosSchultz, Shek, ViniZiNN

[ 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

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

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 : 3638
Pontos Ativos : 4859

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

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 : 3638
Pontos Ativos : 4859

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