Ir para conteúdo
marcelocardoso

collapse para exibir no thunderbird, gmail etc...

Recommended Posts

galera...
este código abaixo é com código para fazer COLLAPSE, funciona perfeitamente em brownsers, porém no THUNDERBIRD e programas de emails, enfrento problemas, mas tentando aqui, copiando código alí e aqui, consegui resolver para que funcione no THUNDERBIRD. 

 

       .collapseCss {
            margin-top: 50px;
            width: 50%;
        }

        .collapseCss .collapseContent {
            margin-bottom: 4px;
            margin-bottom: 15px;
        }

        .collapseCss .collapseHeader,
        .collapseCss .collapseBody {
            padding: 10px;
            display: block;
            border: 1px solid #dbdbdb;
        }

        .collapseCss .collapseHeader {
            width: 100%;
            border: 1px solid #dbdbdb;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color .15s ease-in-out;
        }

        .collapseCss .collapseHeader:hover {
            background-color: #dbdbdb;
        }

        .collapseCss .collapseBody {
            background-color: #f4f4f4;
            margin-top: 5px;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
            display: none;
        }

        .collapseCss .collapseContent:hover .collapseBody {
            display: block;
        }

    </style>

    <div class="collapseCss">
         <div class="collapseContent">
            <div class="collapseHeader">Collapse2</div>
            <div class="collapseBody">Content collapse2.</div>
        </div>
    </div>

Agora, tipo.
Ao passar o mouse em cima, clicar, ele EXPANDE.
até ai, td bem...

mas COMO POSSO ao passar o mouse, clicar, ele fixar FIXO, depois de sair o foco.
e depois somente, quando clicar novamente, ele RETORNE ao modo COLLAPSE.

Mas lembrando, programas de emails, não suportam javascript, jquery, então, tem que ser só em CSS, tem COMO isso acima?
sugestões, agradeço de como implementar...

Obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

basicamente oq preciso, é:

1) expandir o collapse no hover;
2) em seguida deixar ele aberto fixo na tela;
3) depois, só retornar se eu clicar novamente no objeto;

que tag css posso usar?

Compartilhar este post


Link para o post
Compartilhar em outros sites

GALERA

Para ser melhor na explicação, seguem outros dois exemplos que testei no THUNDERBIRD, onde eles funcionam este COLLAPSE:

HTML

    <div class="container">
        <div class="collapse_html">
            <div class="collapse_conteudo">
                <div class="collapse_header">COLLAPSE - Esse funciona em programa de emails</div>
                <div class="collapse_body">Depending on what browsers to put up with for non-compliant browsers you may want to check out the</div>
            </div>
        </div>
    </div>


    <div class="container">
        <span><b>COLLAPSE - Não funciona em programas de emails</b></span>
        <ul>
            <li>
                Depending on what browsers/devices you are looking to browsers you may want to check out the
            </li>
        </ul>
    </div>

CSS
 


        .collapse_html {
            margin-top: 50px;
            width: 50%;
        }
        .collapse_html .collapse_conteudo {
            margin-bottom: 4px;
            margin-bottom: 15px;
        }
        .collapse_html .collapse_header,
        .collapse_html .collapse_body {
            padding: 10px;
            display: block;
            border: 1px solid #dbdbdb;
        }
        .collapse_html .collapse_header {
            width: 100%;
            border: 1px solid #dbdbdb;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color .15s ease-in-out;
        }
        .collapse_html .collapse_header:hover {
            background-color: #dbdbdb;
        }
        .collapse_html .collapse_body {
            background-color: #f4f4f4;
            margin-top: 5px;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
            display: none;
        }
        .collapse_html .collapse_conteudo:hover .collapse_body {
            display: block;
        }
		li {
            padding: 5px;
        }
        ul {
            overflow: hidden;
            max-height: 0px;
            list-style: none;
            transition: max-height 0.3s;
        }
        span:hover+ul {
            max-height: 500px;
            position: fixed;
            background-color: dodgerblue;
            color: white;
            width: 100%;
            height: auto;
            padding: 5px;
        }

A única coisa que gostaria de FAZER é: ambos os dois exemplos acima, ao PASSAR O MOUSE, ele exibe pelo HOVER a DIV abaixo, porém, EU GOSTARIA DE ao exibir, DEIXAR a DIV FIXA, mesmo ao tirar o ponteiro do mouse de cima.

TEM COMO FAZER isso, tem alguma taxa para usar no HOVER????

1) Deixar a DIV fixa na tela ao passar o mouse em cima do link;
2) Só fechar a DIV se clicar DAÍ no link novamente,

