[Resolvido] Javascript funciona no FF e não no IE (ou vice-versa)

Scaico · Novembro 24, 2008

Estou com um pequeno problema, galera:

fuçando aqui no fórum, acabei encontrando um script que pretendo usar em um projeto. Ele serve para mostrar/esconder divs conforme clico no botão.

Esse script funcionou OK, do jeitinho que eu queria.

Mas eu quis dar uma incrementada, mudando o fundo dela conforme estivesse aparecendo ou não. Mais ou menos como no site da Vivo:

http://www.vivo.com.br/portal/servicos_vivo_zap.php

O problema é que se eu faço o script de uma forma, funciona no Firefox (e Opera) e não no IE.

E se eu faço funcionar no IE, não funciona no Firefox.

Aqui abaixo tem os exemplos online e o códigos, para ver se vocês podem me ajudar:

Versão Firefox

http://padovaniprado.com.br/scaico/exemplo_firefox.html

function icone(id){
var mudar = document.getElementById(id);
if (mudar.style.background == ""){
	mudar.style.background = "url(seta_cima.jpg)";
}else{
	mudar.style.background = "";
}
}

Versão IExplorer

http://padovaniprado.com.br/scaico/exemplo_iexplorer.html

function icone(id){
var mudar = document.getElementById(id);
if (mudar.style.background == "url(seta_cima.jpg)"){
	mudar.style.background = "url(seta_baixo.jpg)";
}else{
	mudar.style.background = "url(seta_cima.jpg)";
}
}

Caso não seja possível fazer o mesmo código funcionar para os 2, tem como criar alguma condição para que cada navegador carregue o arquivo .js correspondente?

Valeu galera!

William Bruno · Novembro 24, 2008

Esse segundo:

http://padovaniprado.com.br/scaico/exemplo_iexplorer.html

Funcionou normal no meu FF3.. não entendo o porque não funcionaria.

Assim como o problema do primeiro, é que a imagem se perde... pois você atribui um "" à ela.

Existem algumas diferenças entre os browsers, mas não é isso não. Certeza que esse segundo não funciona no teu FF ?

Scaico · Novembro 24, 2008

Esse segundo:

http://padovaniprado.com.br/scaico/exemplo_iexplorer.html

Funcionou normal no meu FF3.. não entendo o porque não funcionaria.

Assim como o problema do primeiro, é que a imagem se perde... pois você atribui um "" à ela.

Existem algumas diferenças entre os browsers, mas não é isso não. Certeza que esse segundo não funciona no teu FF ?

Certeza que não funciona aqui no FF 3.0.4...

Na verdade, funciona, mas só da primeira vez.

Depois a seta não muda mais... Só no Internet explorer.

Não importa quantas vezes eu clique, a seta fica "travada" pra cima.

:(

Maujor · Novembro 24, 2008

...

if (mudar.style.backgroundImage == "url(seta_cima.jpg)") {

mudar.style.backgroundImage = "url(seta_baixo.jpg)";

} else {

mudar.style.backgroundImage = "url(seta_cima.jpg)";

...

Carutcho · Novembro 24, 2008

Fala aee amigaum,

Eu faria de um modo diferente do seu,

eu faria mais ou menos assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
img {
padding:5px;
border:1px solid #cccccc;
margin-bottom:20px;
}
#titulo1, #titulo2, #titulo3, #titulo4 {
width:165px;
padding:2px;
margin-top:5px;
border:dotted 1px #0099CC;
font-family:Verdana;
font-size:12px;
font-weight:bold;
text-align:right;
/* fazer o cursor virar uma mãozinha*/
cursor:pointer;
}

#descricao1, #descricao2, #descricao3, #descricao4  {
display:none;
width:350px;
padding:10px;
border:dotted 1px #0099CC;
margin-top:-1px;
margin-bottom:20px;
}

