Ir para conteúdo

POWERED BY:

Arquivado

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

jnejunior

janelinhas tipo a do iMasters

Por , em Javascript

Recommended Posts

jnejunior    1

jnejunior
Postado

olá, consegui parte do efeito que preciso, tipo quando o usuário clicar no botão enviar, se tudo estiver correto, aparece uma janela com efeito de aparecer com a frase +- assim: Mensagem enviada... e depois de um tempo uns 20 segundos some automaticamente, mas se houver algum erro no preenchimento do formulário aparece com o mesmo efeito a janela dizendo quais campos estão incorretos e some também com o mesmo tempo da outra suposição...

 

será que alguém pode me ajudar?

 

consegui fazer assim:

quando você envia o form se tudo tiver ok ele mostra a janela com a mensagem de êxito, mas não com o efeito que eu preciso, e também para ela sumir, tem que clicar no X de fechar...

 

meu script:

 

 

 

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Mensagens de avisos</title>

	<style type="text/css">
		#aviso {background: #6f0; left: 0; margin: 0 auto; position: fixed; right: 0; text-align: center; top: 3px; width: 200px;}
		#aviso a {color: #333; cursor: pointer; font-family: Arial; position: absolute; right: 5px; text-decoration: none;}
	</style>
	<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
		<?php
			if(isset($_POST['ok'])){
				echo '<div id="aviso">
						<a href="#" id="btn1" title="Fechar Aviso">X</a>
						<h1>Alerta:</h1>';
				if(empty($_POST['nome'])){
					$msg = 'Preencha o campo nome!!!';
				} elseif(empty($_POST['email'])){
					$msg = 'Preencha o campo email';;
				} else {
					$msg = 'Seus dados foram enviados com sucesso!';
				}
				echo $msg;
			}
		?>
	</div>
	<script type="text/javascript">
		$("#btn1").click(function(){
			$("#aviso").fadeOut(450);
		});
	</script>
	<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

Assim que a mensagem aparecer, dispare um setTimeout, para executar a rotina que vai 'fechar' a imagem, depois dos 'x segundos'.

 

não sei qual é o 'efeito que você precisa'.

Compartilhar este post

Link para o post
Compartilhar em outros sites

jnejunior    1

jnejunior
Postado

Assim que a mensagem aparecer, dispare um setTimeout, para executar a rotina que vai 'fechar' a imagem, depois dos 'x segundos'.

 

não sei qual é o 'efeito que você precisa'.

 

fadeIn - fadeOut

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

cara, essa forma que você está fazendo, está muito 'porca'/'feia'.

 

para fazer um fadeIn, você precisa que o elemento não 'exista visualmente'.

#aviso { display: none; }

 

e então, qndo o submit for realizado, ele aparece:

				echo $msg;
			echo '<script type="text/javascript">
					$(document).ready(function(){
						$("#aviso").fadeIn(450);
					});
				</script>';

Compartilhar este post

Link para o post
Compartilhar em outros sites

jnejunior    1

jnejunior
Postado

mas, eu não preciso que ele somente apareça, preciso que ele suma fade-out apos uns segundos...

 

e se hover erro tambem mesmo processo, aparece informando quais campos estão incorretos, e desapareçe apos uns segundos..

 

e eu não manjo de JS.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Te dei as dicas cara, não vou fazer para você.

 

para fazer sumir, dispare o setTimeout.

Compartilhar este post

Link para o post
Compartilhar em outros sites

jnejunior    1

jnejunior
Postado

consegui, será que ta certo ou tem como melhorar?

 

<script type="text/javascript">
		$(document).ready(function(){
			$("#aviso").fadeIn(450);
			setTimeout(function(){
				$("#aviso").fadeOut(450);
			},9000);

		});
	</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

pesquise mais.. não é 'apenas isso'.

 

exemplo didático

<script type="text/javascript">
window.setTimeout( oi, 1000 );
function oi(){ alert('Oi!'); }
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

jnejunior    1

jnejunior
Postado

pesquise mais.. não é 'apenas isso'.

 

exemplo didático

<script type="text/javascript">
window.setTimeout( oi, 1000 );
function oi(){ alert('Oi!'); }
</script>

 

mas já esta como eu preciso, coloquei até um X para caso o usuário queira fechar a janela antes...

 

veja:

<script type="text/javascript">
		$(document).ready(function(){
			$("#btn1").click(function(){
				$("#aviso").fadeOut(450);
			});
			$("#aviso").fadeIn(450);
			window.setTimeout(function(){
				$("#aviso").fadeOut(450);
			},5000);				
		});
	</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

respondi antes de você ter editado.

 

[Resolvido] ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

jnejunior    1

jnejunior
Postado

respondi antes de você ter editado.

 

[Resolvido] ?

 

você que manja de JS, eu preciso saber o que esta errado ou faltando...

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