Jump to content
Sign in to follow this  
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.

Share this post


Link to post
Share on other 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!

 

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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!

Share this post


Link to post
Share on other 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!

Share this post


Link to post
Share on other 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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Emilio Saymon
      tenho um site que precisa que assim que eu aperte um botão ele verifiquei se a variavel sala for sala 1 ele abre no modal da sala1 se não abre no modal da sala2. Dei uma pesquisada e vi que da pra fazer com a função onclik(), mas não tenho noção como fazer. Aqui vai o código.
      botão <td><a href="#" class="btn btn-primary" data-toggle="modal" data-target="#modalLoginForm">XXX</a></td> <!-- sala 1 --> <div class="modal-body mx-3"> <div class="md-form mb-4"> <form method="POST" action="valida.php"> <h6>Sala 1</h6> <input type="password" class="form-control validate" name="senha"> </div> </div> <button type="submit" class="btn btn-primary" name="enviar">Entrar</button> </form> </div> </div> </div> </div> </div> <!-- sala 2 --> <div class="modal fade" id="modalLoginForm2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header text-center"> <h4 class="modal-title w-100 font-weight-bold">Senha</h4> <button type="btn-primary" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body mx-3"> <div class="md-form mb-4"> <form method="POST" action="valida.php"> <p>Sala 2</p> <input type="password" class="form-control validate" name="senha2"> </div> </div> <div class="modal-footer d-flex justify-content-center"> <button type="submit" class="btn btn-primary" name="enviar1">Entrar</button> </form> </div> </div> </div> </div>  
    • By danicarla
      Bom dia pessoal,

      Quero fazer um link com o titulo de uma cor e o texto em outra, mas quando passar o mouse em cima queria que a cor dos dois ficasse igual
      Meu codigo está assim:
      <style type="text/css"> a.ChamadaNoticias:link{text-decoration:none;} a.ChamadaNoticias:visited{text-decoration:none;} a.ChamadaNoticias:hover{color: #00FF05;text-decoration:underline;} .tituloA{font-family:'Open Sans', sans-serif;color:#00698C;font-size:16px;font-weight:bold;} .textoB{font-family:'Open Sans', sans-serif;color:#333;font-size:16px;} </style> <a href="#" class="ChamadaNoticias"> <div class="tituloA">Titulo da noticia</div> <div class="textoB">Aqui vai uma breve descrição da noticia</div> </a> Como preciso fazer com meu CSS para quando passar o mouse em cima mudar a cor do titulo e do texto para mesma cor?
    • By joazinDev
      Estou tentando calcular duas horas e as vezes precisso que ela saia negativa tbm
      Exemplo:
      07:33 - 07:48 = -00:15
      Como faço isso utilizando php ?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.