Hover selector javascript

[Lucas109]

Eu tenho uma lista de produtos e quando o usuário clica em um deles eu quero que seja exibida uma tela com detalhes do produto selecionado.

function chamadetalhes(){
	var conta;
	var colection=document.getElementsByClassName("prod");
	var desc=["img1", "img2", "img3", "img4", "img5", "img6", "img7"];
		for(conta=0; conta<colection.length; conta++){
			if(colection[conta].style.cursor == "pointer"){
				document.getElementById("info").innerHTML=desc[conta];
				document.getElementById("detalhes").style.display="block";
			}
		}
}

.prod:hover{
	box-shadow: 0px 0px 30px 0px rgba(50, 50, 49, 1);
	cursor: pointer;
}

Ele não entra no If..... não consigo entender o porque

[DiF]

@Lucas109  Olá, seja bem vindo em nosso Fórum do Clube do Hardware.

Primeiro de tudo, como estão sendo armazenados os dados? de onde estão vindo?

 

Você poderia resolver esse problema de forma simples usando  um banco e dados e a técnica Ajax.

[Lucas109]

 

Aproveitando q você mencionou banco de dados: você poderia me indicar algum software similar ao wamp server ? ou onde posso baixar uma versao mais antiga dele ? quando tento instala-lo diz q n é compativel com meu windows (xp).

Estou começando a mexer com web faz pouco tempo ( desde a semana passada na vdd ) então quero me focar no basicao mesmo : html, css, javascript. Tinha planos de mexer com php mas tive esse problema com o wamp.

mas então, porque nao está entrando dentro desse if ?

 

"como estão sendo armazenados os dados? de onde estão vindo?"

?

[DiF]

@Lucas109 Não sei qual é o problema do seu código.  E nem de onde vem os dados. Como mencionei anteriormente.

 

Sobre o wamp, não recomendo. e nem o Xampp.   Use o easyPHP dev-server 16.1.1

Sobre seu windows.. bem não posso indicar nada.. pois ele já está fora de linha, um sistema defasado que nenhum programa na sua atualidade roda bem.

 

Recomendo que troque seu windows, pelo menos o 7 ou o 8.1(particularmente o 8.1 é melhor na minha opinião)

 

Por sugestão, estude diretamente o uso do banco de dados, PHP e jQuery vai facilitar a sua vida.

 

[Lucas109]

<div  class="galeria">
	<div class="linha">
	<div class="coluna col3">
		<img class="prod" src="imagens/Inverno.jpg" onclick="chamadetalhes()">
		<div class="descP"><strong>teste</strong></div>
	</div>
	<div class="coluna col3">
		<img class="prod" src="imagens/Pôr-do-sol.jpg" onclick="chamadetalhes()">
		<div class="descP">texte1</div>
	</div>
	<div class="coluna col3">
		<img class="prod" src="imagens/Ninféias.jpg" onclick="chamadetalhes()">
		<div class="descP">texte2</div>
	</div>
		<div class="coluna col3">
		<img class="prod" src="imagens/Montanhas azuis.jpg" onclick="chamadetalhes()">
		<div class="descP">texte3</div>
	</div>
	<div class="coluna col3">
		<img class="prod" src="imagens/brain.jpg" onclick="chamadetalhes()">
		<div class="descP">texte4</div>
	</div>
	<div class="coluna col3">
		<img class="prod" src="imagens/orangek.jpg" onclick="chamadetalhes()">
		<div class="descP">texte5</div>
	</div>
	</div>
		
	</div>

da onde vem os dados ?

bem, ai esta a chamada da função.

 

esta anotada a sugestao, obg!

[DiF]

@Lucas109 Se eu entendi, você quer exibir o conteúdo do elemento

<div class="descP">texte1</div>

Ao clicar na imagem? é isso?

O elemento DIV com a classe "descP" ficaria escondido e ao clicar na imagem alterasse para ser visível?

 

Se for isso, Nem precisa de Javascript! Poderias fazer somente com CSS.. por exemplo:

 

https://jsfiddle.net/u9gtyp2m/

 

Daria para fazer com jQuery também, mas com css o desempenho é melhor.

PS: No exemplo é só um hover apontando o mouse em cima da imagem. SE quiser fazer com clique do mouse, aí sim precisa da intervenção do jQuery(javascript)

 

[Lucas109]

Me desculpe por não explicar direito.

o DescP seria o nome e o preço dele ( sim, deveria ter posto NomeP XD) por exemplo tem la a imagem e logo abaixo dela no DescP está sla borracha R$ 0,50 por exemplo. Se o usuário clicar na imagem abrirá uma div no meio da tela ( z-index maior) com a descrição e mais fotos do determinado produto.

function chamadetalhes(){
	var conta;
	var colection=document.getElementsByClassName("prod");
	var desc=["img1", "img2", "img3", "img4", "img5", "img6", "img7"];
		for(conta=0; conta<colection.length; conta++){
			if(colection[conta].style.cursor == "pointer"){
				document.getElementById("info").innerHTML=desc[conta];
				document.getElementById("detalhes").style.display="block";
			}
		}
}

