Ir para conteúdo

POWERED BY:

Arquivado

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

Muricium

[Resolvido] problema de link no IE e Fire Fox

Por , em Javascript

Recommended Posts

Muricium    0

Muricium
Postado

Aprendi no curso de xhtml um código em javascript onde clicamos no link e o conteudo aparece, algo bem simples, mas testando em navegadores e cada um deu um tipo de problema, no firefox ele nao aparece, no IE ele fica desconfigurado e no google chrome ele funciona perfeito.

 

Seria esta função

 

<script type="text/javascript">

 

function aparece()

{camada1.style.visibility="visible";

camada2.style.visibility="hidden";

camada3.style.visibility="hidden";

camada4.style.visibility="hidden";

}

 

function aparece2()

{camada1.style.visibility="hidden";

camada2.style.visibility="visible";

camada3.style.visibility="hidden";

camada4.style.visibility="hidden";

}

 

function aparece3()

{camada1.style.visibility="hidden";

camada2.style.visibility="hidden";

camada3.style.visibility="visible";

camada4.style.visibility="hidden";

}

 

function aparece4()

{camada1.style.visibility="hidden";

camada2.style.visibility="hidden";

camada3.style.visibility="hidden";

camada4.style.visibility="visible";

}

 

 

</script>

 

existe algo que preciso fazer para ele aceitar e funcionar normalmente nos navegadores IE e FF?

 

Abraco

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ted k'    126

Ted k'
Postado

mais quem é camada1, camada2, camada3 e camada4, não vi você fazendo referencias a eles exemplo

 

camada1 = document.getElementById("div1");

Compartilhar este post

Link para o post
Compartilhar em outros sites

Muricium    0

Muricium
Postado

Ola Segue o restante do que estou usando, estou usando também css externo e colocando visibility:hidden; em cada camada.

 

<script type="text/javascript">

 

function aparece()

{camada1.style.visibility="visible";

camada2.style.visibility="hidden";

camada3.style.visibility="hidden";

camada4.style.visibility="hidden";

}

 

function aparece2()

{camada1.style.visibility="hidden";

camada2.style.visibility="visible";

camada3.style.visibility="hidden";

camada4.style.visibility="hidden";

}

 

function aparece3()

{camada1.style.visibility="hidden";

camada2.style.visibility="hidden";

camada3.style.visibility="visible";

camada4.style.visibility="hidden";

}

 

function aparece4()

{camada1.style.visibility="hidden";

camada2.style.visibility="hidden";

camada3.style.visibility="hidden";

camada4.style.visibility="visible";

}

 

 

</script>

 

<body>

 

<div id="menu_sinopse">

<a href="#" onClick="aparece()"> Sinopse </a></div>

<div id="menu_ficha">

<a href="#" onClick="aparece2()">Ficha Técnica </a></div>

<div id="menu_fotos">

<a href="#" onClick="aparece3()"> Fotos </a></div>

<div id="menu_nece">

<a href="#" onClick="aparece4()"> Necessidades </a></div>

 

<div id="camada1"> teste 01 </div>

<div id="camada2"> teste02 </div>

<div id="camada3"> teste03 </div>

<div id="camada4"> teste04 </div>

 

</body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Basta copiar o código a seguir e colar em seu editor HTML:

 

<html><head>
<title></title>

<script language="JavaScript" type="text/javascript">
//Informe a quantidade de camadas que ficarão visíveis:
var numCamadas = 4;

var iLoop;
function mostrarCamada(valor){
//Ocultando todas as camadas que estiverem visíveis;
	for (iLoop = 1; iLoop <= numCamadas; iLoop++) {
		camadaAtual = "camada"+iLoop;
		document.getElementById(camadaAtual).style.display = "none";
	}
//Mostrar a camada de acordo com o valor enviado:
document.getElementById(valor).style.display = "block";
}
</script>

</head>
<body>
<table width="100%" border="1">
<tr>
	<td width="50%">
<a href="#" onClick="mostrarCamada('camada1')">Sinopse </a>
<br><a href="#" onClick="mostrarCamada('camada2')">Ficha Técnica </a>
<br><a href="#" onClick="mostrarCamada('camada3')">Fotos </a>
<br><a href="#" onClick="mostrarCamada('camada4')">Necessidades </a>
	</td>
	<td>
<div id="camada1" style="display:none">Teste 1</div> 
<div id="camada2" style="display:none">Teste 2</div>
<div id="camada3" style="display:none">Teste 3</div>
<div id="camada4" style="display:none">Teste 4</div>
	</td>
</tr>
</table>

</body>
</html>

Termos: "ocultar mostrar vários divs".

Compartilhar este post

Link para o post
Compartilhar em outros sites

Muricium    0

Muricium
Postado

Otimo Klonder

 

maravilha funcionou certinho, mas apenas no Fire Fox no Internet Explorer ele continua desconfigurado fica jogado para o lado direito

 

segue o link para observar

 

www.ciapolichinelo.com.br/oficina.html

 

 

Mauricio

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Pelo código-fonte do seu site, percebi que você não utilizou tabelas. Eu gosto de tabelas justamente por causa da disposição dos elementos na tela. Nada impede que você continue utilizando os divs, mas estes ficarão dentro de células de tabelas e, obviamente, a sua posição será padrão, para a maioria dos navegadores.

 

Se você não for utilizar tabelas, terá que definir a posição de cada camada (div) para cada navegador com o uso de CSS... isso toma um tempão... além disso, existem atualmente mais de 80 navegadores (levando em consideração as suas atualizações). Ter que ficar mexendo em cada um deles é froids, hehehe!!!

 

Se você utilizar tabelas, isso não será necessário.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ted k'    126

Ted k'
Postado

o amigo otimizou muito o código, como citei, estava faltando tbm o document.getElementById, fique ligado nisso!!

bela oitmização amigo klonder

Compartilhar este post

Link para o post
Compartilhar em outros sites

Muricium    0

Muricium
Postado

Maravilha

 

cara eu estava usando css externo e nao sei pq ele nao reconhecia a configuração, coloquei tudo no site e ele reconheceu e deu certo. não uso tabela pq apanho bastante de tabela.

 

Valeu pela ajuda

 

abs

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Pelo que li o atributo Language é deprecated.

<script language="JavaScript" type="text/javascript">
Ele existia para indicar qual versão de Javascript estávamos querendo usar. Como: Language="Javascript 1.2", e isso causava muitas vezes erros, por incompatibilidade.. hoje em dia, ainda bem isso não é mais necessário... então... que tal pararmos de usar ele?

Apenas o atributo type já basta :lol:

<script type="text/javascript">

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito