bug em meu script

guih_oliveira10 · Março 18, 2011

olá pessoal

venho aqui pedir a ajuda de vocês para um script que estou desenvolvendo, onde eu tenho link com o atributo name, e quando eu clico nesses links o jquery exibe uma DIV que contem a opacidade, e outra com o conteúdo, além de exibir um carregando.

para entenderem melhor olhem o script.

html:

<!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=utf-8" />
<title>Pato Faminto | Home</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/overlays.css" type="text/css" />
<script type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript" src="js/cookie.js"></script>
<script type="text/javascript" src="js/eventos.js"></script>
</head>

<body>

<div id="opacidade">
<img src="imagens/load.gif" />
</div><!--opacidade-->

<div id="overlay_email" class="overlays"></div><!--overlay_email-->
<div id="overlay_login" class="overlays"></div><!--overlay_login-->
<div id="overlay_cadastro" class="overlays"></div><!--overlay_cadastro-->
<div id="overlay_lembrar" class="overlays"></div><!--overlay_cadastro-->


<div id="links-topo">
<a href="membros/login.php" name="login"><b>Login</b></a>
<span><b> |</b></span>
<a href="membros/cadastro.php" name="cadastrar"><b>Cadastro</b></a>
<span><b> |</b></span>
<a href="membros/lembrar_senha.php" name="lembrar"><b>Lembrar senha</b></a>
</div><!--links-topo-->
</body>
</html>

o eventos.js:

// Documento JavaScript Pato Faminto
// Eventos

$(document).ready(function(){

// Exibir Box Email
if($.cookie('ofertasEmail') != 1){

	setTimeout(function(){

		if($("#overlay_login").css('display') == 'none' && $("#overlay_cadastro").css('display') == 'none' && $("#overlay_lembrar").css('display') == 'none'){

			$("#opacidade").fadeIn('slow');
			$("#overlay_email").load('overlay_email.html');

			$("#overlay_email").ajaxStop(function(){

				$(this).fadeIn('slow');
				$.cookie('ofertasEmail',1,{expires: 7});

			});

		}
		return false;

	},8000);

}

// Exibir Box Login    
$("a[name=login]").click(function(){

	if($("#overlay_email").css('display') == 'none' && $("#overlay_cadastro").css('display') == 'none' && $("#overlay_lembrar").css('display') == 'none'){

		$("#opacidade").fadeIn('slow');
		$("#overlay_login").load('overlay_login.php');

		$("#overlay_login").ajaxStop(function(){

			$(this).fadeIn('slow');

		});

	}
	return false;

});

// Exibir Box Cadastro    
$("a[name=cadastrar]").click(function(){

	if($("#overlay_email").css('display') == 'none' && $("#overlay_login").css('display') == 'none' && $("#overlay_lembrar").css('display') == 'none'){

		$("#opacidade").fadeIn('slow');
		$("#overlay_cadastro").load('overlay_cadastro.html');

		$("#overlay_cadastro").ajaxStop(function(){

			$(this).fadeIn('slow');

		});

	}
	return false;

});

// Exibir Box Lembrar senha    
$("a[name=lembrar]").click(function(){

	if($("#overlay_email").css('display') == 'none' && $("#overlay_login").css('display') == 'none' && $("#overlay_cadastro").css('display') == 'none'){

		$("#opacidade").fadeIn('slow');
		$("#overlay_lembrar").load('overlay_lembrar.html');

		$("#overlay_lembrar").ajaxStop(function(){

			$(this).fadeIn('slow');

		});

	}
	return false;

});

// Ocultar Box Email    
$("#overlay_email a").live('click',function(){

	$("#opacidade").fadeOut('slow');
	$("#overlay_email").fadeOut('slow');
	$("#overlay_email").hide();
	return false;

});

// Ocultar Box Login    
$("#overlay_login a").live('click',function(){

	$("#opacidade").fadeOut('slow');
	$("#overlay_login").fadeOut('slow');
	$("#overlay_login").hide();
	return false;

});

// Ocultar Box Cadastro    
$("#overlay_cadastro a").live('click',function(){

	$("#opacidade").fadeOut('slow');
	$("#overlay_cadastro").fadeOut('slow');
	$("#overlay_cadastro").hide();
	return false;

});

// Ocultar Box Lembrar senha    
$("#overlay_lembrar a").live('click',function(){

	$("#opacidade").fadeOut('slow');
	$("#overlay_lembrar").fadeOut('slow');
	$("#overlay_lembrar").css('display','none');
	return false;

});

// Define a div Opacidade com altura máxina;    
var height = $("body").css('height');
$("#opacidade").css('height',height);

});

o overlay.css

/* CSS OVERLAY */

.overlays{
width:600px;
height:430px;
display:none;
background:#FFF;
border:1px solid #CCC;
position:absolute;
left:50%;
top:50%;
margin:-215px 0 0 -300px;
z-index:3;

}
.overlays a{
position:relative;
top:-8px;
left:590px;
text-decoration:none;
}
#opacidade{
width:100%;
display:none;
background:#000;
opacity:0.8;
-webkit-opacity:0.8;
-moz-opacity:0.8;
position:absolute;
z-index:2;
}
#opacidade img{
position:absolute;
top:18%;
left:50%;
margin:-8px 0 0 -8px;
}

aqui vai um dos arquivos que são carregados quando clico, todos são iguais so muda o texto (overlay_email.html):

<a href="javascript:;">
<img src="imagens/close_overlay.png" />
</a>
<span>Aqui virá o codigo para cadastrar email de ofertas!</span>

o problema é so seguinte: quando eu clico em algum desses link pela primeira vez, exibe normal, quando eu fecho também fecha normal, agora quando eu clico em qualquer link pela segunda vez, ele exibe a DIV que ele tem que exibir, mais a DIV anterior que tinha sido fechada também é exibida causando um bug no meu script.

acho que assim deu pra entender.

Dii · Março 19, 2011

Tente substituir os eventos click(); pelo método live('click',function);

Veja mais em -> http://api.jquery.com/live/

guih_oliveira10 · Março 20, 2011

ok amigo,

muito obrigado pela atenção

troquei os valores e continua do mesmo jeito

de qualquer forma muito obrigado.

Dii · Março 20, 2011

Ok, deixa eu ver se eu entendi. Você quer igual fazer aqueles formulários que tem 2 abas?

guih_oliveira10 · Março 21, 2011

não, é como se fosse um plugin lightbox do jquery, só que eu estou desenvolvendo o meu e ao invés de abrir imagens , carrego uma pagina dentro do box dinamicamente.

a div #opacidade trata de dar aquele efeito de deixar toda a página transparente e bem no meio tem uma div que contem o conteúdo que quero.

acho que agora deu pra entender kkk

Dii · Março 21, 2011

Sim, tipo uma janela modal. Pra não seria mais fácil você ver um Plugin em jQuery que já exista?

É mais simples.

guih_oliveira10 · Março 21, 2011

sim sim,

posso ate encontrar na net, mais mesmo assim, fica a duvida der porque o que eu desenvolvi não está funcionando.

Entrar

Arquivado

bug em meu script

Recommended Posts

guih_oliveira10 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dii 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

guih_oliveira10 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dii 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

guih_oliveira10 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dii 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

guih_oliveira10 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cruzamento de Bases

Consulta sem duplicação

Modelagem para questionário

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante