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 LuizH.M
      Gostaria q pudessem me ajudar
      HTML
      <div class="container">
          <nav class="menu">
              <ul>
                  <li><a href="index.php">Home</a></li>
                  <li><a href="agenda.php">Agenda</a></li>
                  <li><a href="departamento.php">Departamento</a></li>
                  <li><a href="https://www.flickr.com/photos/142117425@N02/" target="blanck">Fotos</a></li>
                  <li><a href="#localizacao">Localização</a></li>
                  <li><a href="https://www.facebook.com/deives.duarte.9"  target="blanck" class="fa fa-facebook"></a></li>
                  <li><a href="#" target="blanck" class="fa fa-twitter"></a>
                  <li><a href="#" class="fa fa-youtube"></a>
              </ul>
          </nav>
      </div>
       
       
       
      CSS
       
      .container {
          position: absolute;
          margin: 20px;
          width: auto;
      }
      .menu{
          width:100%;
          height:auto;
          background-color: #333;
          font-family:'Arial';
      }
      .menu ul{
          list-style:none;
          position:relative;
          background-color: #333;
      }
      .menu ul li{
          width: auto;
          height:auto;
          float:left;
      }
      .menu a{
          padding:15px;
          text-decoration:none;
          text-align:center;
          color:#fff;
      }
      .menu a:hover{
          background-color:#f4f4f4;
          color:#555;
      }
       
       
    • Por guzulino
      Boa tarde pessoal, eu estou desenvolvendo um projeto no qual ele deve ter um sistema de post de notícias, eu comecei a pesquisar e percebi que seria muito complicado fazer na mão passo a passo, então comecei a ver como funcionam os posts dos fóruns, tipo o iMasters mesmo, bem nesse mesmo sentido, gostaria de saber se alguém tem alguma luz de como consigo criar isso, estou tentando achar algum framework que eu consiga editar para ficar como eu quiser mas está complicado conseguir algum, se alguém souber de alguém só postar aí. Valeu.
    • Por manoelahech
      Boa noite pessoal, estou a mais de 3 semanas com um trabalho e está impossivel resolver. Segue a questão
      // Escreva um programa que leia 4 arquivos de numeros inteiros, calcule a média.
      //Mostre o maior quadrado que seja menor que a média de todos os números maiores que a média dos números de cada um dos arquivos.
      //Ex: Média dos números do arquivo 01 = 35
      //Números do arquivo 01 que são maiores que 35 = Ni...Nn
      //Maior quadrado entre os N números do arquivo 01 = x.
      A baixo vou colocar 2 tentativas que não saem da parte de calcular a media, como posso calcular a segunda parte??
      TENTATIVA 01
      #include <stdio.h>
      #include <stdlib.h>
      main(){

      FILE *numeros, *maior, *menor, *medio;
      int numero;
      float media;
      //abertura dos arquivos
      numeros = fopen ("numeros.txt", "r");
      maior = fopen ("maior.txt", "w" );
      medio = fopen ("medio.txt" , "w");
      menor = fopen ("menor.txt" , "w");
      //leitura dos dados e gravação do arquivo 
      while (fscanf (numeros , "%i %f" , &numero , &media)!= EOF){
      if (media >= 6)
      fprintf (maior,"%i %4.1f\n",numero,media);
      else
      fprintf (medio,"%i %4.1f\n",numero,media);

      //fechando os arquivos
      fclose (numeros);
      fclose (maior);
      fclose (medio);
      fclose (menor);
      }
      TENTATIVA 02 (ACHO QUE A MELHOR)
      #include <stdio.h>
      #include <stdlib.h>
      #include <string.h>
      #include <stdlib.h>
      #define TAM_MED 50  //tamanho na média
      #define M 4 //número de arquivos
      #define TRUE 1
      #define FALSE 0

      int leitura( int id, int medi){
          
          int id_num, id_num2, id_num3, id_num4;
          int med;
          
          FILE* numeros = fopen ("numeros.txt","r");
          FILE* numeros2 = fopen ("numeros2.txt", "r");
          FILE* numeros3 = fopen ("numeros3.txt", "r");
          FILE* numeros4 = fopen ("numeros4.txt", "r");
          
          
          
          if (numeros != NULL){
              while (fscanf(numeros, "%d\n", &id_num, med) != EOF){  //End of file
                  printf("%d\n", id_num, med);
              }
              
                  if (numeros != NULL){
              while (fscanf(numeros2,"%d\n", &id_num2,med) != EOF){  //End of file
                  printf("%d\n", id_num2,med);
              }
              
                      if (numeros != NULL){
              while (fscanf(numeros3,"%d\n", &id_num3,med) != EOF){  //End of file
                  printf("%d\n", id_num3,med);
              }
              
                  if (numeros != NULL){
              while (fscanf(numeros4,"%d\n", &id_num4,med) != EOF){  //End of file
                  printf("%d\n", id_num4,med);
              }
          }
         fclose (numeros);
         fclose (numeros2);
         fclose (numeros3);
         fclose (numeros4);
         
         return 0;
      }
      }
      }
      }
      int main(){
          
          int id_num, id_num2, id_num3, id_num4;
          
          printf("Digite o primeiro numero: %d");
          scanf("%d", &id_num);
          printf("Digite o segundo numero: %d");
          scanf("%d", &id_num2);
          printf("Digite o terceiro numero: %d");
          scanf("%d", &id_num3);
          printf("Digite o quarto numero: %d");
          scanf("%d", &id_num4);
          
             printf("Media: %f", (float) (id_num + id_num2+ id_num3+ id_num4)/4);
             return 0;
             
             
      }
       
    • Por Donghaki
      Pessoal, sou meio newbie na área, e tô voltando com um projeto antigo que foi desenvolvido por alguns amigos junto a mim. 
      O projeto, resumindo, é um simulador de habilidades. Na página principal temos quatro botões onde, um aumenta o nível da habilidade para o máximo, o outro aumenta de um em um, e os outros dois tem essa mesma função só que diminuindo. 
       
      O problema começa aí... tínhamos criado uma ferramenta (acho que é tooltip que chama), onde você passaria o mouse em cima dos três últimos botões, e abriria uma caixinha flutuante mostrando a descrição da habilidade (nível, mana necessária, resfriamento e afins), só que ao chegar no botão que fica no parte direita, a caixa não se adapta e vira o lado para que a descrição possa ser mostrada, ao invés disso, ela entra atrás da barra de rolagem e fica cortada, isso também acontece no final da página, quando a caixinha mostra duas descrições da habilidade. 
       
      Gostaria de saber se há algum modo de tornar a ferramenta adaptativa, para quando chegar nesses "extremos" da página, a caixa mudar o lado para que o usuário possa ver o que está escrito.
       
      Basicamente, todo o código dela dentro do html/css é este:
       
      #hintbox{
          opacity: 0.95;
          display: none;
          position: fixed;
          height: 450px;
          width: 250px;
          font-size: 10 px;
          background-color: #161616;
          color: #fff;
          padding: 8px;
          border-radius:9px;
          text-align: left;
          word-wrap: break-word; 
          font-family:Verdana;     
        }      
       
       

                  $(document).ready(function () {
                      $('.downArrow,.upArrow,.dupArrow').mousemove(function (e) {
                          if (popUPCheck($(this).attr('nmbr'), $(this).attr('class')))
                              $('#hintbox').html(popUP($(this).attr('nmbr'), $(this).attr('class'))).show();
                          $('#hintbox').css('top', e.clientY + 15).css('left', e.clientX + 15);
                      })
                          .mouseout(function () {
                              $('#hintbox').hide();
                          });
                  });
       
      Também tem uma parte em javascript
       
      function popUP(lvl, arrow) {
          var CDHere = CDValue;
          if(lvl == 16 && chosenClass == "Warrior"){
              CDHere = 1;
          }
          var lastCheck = maxPoints[lvl] - 1;
          
          if(lastCheck<0){
              lastCheck = 0;
          }
          var name = "<div class='title'>" + skillDescription[lvl] + "</div>";
          var currentLevel = "<div class='yellow'>[Nível atual]</div>  Nível necessário : " + skillLevel[lvl][skillPoint[lvl] - 1];
          var nextLevel = "<div class='green'>[Próximo nível]</div> Nível necessário : " + skillLevel[lvl][skillPoint[lvl]];
          var skilldesc = "<div class='info'>" + skillInfo[lvl][skillPoint[lvl] - 1] + "</div>";
          var mpcurrent = "Mana necessária : " + mp[lvl][skillPoint[lvl] - 1];
          var cdcurrent = "Resfriamento : " + (CDHere * cd[lvl][skillPoint[lvl] - 1]).toFixed(0) + " sec";
          var castingcurrent = "Tempo de lançamento : " +  cast[lvl][skillPoint[lvl] - 1] + " sec";
          var skilldescnext = "<div class='info'>" + skillInfo[lvl][skillPoint[lvl]] + "</div>";
          var mpnext = "Mana necessária : " + mp[lvl][skillPoint[lvl]];
          var cdnext = "Resfriamento : " + (CDHere * cd[lvl][skillPoint[lvl]]).toFixed(0) + " sec";
          var castingnext = "Tempo de lançamento : " + cast[lvl][skillPoint[lvl]] + " sec";
          var previousLevel = "<div class='red'>[Nível anterior]</div> Nível necessário : " + skillLevel[lvl][skillPoint[lvl] - 2]
          var skilldescPrev = "<div class='info'>" + skillInfo[lvl][skillPoint[lvl] - 2] + "</div>";
          var mpPrev = "Mana necessária : " + mp[lvl][skillPoint[lvl] - 2];
          var cdPrev = "Resfriamento : " + (CDHere * cd[lvl][skillPoint[lvl] - 2]).toFixed(0) + " sec";
          var castingPrev = "Tempo de lançamento : " + cast[lvl][skillPoint[lvl] - 2] + " sec";
          var lastLevel = "<div class='green'>[Próximo Nível]</div> Nível necessário : " + skillLevel[lvl][lastCheck];
          var skilldescLast = "<div class='info'>" + skillInfo[lvl][lastCheck] + "</div>";
          var mpLast = "Mana necessária : " + mp[lvl][lastCheck];
          var cdLast = "Resfriamento : " + (CDHere * cd[lvl][lastCheck]).toFixed(0) + " sec";
          var castingLast = "Tempo de lançamento : " + cast[lvl][lastCheck] + " sec";
          
          if (lvl == 8 || lvl == 9 || lvl == 19 || lvl == 22) {
              var allNextLevel = nextLevel + "<div class='passive'>Passiva</div>" + skilldescnext;
              var allCurrentLevel = currentLevel + "<div class='passive'>Passiva</div>" + skilldesc + "<br>";
              var allPreviousLevel = previousLevel + "<div class='passive'>Passiva</div>" + skilldescPrev + "<br>";
              var allLastLevel = lastLevel + "<div class='passive'>Passiva</div>" + skilldescLast + "<br>";
          } else if (cast[lvl][skillPoint[0]] == 0 ||!cast[lvl][skillPoint[0]] ) {
              var allCurrentLevel = currentLevel + "<br>" + mpcurrent + "<br>" + cdcurrent + "<br>" + skilldesc + "<br>";
              var allNextLevel = nextLevel + "<br>" + mpnext + "<br>" + cdnext + "<br>" + skilldescnext;
              var allPreviousLevel = previousLevel + "<br>" + mpPrev + "<br>" + cdPrev + "<br>" + skilldescPrev;
              var allLastLevel = lastLevel + "<br>" + mpLast + "<br>" + cdLast + "<br>" + skilldescLast;
          } else {
              var allCurrentLevel = currentLevel + "<br>" + mpcurrent + "<br>" + cdcurrent + "<br>" + castingcurrent + "<br>" + skilldesc + "<br>";
              var allNextLevel = nextLevel + "<br>" + mpnext + "<br>" + cdnext + "<br>" + castingnext + "<br>" + skilldescnext;
              var allPreviousLevel = previousLevel + "<br>" + mpPrev + "<br>" + cdPrev + "<br>" + castingPrev + "<br>" + skilldescPrev;
              var allLastLevel = lastLevel + "<br>" + mpLast + "<br>" + cdLast + "<br>" + castingLast + "<br>" + skilldescLast;
          }
       
      Alguém consegue dar um help? Segue também duas screenshots mostrando, uma no final da página, e a outra ao lado direito da página.
        
    • Por Lougans de Matos
      Eu irei apresentar a ideia que quero fazer em meu site e em seguida mostrarei o que já fiz e o que está funcionando corretamente e logo depois apresentarei o problema que não estou conseguindo resolver. Caso eu não seja claro em alguma parte, eu vou ficar super feliz de esclarecer para que a compreensão fique melhor.
       
      IDEIA:
      Eu estou fazendo uma tela de com informações sobre tipos de consultoria, para isso fiz 6 cards (Retangulo com Icone + nome) com os títulos que precisava. 
      O que vai conter nessa interação de cards:
       
      Hover:
      - Alteração de cor no icone e titúlo do card;
       
      Event Click:
      - Faz requisição Ajax e exibe a <div> com resposta;
      - Alteração de cor no icone e título do card;
       
      JÁ DESENVOLVIDO:
      Eu já consegui fazer a parte do hover, claro e o Event Click com Javascript, como segue abaixo:
       
      Esse é o HTML:
                         
      <div class="col-lg-4 col-md-6 mt-5"> <a data-consult-id="1"> <div class="text-center element">         <div style="margin-bottom: 25px;">             <i class="ti-package ti-icone"></i> </div>             <h4>             RH             </h4> </div> <!-- feature --> </a> </div>      <div class="col-lg-4 col-md-6 mt-5"> <a data-consult-id="2"> <div class="text-center element"> <div style="margin-bottom: 25px;"> <i class="ti-headphone-alt ti-icone"></i> </div> <h4> Processos Industriais </h4> </div> <!-- feature --> </a> </div>
      O CSS é:
       
      .element { box-shadow: 0 8px 50px -6px rgba(84,84,120,.26); padding: 40px 20px 20px; position: relative; background: #fff; cursor: pointer; } .element h4 { color: #3c9890; font-size: 20px } .element:hover div i{ background: rebeccapurple !important;     -webkit-transition: all .5s ease-in-out;     -moz-transition: all .5s ease-in-out;     -ms-transition: all .5s ease-in-out;     -o-transition: all .5s ease-in-out;     transition: all .5s ease-in-out; } .element:hover h4{ color: #9e6bd2 !important; transition: all .5s ease-in-out; }      .ti-icone { background: #35b1a6;     width: 80px;     height: 80px;     display: inline-block;     line-height: 80px;     text-align: center;     color: #fff;     font-size: 28px;     border-radius: 50%; }  
      E aqui está o Javascript:
      $(document).on('click', 'a[data-consult-id]', function () { let consult_id = $(this).attr("data-consult-id");     var obj = $(this);     let response = $(".response-content");     setTimeout(function(){     $.ajax({         url: "response.php?consult_id=" + consult_id,             type: 'GET',             success: function (data) {             $(response).slideToggle('fast', function () {                 $('a[data-consult-id] .element div').children('i').css("background-color", "");                     $('.element div', obj).children('i').toggleClass('actived');                     $('.element', obj).children('h4').toggleClass('text-actived');                 }).html(data);             }         }); }, 200); });  
      OBS.: Desculpa o detalhamento que pode parecer chato, mas se eu fizer simples demais ignoram a pergunta e podem dar negative, sla rsrs. 
       
      PROBLEMA:
      Agora o meu problema é segundo o exemplo seguinte: Se eu clicar no card RH, a requisição será feita e retornará os dados para o response, ok e com isso eu adicionei um SlideToggle para efeito de abrir e fechar e também junto com isso eu coloquei uma função para que quando isso acontecer, ele adicione na tag <i> e na tag <h4> a classe .actived/.text-actived, o que elas fazem pode ser visto logo abaixo:
       
      .actived { background-color: #663399 !important; } .text-actived { color: #9e6bd2 !important; }
      Então, tendo esse card ativo, eu tenho ele exatamente como quero, porém se tendo esse card aberto eu clicar em outro card, por exemplo Processos Industriais, o SlideToggle() é desativado mas mesmo assim as classes .actived/.text-actived são adicionadas na tag <i> e na tag <h4>. 
      Meu pedido é que alguem me ajude a entender como posso fazer essa funcionalidade para que quando eu clicar em um outro card, o antigo seja desativado e o AJAX do novo card seja aberto e exibido e com isso, a cor das tags "i" e "h4" do antigo tambem sejam desativadas e sejam ativadas no novo.
      Bom, era isso. Como fiz na minha pergunta anterior, eu vou colocar o link do site que estou desenvolvendo essa funcionalidade para talvez vocês verem melhor.
       
      Link do site que estou desenvolvendo:
      http://hecato.com/sistema/info/consultores.php
       
      Link do site de exemplo que possui caixas de info conforme eu preciso:
      https://www.wickbold.com.br/linhas-produtos/grao-sabor/
       
      Qualquer duvida, por favor, comentem e irei responder o mais rapido possivel. Eu também estou testando algumas formas para arrumar isso.
      Obrigado a todos e que a força esteja....
×

Informação importante

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