Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

guilomaker

Exibir e mostrar Div

Recommended Posts

Desculpem pelo titulo errado, Exibir e esconder a div.

 

Boa tarde! estou cirando um catálogo online http://catalogo.reidoaluminio.com.br

 

e nele eu quero mostrar só a foto do produto e um botão escrito informações, fiz pra abrir as informações dos produtos quando passa o mouse em cima da box do produto, usei mouseover e mouseout, ate então seria assim que eu queria, acho bacana dessa forma, só que com o andamento da coisa me apareceu um problema, nas informações do produto eu preciso inserir uma tabela com tamanhos e litragem, e essa tabela vai ser maior que a div que exibe as informações assim vou ter que usar um iframe pra tabela pra que a pessoa role a mesma.

 

o problema e que da forma que eu fiz não tem como a pessoa interagir com as informações! porque, quando ela tira o mouse da div box, as informações fecham.

 

eu fiquei um tempo parado com desenvolvimento e não sei como não estou conseguindo fazer algo que pra mim já foi muito simples um dia, mais esqueci!

 

quero que a pessoa clique ou na foto ou no botão de informações, ai a div de informações fica aberta da forma que der pra pessoa clicar em cima e etc, e no topo da div de informações colocar uma outra div como um (x) pra que a pessoa só feche ela quando quiser, e também não deixar abrir mais de uma div de informações, se abrir outra a que estava aberta fecha.

 

por incrível que pareça, estou apanhando pra fazer isso.

Compartilhar este post


Link para o post
Compartilhar em outros sites

tem uma ferramenta com jQuery que estudei a pouco segue o link: http://www.w3schools.com/jquery/jquery_hide_show.asp

 

assim você pode criar uma div que apareça só quando um botão for clicado!

 

$("identifica o botão").click(function{

$("identifica a div").show();

});

 

mas para tal tem que saber um pouco de jQuery

 

Pedro,

 

Realmente o evento onClick é necessário, mas nesse caso ele vai precisar de um each para identificação das divs e seus botões. Se você colocar só o evento click puro, vai precisar chamar div por div até cansar. (Dá pra fazer um for que adicione um número ao final da classe ou id de cada um, mas já viu o trampo né?) huahsuhaushuahsuhaus

 

---------------------------------------------------------------------------

 

Guilomaker,

 

Bem, você disse que já desenvolveu por um tempo, mas agora está parado. Você lembra de ter visto o conceito de tabs? Bem, pra div é quase a mesma coisa.

 

Eu preparei um modelo no JSFiddle pra você estudar o código e implantar no seu.

 

Boa sorte e bons estudos!

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

Pedro,

 

Realmente o evento onClick é necessário, mas nesse caso ele vai precisar de um each para identificação das divs e seus botões. Se você colocar só o evento click puro, vai precisar chamar div por div até cansar. (Dá pra fazer um for que adicione um número ao final da classe ou id de cada um, mas já viu o trampo né?) huahsuhaushuahsuhaus

 

---------------------------------------------------------------------------

 

Guilomaker,

 

Bem, você disse que já desenvolveu por um tempo, mas agora está parado. Você lembra de ter visto o conceito de tabs? Bem, pra div é quase a mesma coisa.

 

Eu preparei um modelo no JSFiddle pra você estudar o código e implantar no seu.

 

Boa sorte e bons estudos!

 

 

não e exatamente isso que eu quero, tipo! todos produtos utilizam uma mesma classe "produtos-box" essa e a classe de todas as box dos produtos, o problema que quando clico ela dispara todas, preciso que ela mostre so a que estou clicando e mantenha as outras fechadas.

 

se vc entrar ai no link e passar o mouse em cima de um produto, vc vai ver que uma outra box aparece, eu preciso que ela continue aparecendo dessa mesma forma, só que mudar o modo de disparo, a pessoa clica e abre, e quando ela quiser ela fecha.

Compartilhar este post


Link para o post
Compartilhar em outros sites
você vai ter que navegar no DOM, usando THIS. Estava com o mesmo problemas esses dias, um amigo respondeu neste mesmo fórum com este link, li, entendi e consegui resolver. Espero que ajude :)






Compartilhar este post


Link para o post
Compartilhar em outros sites

Amo esse fórum! pessoal aqui ajuda a adquirir conteúdo! :rolleyes:

quanto ao problema muito boa a solução através da navegação DOM.

assim só perecisa colocar a descrição logo após o botão e vualá! :D

e com o $().siblings() você evita que abra mais de uma ao mesmo tempo! muito bom! muito bom msm!

quanto a minha solução um pouco asna!...mas eu usaria conteúdo dinâmico com php ai n teria trabalho definir id para cada botão e descrição e tal!

Compartilhar este post


Link para o post
Compartilhar em outros sites

conseguir fazer da forma que eu queria

https://catalogo.reidoaluminio.com.br/

 

só o primeiro produto que já está funcionando.

 

só que eu não consigo fechar kkkkk tudo foi da forma mais fácil

$(document).ready(function(){

    $(".produtos-box").click(function(){
        $(this).children(".produtos-box-info").show();
    });
        $(".fechar").click(function(){
        $(this).children(".produtos-box-info").hide();
    });
}); 

quando clico no .produto-box, a .produto-box-info aparece certinho, só que a classe .fechar não está fazendo a .produto-box-info fechar

 

Vou dar uma estudada nessa navegação DOM!

Compartilhar este post


Link para o post
Compartilhar em outros sites

usa Toggle no lugar de show e elimina esse fechar. O toggle funciona assim, quando você clika ele mostra e se clikar de novo ele fecha!

Navegação DOM resolve perfeitamente o que vc precisa!

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
×

Informação importante

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