Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal, estou com um probleminha.
Aqui está minha página http://kineri.freehostia.com/teste
É um formulário que ao ser submetido, envia um e-mail p/ mim para tirar o email da pessoa da lista da empresa.
Meu problema é: O Layout tá um pouco diferente nos browsers. (IE8, Chrome, FF). E o javascript não está funcionando de acordo... (testem primeiro no FF, é o ideal)
Gostaria de uma ajuda, sobre como resolver isso
Obrigado
Sobre as diferenças visuais, use um CSS Reset.
Sobre o JavaScript. Você usou jQuery e não manjo nada de jQuery. Isso aí nem precisa ser feito com jQuery, essa é verdade. Pode fazer sem framework nenhum que é simples. É só trabalhar no checkbox com display.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Ok, vou dar uma olhada no reset.
Usei jQuery pois foi um jeito fácil de selecionar todos os visíveis. Minha lógica na programação não foi muito longe.
O que eu fiz com o jQuery foi: cada vez q acontece o "change" (quando o option é selecionado), uma função é disparada e todos os inputs são escondidos e só o correto é exibido.
No IE, os comportamentos não estão de acordo. O Evento é disparado quando quando o option é de-selecionado.
Por alguma razão estranha não consigo editar meu post anterior.
Assim que conseguir subir as screenshots pro imageshack, eu posto aqui
EDIT:
Chrome:
Firefox:
IE8:
creio que um dos problemas seja o Reset. Já aplicou?
dá uma olhada no que acontece com o Opera, quando aparece algum campo que permita o [input=>text] de justificativa:
Acredito que o problema seja devido ao jQuery.
vou postar aqui o que eu acredito que seja uma forma de melhor posicionar seus elementos:
<form action="" method="post" id="remove_email">
<fieldset>
<legend>Remover e-mail da lista de promoções</legend>
<label>Nome: <input type="text" name="nome" class="nome" /></label>
<label>E-mail: <input type="text" name="mail" class="mail" /></label>
<p class="justifica">Porque deseja remover seu e-mail de nossa lista?</p>
<label><input type="radio" name="motivo" value="1" />Freq. alta</label>
<label><input type="radio" name="motivo" value="2" />N interessa</label>
<label><input type="radio" name="motivo" value="3" />Profissional</label>
<label id="motivo_3" class="esconde">Digite um outro e-mail para que possamos entrar em contato: <input type="text" name="n_profissional" /></label>
<label><input type="radio" name="motivo" value="4" />Pessoal</label>
<label id="motivo_4" class="esconde">Digite um outro e-mail para que possamos entrar em contato: <input type="text" name="n_pessoal" /></label>
<label><input type="radio" name="motivo" value="5" />Estou desativando este e-mail</label>
<label id="motivo_5" class="esconde">Digite um outro e-mail para que possamos manter contato: <input type="text" name="n_desativado" /></label>
<label><input type="radio" name="motivo" value="6" />Outros</label>
<label id="motivo_6" class="esconde">Especifique: <input type="text" name="outros" /></label>
<input type="submit" value="Remover E-mail" />
</fieldset>
</form>css obrigatório
label { display: block;}
.esconde { display: none;}
js
window.onload = function(){
var todosInput = document.getElementById('remove_email').getElementsByTagName('input');
for(i = 0; i < todosInput.length; i++)
if(todosInput.item(i).getAttribute('type') == 'radio') {
todosInput.item(i).onclick = function(){
for(j = 0; j < todosInput.length; j++)
if(todosInput.item(j).parentNode.getAttribute('class') == 'esconde')
todosInput.item(j).parentNode.style.display = 'none';
document.getElementById('motivo_' + this.getAttribute('value')).style.display = 'block';
};
}
}espero que ajude
Pessoal, voltei. Desculpe se for errado repostar aqui. (não acho que seja ^^) Resolvi refazer todo o formulário, como o Evandro falou. (fui na cara-de-pau e copiei o código, estudando-o, claro) Ficou muito bom, apesar de eu nao ter colocado CSS ainda, mas no IE (óbvio) o JS funciona pela metade. Os input do tipo texto são mostrados qdo eu clico no radio, mas não somem quando clico em outro. A Versão do IE é a 8 e nos outros browsers daki (FF e Chrome, atualizados) funciona perfeitamente. Fica aí meu pedido de ajuda, depois de um tempinho No aguardo o/ (desculpem pela formatação horrível, o menu do editor não está funcionando comigo)
window.onload = function(){
var todosInput = document.getElementById('remove_email').getElementsByTagName('input');
for(i = 0; i < todosInput.length; i++)
if(todosInput.item(i).getAttribute('type') == 'radio') {
todosInput.item(i).onclick = function(){
for(j = 0; j < todosInput.length; j++)
if(todosInput.item(j).parentNode.getAttribute('class') == 'esconde')
todosInput.item(j).parentNode.style.display = 'none';
if(document.getElementById('motivo_' + this.value))
document.getElementById('motivo_' + this.value).style.display = 'block';
};
}
}Evandro, o item() e getAttributes() funciona no Internet Explorer 6? Não estou recordado...
Em todo caso, se não funcionar, tenta assim:
window.onload = function(){
var todosInput = document.getElementById('remove_email').getElementsByTagName('input');
for(i = 0; i < todosInput.length; i++){
if(todosInput[i].type == 'radio'){
todosInput[i].onclick = function(){
for(j = 0; j < todosInput.length; j++){
if(todosInput[j].parentNode.className == 'esconde')
todosInput[j].parentNode.style.display = 'none';
document.getElementById('motivo_' + this.value).style.display = 'block';
}
};
}
}
}se você remover o IF antes da última linha, vai causar um erro nos IE dizendo que o objeto não foi encontrado (isso pq os primeiros objetos motivo_x não existem) e dependendo da configuração, podem parar de executar o script, que eu acho que foi o que aconteceu no caso dele.
o IF adicionado deve ser mantido
a parte do getAttr, não cheguei a consultar compatibilidade, sempre funcionou até onde eu sei =x
Não cheguei a perceber esse erro do "objeto não encontrado" no IE.
Logo mais acesso a máquina onde trabalho e faço as modificações
(bolas, nunca consigo editar meus posts...)
Evandro, a sua função (a nova, com o if a mais) não funcionou novamente. Os elementos aparecem mas não somem quando clico em qualquer outro elemento (só no IE isso, FF e Chrome, não)
/applications/core/interface/imageproxy/imageproxy.php?img=http://img39.imageshack.us/img39/1384/86031052.jpg&key=36e527489783b5a06901a3fe0be473314953b7fc6c3eecd0fcf0e120dc3db3fd" alt="Imagem Postada" />
Thiago, a sua função não esconde o input quando clica em um radio que nao tenha input dentro
Consegui resolver meu problema, com jQuery denovo (^^').
Usei o seguinte código:
[/size]
[size="2"]
$(document).ready(function(){
$('input[type=radio]').click(function(){
$('.mostra').removeClass('mostra').addClass('esconde');
});
$('.esconde').prev().children().click(function(){
$(this).parent().next().addClass('mostra');
});Qualquer sugestão, estou aqui =]
pra você ver como não estamos mentindo =P
http://www.4shared.com/file/233516038/2844a9c6/Untitled.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css" media="all"> </style>
</head>
<body>
<form action="" method="post" id="remove_email">
<fieldset>
<legend>Remover e-mail da lista de promoções</legend>
<label>Nome: <input type="text" name="nome" class="nome" /></label>
<label>E-mail: <input type="text" name="mail" class="mail" /></label>
<p class="justifica">Porque deseja remover seu e-mail de nossa lista?</p>
<label><input type="radio" name="motivo" value="1" />Freq. alta</label>
<label><input type="radio" name="motivo" value="2" />N interessa</label>
<label><input type="radio" name="motivo" value="3" />Profissional</label>
<label id="motivo_3" class="esconde">Digite um outro e-mail para que possamos entrar em contato: <input type="text" name="n_profissional" /></label>
<label><input type="radio" name="motivo" value="4" />Pessoal</label>
<label id="motivo_4" class="esconde">Digite um outro e-mail para que possamos entrar em contato: <input type="text" name="n_pessoal" /></label>
<label><input type="radio" name="motivo" value="5" />Estou desativando este e-mail</label>
<label id="motivo_5" class="esconde">Digite um outro e-mail para que possamos manter contato: <input type="text" name="n_desativado" /></label>
<label><input type="radio" name="motivo" value="6" />Outros</label>
<label id="motivo_6" class="esconde">Especifique: <input type="text" name="outros" /></label>
<input type="submit" value="Remover E-mail" />
</fieldset>
</form>
<script type="text/javascript">
window.onload = function(){
var todosInput = document.getElementById('remove_email').getElementsByTagName('input');
for(i = 0; i < todosInput.length; i++)
if(todosInput.item(i).getAttribute('type') == 'radio') {
todosInput.item(i).onclick = function(){
for(j = 0; j < todosInput.length; j++)
if(todosInput.item(j).parentNode.className == 'esconde')
todosInput.item(j).parentNode.style.display = 'none';
if(document.getElementById('motivo_' + this.value))
document.getElementById('motivo_' + this.value).style.display = 'block';
}
}
}
</script>
</body>
</html>fiz apenas a modificação sugerida pelo Thiago para adicionar compatibilidade com IE6 SÓ!
$(document).ready(function(){
$('input[type=radio]').click(function(){
$('.mostra').hide();
$('#motivo_'+$(this).val()).show();
});
}Tá bom, eu acredito em vocês (xP)
Obrigado pela ajuda pessoal.
Dúvida Sanada ;)
hehehehhe
Em fim... Vou marcar como [Resolvido]. Finalmente. :P
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
poste imagem do que está diferente para que possamos ajudar
a unica coisa que notei foram tamanhos, se for isso o diferente altere a propriedade width
abraço