esse vetor desc que seria a real descrição do produto.

detalhes é o nome da div que aparece e info é uma outra div que aparece dentro da detalhes contendo o texto,  ai,  ao lado estariam mais imagens.

Para saber qual produto foi selecionado eu verifico qual está com o cursor pointer

.prod:hover{
	box-shadow: 0px 0px 30px 0px rgba(50, 50, 49, 1);
	cursor: pointer;
}

massssss o danado nao entra no if, (já me certifiquei que entra na função e no loop for  o prob é esse if mesmo)

Eu fui tendo as ideias à medida que fui desenvolvendo esse site, por isso me escapou o DescP, só agr que reparei isso.

[DiF]

@Lucas109 OK.  Estou assumindo que os dados do produto estão digitados diretamente no elemento html.

Nesse caso, poderia fazer de forma bem simples no jQuery. 

 

O primeiro passo é fazer a sua estrutura do que vai mostrar e a janela que vai aparecer com os dados dele.

Depois é fazer um código que permita a ação de click para cada bloco do elemento.

O lado bom do jQuery é que  ele possui diversos plugins que fazem um modal.  Com isso você pode inserir qualquer coisa dentro dele.. e ao clicar na imagem abrirá uma janela com as informações.

 

http://jquerymodal.com/

Este é um bom plugin. Existem muitos, mas este é bem fácil de entender!

 

PS:  SE estivesse usando um banco de dados, seu trabalho ia ser menor. pois aí bastaria criar apenas uma estrutura e coloca-la dentro de um laço de while puxando os dados do banco de dados! 

 

 

[Lucas109]

'Estou assumindo que os dados do produto estão digitados diretamente no elemento html.'

Os dados estão no vetor desc como disse. img1 , 2, 3 etc são strings que eu coloquei para teste. Os detalhes do produto vão ficar la.

'O primeiro passo é fazer a sua estrutura do que vai mostrar e a janela que vai aparecer com os dados dele.'

A div que vai aparecer também está pronta que é a detalhes e a info.

'Depois é fazer um código que permita a ação de click para cada bloco do elemento.'

é ai que eu parei, porque ele n entra no if. Ja tentei onmouseover, mouseover e não funciona. Vou dar uma estudada nessa Jquery e tentar fazer usando ela.

Obg

 

[DiF]

@Lucas109 Recomendo não fazer isso usando vetores.  Ainda mais quando se trata de centenas de produtos por exemplo.

Nesse caso, para utilizar um vetor, o mais indicado seria utilizar o JSON. Aí sim você pode fazer o seu vetor de dados e pegar por jquery.

 

Mas ainda assim, considere usar o banco de dados mysql. com ele você faz o que quer fazer com poucas linhas de código e ainda permite que tenha centenas de milhares de produtos... 

[JonathanMMachado]

Em 07/11/2016 às 23:24, Lucas109 disse:

Tinha planos de mexer com php mas tive esse problema com o wamp.

 

Eae, beleza cara?

Então, uma solução que você pode fazer é não instalar nem wampp ou xampp.

Se você instalar o PHP mais recente (não lembro a partir de qual versão começou a funcionar) o próprio PHP tem uma função de "servidor". Os passos são os seguintes (Obs.: Só testei com PHP básico, sem framework algum):

1. Instalar o PHP mais recente;
2. Adicionar o PHP as variáveis de ambiente;
3. Segurar o shift e o clicar com o botão direito do mouse na pasta onde está os seus arquivos e depois clicar em "Abrir janela de comando aqui" (ou algo semelhante);
4. Rodar o seguinte comando: php -S localhost:8080 (8080 é a porta onde vai rodar);
5. Pronto.

Agora é só abrir o seu navegador e acessar o seguinte link: http:\\localhost:8080 que vai estar a sua aplicação PHP rodando.

Espero ter ajudado.

[Lucas109]

eae cara, obg por responder.

esse ai de n precisar de wamp eu ja tentei.

tem que abrir um arquivo ini e por o path dos sources senao me engano. porém esse arquivo n estava no diretorio, abri outro mas n achei a linha para adicionar o patch. Mesmo assim tentei acessar o localhost na port e deu um erro la.

baixei o easy php e aparentemente esta td ok,  ainda n testei nenhuma pagina.

[DiF]

@Lucas109 Eu uso o EasyPHP desde suas primeiras versões já faz alguns anos. Digo que nunca deu problemas.

Deixo aqui um video explicativo de como ativar o apache e mysql nele e abrir uma página em php pelo localhost no navegador

 

[Lucas109]

Muito obrigado cara !

Depois que eu terminar a pagina dos produtos vou para a de contato ai vou precisar do mysql e php, por isso ainda não criei nenhuma pagina nele.