Tem como?
Sugestões de códigos, exemplos agradeço.
É o único collapse que testei que funciona no thunderbird, só preciso fazer isso....

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por santans
      Desejo saber como crio um gerador PHP de paginas html.
      Por exemplo quando alguém cria um perfil no meu site, o gerador criaria uma pagina no sistema a partir de uma pagina pre molde já feita.
      no caso seria para um e-comerce.
      Outro exemplo quando eu cadastro um produto e é gerada uma pagina para este tal produto.
      Se houver algum sistema mais simples para me indicarem fiquem a vontade.
      Nota: Não sou um programador experiente.
    • Por LucasFalcao
      Como é feito um PWA, quais os recursos utilizados, oque preciso conhecer para desenvolver um?
    • Por PedroNunes
      Coloquei o plugin [Pace Master](http://github.hubspot.com/pace/docs/welcome/) em minha página que faz uma barra carregar na parte superior enquanto a página esta carregando, como a do YouTube, entretanto, quero fazer com que essa mesma barra carregue ao enviar o formulário que contém na página, caso ele esteja devidamente preenchido. Ja vi isso em uma infinidade de sites, e parece ser bem simples mas não tenho muito conhecimento em JavaScript ainda, por isso das formas que tentei não funcionou.  Tentei chamar a função do loading com onclick mas não funcionou, estava querendo que funcionasse no mínimo sem verificar se o form esta preenchido pois o principal seria que o usuário tivesse um feedback quando clicasse em enviar o form.
       
       
      -HTML COM PARTE DO FORM-
      <label for="questao5">5. Se possível, liste alguns sites que você gosta, incluindo as URLs.</label> <textarea name="questao5" id="questao5" required></textarea> <button class="btn" id="enviar" name="enviar" type="submit">Enviar</button> <label for="questao5">5. Se possível, liste alguns sites que você gosta, incluindo as URLs.</label> <textarea name="questao5" id="questao5" required></textarea> <button class="btn" id="enviar" name="enviar" type="submit">Enviar</button> -CSS DO PLUGIN-
      .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace-inactive { display: none; } .pace .pace-progress { background: #8BB006; position: fixed; z-index: 2000; top: 0; right: 100%; width: 100%; height: 2px; } -JavaScript do plugin-
      Link GitHub
       
      -JavaScript do formulário-
      $('.formphp').on('submit', function() { var emailContato = "contato@tenshitech.com.br"; // Escreva aqui o seu e-mail var that = $(this), url = that.attr('action'), type = that.attr('method'), data = {}; that.find('[name]').each(function(index, value) { var that = $(this), name = that.attr('name'), value = that.val(); data[name] = value; }); $.ajax({ url: url, type: type, data: data, success: function(response) { if( $('[name="leaveblank"]').val().length != 0 ) { $('.formphp').html("<div id='form-erro'></div>"); $('#form-erro').html("<span>Falha no envio!</span><p>Você pode tentar novamente, ou enviar direto para o e-mail " + emailContato + " </p>") .hide() .fadeIn(1500, function() { $('#form-erro'); }); } else { $('.formphp').html("<div id='form-send'></div>"); $('#form-send').html("<span>Mensagem enviada!</span><p>Em breve eu entro em contato com você. Abraços.</p>") .hide() .fadeIn(1500, function() { $('#form-send'); }); }; }, error: function(response) { $('.formphp').html("<div id='form-erro'></div>"); $('#form-erro').html("<span>Falha no envio!</span><p>Você pode tentar novamente, ou enviar direto para o e-mail " + emailContato + " </p>") .hide() .fadeIn(1500, function() { $('#form-erro'); }); } }); return false; });  
    • Por RodrigoRitta
      Olá pessoal,
       
      Passei praticamente o dia inteiro hoje tentando resolver um bug em um código e não consegui. Encontrei muita coisa na net e aqui no fórum também, mas nada me ajudou a solucionar.
      Eu quero colocar no meu blogspot um menu das redes sociais, só que ele é um código com animação, quando o mouse é colocado em cima do ícone da rede social expande um texto com o respectivo nome, e logo assim que o mouse sai de cima o texto some e fica apena o ícone da rede social.
      O código funciona perfeitamente no simulador de HTML, só que quando tento implementar no blog o texto que deveria aparecer na horizontal fica na vertical, e deslocado, e os ícones das redes sociais não são exibidos.
      Eu consegui separar a parte de css certinho da parte HTML e colocar cada uma em seus respectivo lugar (PELO MENOS ACREDITO NISSO), só o que tá pegando mesmo são esses detalhes, o resto tá tudo funcionando bem, e o mais estranho: isso só ocorre quando passa pro blog, no simulador tá perfeito.
      Estou anexando aqui uma imagem que mostra melhor o que falei.
      Se alguém puder ajudar serei extremamente grato.
      Se já tiver algo aqui no fórum a respeito peço desculpas, mas não encontrei, e peço que apontem aqui pra mim.
       
      Desde já agradeço muito.

    • Por danicarla
      Pessoal.. meu select fica com espaçamento diferente quando abri no chome e no Firefox...
      Será que tem alguma maneira de deixar eles com espaço iguais sem usar javascript?

      Reparem que no Chrome as opções do select ficam grudadas.. e no Firefox ele dá um pequeno espaçamento entre eles:


×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.