Ir para conteúdo

POWERED BY:

Arquivado

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

hao

[Resolvido] Esconder div absoluta ao clicar fora da area

Por , em Javascript

Recommended Posts

hao    0

hao
Postado

Fala galera,

 

Queria saber o seguinte, tenho um botao que ao aciona-lo exibe uma div com alguns links, dai ao clicar fora da area dessa div escondesse ela, tentei de todas as formas, do tipo $('body').click(function () { $('#div').hide() }); mas não rolou. Existe outra maneira mais correta??

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

hao    0

hao
Postado

$().click(function () {

$('#div').hide();

});

 

testado no Firefox/3.0.9 e ie 7.

 

 

abraços

Hum, ainda não testei, mas se eu clicar na area do id #div tambem irá esconder, certo? Pois é exatamente isso que não quero que aconteça, tipo, quero que a area da div seja clicavel e o restante da página não.

 

Valeu!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel-DF    0

Daniel-DF
Postado

tenta isso:

<html>
<head>
<title>Timao campeao</title>
<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript">

$(document).ready(function() {
	$('#div').click(function () { return false; });
	$().click(function () { 
	$('#div').hide()
	});
	$('#div').click(function () { $("#conteudo").html('Eh nóis na fita! Não para Corinthians!'); });
});

</script>
</head>
<body>

<div id="div">menu</div>
<div id="conteudo">conteudo</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

hao    0

hao
Postado

Wow era isso mesmo! sabia que era algo com o return mas não sabia como! valeu daniel, e o coringão com certeza é campeão!

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

hao    0

hao
Postado

Opa, deu quase certo, bem o script que você passou funcionou legal, porém se eu tenho um formulário dentro da div, com o return false, não consigo enviar ele, teria alguma solução para isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel-DF    0

Daniel-DF
Postado

TESTADO!!!!!!!!!!!

<html>
<head>
<title>Timao campeao</title>
<style>
#div{
position:relative;
text-align: left;
padding: 10 10 10 10; 
border: 1px solid #CCCCCC; 
width:100%;  
height:60px;	
display:block;
}
#conteudo{
position:absolute;
top:180px;
font-size: 15px;
color: #000;
text-align: center; 
border: 1px solid #CCCCCC; 
width:100%;  
height:200px;	
display:block;	
}


</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function() {

$('#div').click(function () { return false; });<!-- desabilita a div do topo //-->

$('#div_links').click(function () { return true; });<!-- habilita a div dos links //-->
$().click(function () { $('#div').hide() });<!-- esconde a div do topo //-->
$('#a').click(function () { $("#conteudo").html('Eh nóis na fita! Não para Corinthians!'); });<!-- conteudo do link_2. obs: tem varias formas de chamar esse conteudo, aqui coloquei o mais simples //-->
$('#b').click(function () { $("#conteudo").html('Timão campeao!'); });<!-- conteudo do link_1. obs: tem varias formas de chamar esse conteudo, aqui coloquei o mais simples //-->

$("#form1").submit(function () { return false; });<!-- desabilita o submit tradicional //-->

[color="#FF0000"]$("#form1").submit( function() {<!-- habilita o submit jquery //-->
var valor =  $("#formulario").val();<!-- pega o valor do campo de texto //-->
alert(valor);<!-- alert com o valor do campo de texto //-->
});

$("#enviar").click( function() {<!-- habilita o botao de envio, pois nao funcionou com o click apenas com a funcao do submit //-->
var valor =  $("#formulario").val();<!-- pega o valor do campo de texto //-->
alert(valor);<!-- alert com o valor do campo de texto //-->
});[/color]

});


</script>
</head>
<body>
<div id="div">
<div id="div_links">
<a href="#" id="a">link_1</a>
<a href="#" id="b">link_2</a>
</div>
<br>
<form id="form1">
<input name="" id="formulario" type="text" value="" >
<input type="submit" name="Submit" value="Enviar" id="enviar">
</form>

</div>

<div id="conteudo">conteudo</div>

</body>
</html>

OBS: FAZ UNS TESTES E TENTA UNIR AS FUNÇÕES DO SUBMIT E DO CLICK DO FORMULÁRIO (VERMELHO)

OBS2: OS ALERTS SÃO APENAS PRA TESTAR O RETORNO DOS DADOS. MODIFIQUE ISSO DE ACORDO COM SUA NECESSIDADE. TO TESTANDO ESSA FUNÇÃO DE ENVIO AQUI:

 

$.post("recebe.php", {codigo:codigo},
   function(data){
   $("#id").val(data.id);
   $("#nome").val(data.name);
   $("#tempo").val(data.time);
   }, "json");
PHP:

<?

$codigo=$_POST['codigo'];

if($codigo==1){
echo json_encode(array("id"=>"123","name"=>"John","time"=>"2pm"));
}else if($codigo==2){
echo json_encode(array("id"=>"456","name"=>"Daniel","time"=>"7pm"));
}

?>

Abraços e bom trabalho.

Deus te abençoe

Compartilhar este post

Link para o post
Compartilhar em outros sites

hao    0

hao
Postado

Valeu Daniel, é isso mesmo, funcionou certinho!

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Otata    4

Otata
Postado

galera só para avisar se possivel usar as tags '['code']' '['/code']' para melhor visualização dos codigos..

 

 

t+

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