Ir para conteúdo

POWERED BY:

Arquivado

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

jnejunior

[Resolvido] melhorar o script

Por , em Javascript

Recommended Posts

jnejunior    1

jnejunior
Postado

ola pessoal...

 

não manjo de javascript, então fiz esse código para quando houver um erro no formulário a mensagem aparece com efeito fade permanece por 10 segundos e depois some, se tiver êxito aparece a mesma coisa com a mensagem de sucesso, e na janela também aparece um xis caso o usuário queira fechar a janela antes do tempo previsto...

 

gostaria de saber se o código esta legal, se pode ser melhorado para (crossbrowser)...

<!doctype html>
<html>
<head>
	<meta charset="iso-8959-1">
	<title>Mensagens de avisos</title>

	<style type="text/css">
		#aviso {
			background: #fc0;
			display:none;
			left: 0;
			font: 14px Helvetica;
			margin: 0 auto;
			padding: 5px;
			position: fixed;
			right: 0;
			text-align: center;
			top: 0;
			width: 300px;

			border-radius: 0 0 8px 8px;
			box-shadow: 0px 5px 2px #ddd;

		}

		#aviso a {
			background: #666;
			color: #fff;
			cursor: pointer;
			display: block;
			float: right;
			font: bold 12px Arial;
			padding: 0 3px 2px 3px;
			position: absolute;
			right: 1px;
			text-decoration: none;
			top: 1px;
		}
	</style>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function(){
			jQuery("#fechar").click(function(){
				jQuery("#aviso").fadeOut(450);
			});

			jQuery("#aviso").fadeIn(450);
			window.setTimeout(function(){
				jQuery("#aviso").fadeOut(450);
			},10000);
		});
	</script>
</head>
<body>
		<?php
			if(isset($_POST['ok'])){
				echo '
					<div id="aviso">
					<a href="#" id="fechar" title="Fechar Aviso">x</a>
					';
				if(empty($_POST['nome'])){
					$msg = 'Preencha o campo nome!!!';
				} elseif(empty($_POST['email'])){
					$msg = 'Informe um email válido!<br />Exemplo: seunome@provedor.com.br';;
				} else {
					$msg = 'Seus dados foram enviados com sucesso!';
				}
				echo $msg;
			}
		?>
	</div>
	<div id="form">
		<form method="post" action="">
			<label>
				Nome:
				<input type="text" name="nome" />
			</label><br />
			<label>
				Email:
				<input type="text" name="email" />
			</label>
			<input type="submit" name="ok" value="Enviar" />
		</form>
	</div>

	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br />

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Faça essa verificação com javascript, assim o cliente não precisa esperar o reload da página para ver o erro.

 

deixe para o php, verificações mais complexas.

 

 

não vejo nenhum sentido em usar doctype HTML5, se essa linguagem ainda nem está pronta.

E se você não pode nem usar os recursos dela.

Compartilhar este post

Link para o post
Compartilhar em outros sites

jnejunior    1

jnejunior
Postado

foca só no javascript, a minha dúvida é quanto a ele, quanto o resto já estou ciente...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

meus comentários sobre o javascript são:

 

=> você não precisava de uma tag <a> para o fechamento.

e já que está usando, deveria cancelar a ação default dela, pois o href="#", faz a tua página subir, ne?!

 

=> tem um grave problema de performance, você chama 3 vezes o seletor jQuery para achar o elemento #aviso. (lento)

 

=> você atrela eventos aos elementos mesmo que eles não existam no DOM.

 

não tem oque falar sobre 'crossbrowser', jQuery por si só resolve diversos problemas de compatibilidade, e o teu script está ridicularmente simples, não creio que você deva ter problemas entre navegadores com apenas isso.

 

=> o <br /> entre os labels está completamente fora de semântica.

Compartilhar este post

Link para o post
Compartilhar em outros sites

jnejunior    1

jnejunior
Postado

poxa Willian, venho aqui pedir ajuda, e você esculaxa?

 

eu sei que tu manja de JS, mas eu não tanto quanto gostaria.

 

sobre o que você escreveu eu só ententi blablablablablablablab#$%¨&*&¨%$#@...

 

e quanto ao br só usei para quebrar mesmo pois é só um teste que estou fazendo a parte, para posteriormente aplicar em meu site, se você puder me ajudar, ou dar referencias de como fazer (videos, tutoriais, etc), eu agradeço.

 

diga-se de passagem, sou teu fã entro no teu site todo dia...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

poxa Willian, venho aqui pedir ajuda, e você esculaxa?

ow jne, desculpa cara.. a intenção não foi exculaxar não. Longe disso.

 

Você pediu para eu falar, eu disse.

Letras na internet não possuem tom, por isso fica complicado expressar opiniões, sem que estas pareçam grosseiras.

 

Não quis agredir, sério mesmo.

Sei lá, releia oque eu disse, apenas levantei os pontos mesmo.

 

O script está simples, não tem 'oque deixar mais crossbrowser' nele.

O teu script 'melhorado', com as minhas sugestões fica assim:

	<script type="text/javascript">
	jQuery(document).ready(function(){
		var aviso = jQuery('#aviso');
		if( aviso.html() )
		{
			jQuery("#fechar").click(function( e ){
				e.preventDefault();
				aviso.fadeOut( 450 );
			});
			aviso.fadeIn( 450 );
			window.setTimeout(function(){
					aviso.fadeOut( 450 );
				},10000);
		}
	});
</script>

se não entender algum ponto pergunte.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

sobre o que você escreveu eu só ententi blablablablablablablab#$%¨&*&¨%$#@...

mas agora, você entendeu as modificações que fiz ?

 

a última sugestão que ainda continua, é fazer essa verificação no js, não precisa de php da forma que você fez.

ai fica show.

Compartilhar este post

Link para o post
Compartilhar em outros sites

jnejunior    1

jnejunior
Postado

valeu Willian entendi sim, e quanto a validação também, obrigado de novo... sucesso pra você...

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