Ir para conteúdo

POWERED BY:

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 Rafael_Ferreira
      Não consigo carregar a imagem do captcha do meu formulário. Foi testado com o xampp e easyphp. Também não carregou a imagem de outros captcha. 
       
       
    • Por luiz monteiro
      Olá.
      Estou atualizando meu conhecimento com Front-End e me deparei com o seguinte problema.
      Criei um sistema para fazer o upload de imagens e alguns campos text.
      Algo bem simples para depois começar a estudar javascript para mostrar a miniatura....
      Mas quando saio do navegador Chrome ou da aba por mais de 3 minutos, ao retornar o navegador as vezes atualiza ou nem chega atualizar mas limpa os campos.
      Estou usando um Smart Motorola com Android, mas um amigo testou no iPhone e acontece a mesma coisa.
      Gostaria de saber se há como usar javascript para evitar isso?
      Agradeço desde já.

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Uploader</title>
      </head>
      <body>
          <form action="?" method="post" enctype="multipart/form-data">
              <br><br>
              <div>selecione a imagem 1</div>
              <input type="file" name="foto1" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem1">
              
              <br><br>
              <input type="file" name="foto2" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem2">
              
              <br><br>

              <input type="file" name="foto3" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem3">
              
              <br><br>
              <input type="submit" value="Enviar">
              <br><br>
          </form>
      <?php
      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
          vardump ($_FILES);
      }
      ?>
      </body>
      </html>
       
       
       
    • Por belann
      Olá!
       
      Estou usando o nextjs versão 15.2.3 e criei uma navbar que quando é carregado o programa aparece com a home, mas na hora de clicar na página produtos desaparece a navbar.
      A navbar esta sendo chamada no layout.tsx estou usando typescript
      e fica dessa forma
      <div>           <Navbar/>             <main>{children}</main>             </div>  
    • Por ILR master
      Fala pessoal, tudo bem?
       
      Eu tenho o seguinte código:
       
      <script>
         $(function(){
      var jElement = $('.fixar_banner');
      $(window).scroll(function(){
          if ( $(this).scrollTop() > 120 ){
              jElement.css({
                  'position':'fixed',
                  'top':'10px'
              });
          }else{
              jElement.css({
                  'position':'relative',
                  'top':'auto'
              });
          }
      });
      });
      </script>
       
      Porém, eu quero que a div fique fixa até que outro elemento apareça na tela, tipo o rodapé da página por exemplo. É mais ou menos como a página de notícia do uol.
      https://noticias.uol.com.br/internacional/ultimas-noticias/2025/01/19/sonho-americano-brasileiros-moram-em-carro-e-buscam-comida-no-lixo-nos-eua.htm
       
      Espero ter sido claro.
       
      Obrigado :)
       
×

Informação importante

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