.setaCima {background:url(http://padovaniprado.com.br/scaico/seta_cima.jpg);}
.setaBaixo {background:url(http://padovaniprado.com.br/scaico/seta_baixo.jpg);}
</style>
<script type="text/javascript">
/*
  obj -> elemento que eu estou clicando 
  active-> id do objeto q eu quero mostrar e esconder
*/
function cimaBaixo(obj,active)
{
// se eu estiver usando a classe que tem a seta pra cima, obrigatoriamente eu tenho q jogar a seta pra baixo e esconder a outra div e Vice-versa.
	if (obj.className == "setaCima"){
		obj.className = "setaBaixo";
		document.getElementById(active).style.display = "none";
	}
	else
	{
		obj.className = "setaCima";
		document.getElementById(active).style.display = "block";
	}
}
</script>
</head>

<body>
<img src="exemplo.jpg" />
<div id="titulo1" onclick="cimaBaixo(this, 'descricao1');" class="setaBaixo">Ações e Benefícios</div>
<div id="descricao1"  style="display:none;" ><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis nec sem. Etiam justo. In pellentesque. Mauris dolor eros, elementum et, posuere a, bibendum cursus, ipsum. Pellentesque vitae neque nec lacus imperdiet venenatis. Donec sollicitudin. Phasellus in mi non lacus dignissim suscipit. Praesent luctus neque eu sem. Donec pede. Vivamus lacinia diam vel lacus egestas convallis. Ut ac pede sit amet arcu tempus faucibus. Pellentesque nunc ante, interdum eu, viverra ut, pellentesque ut, nisl. Duis eget sem quis tellus feugiat iaculis. Ut id neque. Suspendisse et nisi. In felis dolor, interdum ac, feugiat ut, feugiat ut, lectus. Nulla magna urna, gravida quis, pretium in, tristique fermentum, lorem. Nulla facilisi. Integer vel purus. Proin aliquet lacinia tellus.</p></div>

<div id="titulo2" onclick="cimaBaixo(this,'descricao2');" class="setaBaixo">Indicações</div>
<!-- sou obrigado a por display:none em todas essas layers de descrição, para que o javascript reconheça e modifique apenas o style-->
<div id="descricao2" style="display:none;" >
<ul>
<li>Tópico 1</li>
<li>Tópico 2</li>
<li>Tópico 3</li>
<li>Tópico 4</li>
</ul>
</div>

<div id="titulo3"  onclick="cimaBaixo(this,'descricao3');" class="setaBaixo">Contra-Indicações</div>

<div id="descricao3" style="display:none;" >
<ul>
<li>Tópico 5</li>
<li>Tópico 6</li>
<li>Tópico 7</li>
<li>Tópico 8</li>
</ul>
</div>

<div id="titulo4"  onclick="cimaBaixo(this,'descricao4');" class="setaBaixo">Aplicação</div>
<div id="descricao4" style="display:none;" >
Bla Bla Bla Bla Bla

</div>

</body>
</html>

abssss

Scaico · Novembro 25, 2008

Tanto a solução do Carutcho quanto a do Maujor surtiram efeito.

Muito obrigado!

Vou ver qual das duas é mais viável.

Edit: A solução do Carutcho é mais viável por juntar as duas funções em uma só, deixando o código mais limpo!

Tenho uma dúvida, Maujor:

Porque diabos o Firefox aceitava somente style.background na PRIMEIRA mudança (quando se clicava a primeira vez) mas depois não aceitava mais? Você não concorda que ao adicionar o Image depois do background esse erro deveria ter continuado?

O Firefox aceitava a mudança do Background e depois parava de aceitar. Bizarro.

De qualquer modo, obrigado aos dois!

Abraços,

Maujor · Novembro 25, 2008

Ambas as soluções surtiram efeito, mas as duas são ruins.

Eu me limitei a alterar o mínimo possível o código original.

Se você quiser desenvolver uma solução em acordo com os padrões web faça o seguinte:

retire todo o JavaScript e estilização da marcação HTML.
desabilite JavaScript no navegador e certifique-se que nenhum conteúdo se perde.
possibilite abrir os conteúdos com navegação por teclado.

Scaico · Novembro 25, 2008

Ambas as soluções surtiram efeito, mas as duas são ruins.

Eu me limitei a alterar o mínimo possível o código original.

Se você quiser desenvolver uma solução em acordo com os padrões web faça o seguinte:

retire todo o JavaScript e estilização da marcação HTML.

desabilite JavaScript no navegador e certifique-se que nenhum conteúdo se perde.

possibilite abrir os conteúdos com navegação por teclado.

Opa Maujor. Beleza?

A idéia não é deixar nem o JS nem o CSS no HTML. Trabalharei com folha de estilos externa e JS externo também, conforme aprendi nos tutoriais do Dinossauro das CSS, tempos atrás. Hehehehehe.

O mesmo vale para me certificar de que o conteúdo poderá ser visualizado com ou sem JavaScript. Nem que para isso, no final, eu precise arrumar uma outra maneira de fazer isso funcionar.

Já a navegação por teclado é algo que não tinha passado pela minha cabeça... Vou dar uma verificada nisso também!

Valeu pelas dicas!

Maujor · Novembro 25, 2008

Mas, a grande dica para este efeito não é a minha.

É um script desenvolvido por Chris Heilmann do WSP

que você encontra neste link

Scaico · Novembro 26, 2008

Chefe Maujor:

http://padovaniprado.com.br/scaico/exemplo.html

• Agora sem JS e CSS na marcação HTML;

• Com a possibilidade de acessar as informações mesmo com JavaScript desligado;

• Navegação via teclado 100%.

Valeu pelas dicas, cara!

Abração!

Arquivado

[Resolvido] Javascript funciona no FF e não no IE (ou vice-versa)

Recommended Posts

Scaico 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Scaico 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carutcho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Scaico 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

Scaico 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

Scaico 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Não consigo carregar imagem do captcha no meu formulário

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Fóruns

Tempo Real

Informação importante