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


Pesquisa de Satisfação
Queremos saber a sua opinião sobre os nossos serviços. Clique nesta vinheta e preencha este inquérito.

Login

Esqueci minha senha

Últimos assuntos
» Não consigo procurar todas as postagens de alguns membros
Hoje à(s) 4:23 por Lucy Elrich Sinskye

» Pedido de Banner de Parceria
Hoje à(s) 2:50 por Allenkar_

» [AddOn] Questão no cadastro
Hoje à(s) 2:36 por Johan

» Personalizar Menu
Hoje à(s) 1:51 por YouTube3

» Bug nos perfis
Hoje à(s) 1:09 por Kyo Panda

» Domínio do fórum
Hoje à(s) 1:07 por Kyo Panda

» Sistema de pegar tópicos
Hoje à(s) 0:04 por Kyo Panda

Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Magazine 2016
Participe da pesquisa de satisfação 2016 e dê sua opinião sobre os diversos serviços de Forumeiros.
Parceiros Forumeiros
Quem está conectado
141 usuários online :: Nenhum usuário registrado, Nenhum Invisível e 141 Visitantes :: 2 Motores de busca

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

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 Qua 23 Nov 2016 - 0:14

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.

Daniel Z
Nível 8

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

http://rpgteste.queroforum.net/

Resolvido Re: Limitar tamanho do quote

Mensagem por Daniel Z em Qui 24 Nov 2016 - 15:25

No aguardo.

Daniel Z
Nível 8

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

http://rpgteste.queroforum.net/
  • 0

Resolvido Re: Limitar tamanho do quote

Mensagem por Kyo Panda em Dom 27 Nov 2016 - 23:00

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 */

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

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 1889
Pontos Ativos : 4559

http://ajuda.forumeiros.com

Resolvido Re: Limitar tamanho do quote

Mensagem por Daniel Z em Dom 27 Nov 2016 - 23:23

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

Muito obrigado Piscada

Daniel Z
Nível 8

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

http://rpgteste.queroforum.net/
  • 0

Resolvido Re: Limitar tamanho do quote

Mensagem por Kyo Panda em Dom 27 Nov 2016 - 23:39

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.

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 1889
Pontos Ativos : 4559

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
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5