Ir para conteúdo

POWERED BY:

Arquivado

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

manoaj

mostarr e esconder

Por , em Javascript

Recommended Posts

manoaj    12

manoaj
Postado

Bom pessoal acho que minha dúvida deve ser simples, mas como não tenho muito conhecimento em java não to sabendo faser o que to querendo aqui , é o seguinte o twitter tem uma caixa de texto que serve para os usuarios fazerem as postagens e nessa caixa de texto tem um efeito que eu queria usar em uma caixa de texto também que faz a função de .

exibir os botoes abaixo da caixa quando o usuario clica dentro dela e fazer os botoes desaparecerem quando usuario clica em qualquer outro ugar que não seja a caixa .

 

resumindo

ao clicar na caixa a div aparece ao clicar em qualquer outro lugar a div desaparece

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fernando Neto MH    13

Fernando Neto MH
Postado

Cara faz assim, diz se deu certo

:thumbsup: 

<!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>Untitled Document</title>
</head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>

$(document).ready(function(){    

    $('textarea').click(function(){ //QUANDO CLICAR NA TEXTAREA
	 $("div#botoes").fadeToggle("slow", "linear"); //EXIBE OS BOTOES			 
 });

});


</script>

<body>
<label for="textarea"></label>
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
<div id="botoes" style="display:none;">
Aqui meus botoes
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

manoaj    12

manoaj
Postado
  Em 15/12/2012 at 14:32, Fernando Neto MH disse:

Cara faz assim, diz se deu certo

:thumbsup:/> 

<!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>Untitled Document</title>
</head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>

$(document).ready(function(){    

    $('textarea').click(function(){ //QUANDO CLICAR NA TEXTAREA
	 $("div#botoes").fadeToggle("slow", "linear"); //EXIBE OS BOTOES			 
 });

});


</script>

<body>
<label for="textarea"></label>
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
<div id="botoes" style="display:none;">
Aqui meus botoes
</div>
</body>
</html>

mano ele aparece quando eu clico dentro da caixa mas não desaparece quando clico fora dela,

 

eu tenho que clicar dentro da caixa denovo pra desaparecer :ermm:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fernando Neto MH    13

Fernando Neto MH
Postado

Cara... testa agora :grin:/> 

<!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>Untitled Document</title>
</head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>//<![CDATA[ 

$(document).ready(function(){    

    $('textarea').click(function(){ //QUANDO CLICAR NA TEXTAREA
	 $("div#botoes").fadeIn();
 });
 $('textarea').blur(function(){
	$('div#botoes').fadeOut();
 })
});
//]]>  

</script>

<body>

<label for="textarea"></label>
<textarea name="textarea" id="textarea" cols="45" rows="5" onClickOutsideElement></textarea>
<div id="botoes" style="display:none;">
Aqui meus botoes
</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

manoaj    12

manoaj
Postado
  Em 15/12/2012 at 15:05, Fernando Neto MH disse:

Cara... testa agora :grin:/>/> 

<!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>Untitled Document</title>
</head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>//<![CDATA[ 

$(document).ready(function(){    

    $('textarea').click(function(){ //QUANDO CLICAR NA TEXTAREA
	 $("div#botoes").fadeIn();
 });
 $('textarea').blur(function(){
	$('div#botoes').fadeOut();
 })
});
//]]>  

</script>

<body>

<label for="textarea"></label>
<textarea name="textarea" id="textarea" cols="45" rows="5" onClickOutsideElement></textarea>
<div id="botoes" style="display:none;">
Aqui meus botoes
</div>

</body>
</html>

deu certo , agora vo ter que pensar em um jeito dele não sumir quando eu clicar nos botões kkkkkkk :D :clap: ta funcionando clico em em outro lugar e some :D e com efeito de slide ainda :D brinca rapa tu é fera

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bergs    53

Bergs
Postado

o exemplo nativo.

var textArea = document.getElementById("textarea")​​​;  
textArea.onfocus = function(){     
document.getElementById("botoes").style.display = "block"; 
}      
textArea.onblur = function(){     
document.getElementById("botoes").style.display = "none"; 
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

manoaj    12

manoaj
Postado
  Em 15/12/2012 at 15:26, Bergs disse:

o exemplo nativo.

var textArea = document.getElementById("textarea")​​​;  
textArea.onfocus = function(){     
document.getElementById("botoes").style.display = "block"; 
}      
textArea.onblur = function(){     
document.getElementById("botoes").style.display = "none"; 
}

Bergs como eu implemento isso no codigo coloquei aqui num funfo não kkk

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bergs    53

Bergs
Postado
  Em 15/12/2012 at 15:30, manoaj disse:

Bergs como eu implemento isso no codigo coloquei aqui num funfo não kkk

 

É javascript puro cara. :grin: :grin:

 

window.onload = function (){

   jogue o codigo aqui...

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

manoaj    12

manoaj
Postado
  Em 15/12/2012 at 15:47, Bergs disse:

É javascript puro cara. :grin:/> :grin:/>

 

window.onload = function (){

   jogue o codigo aqui...

}

funciono não manow

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bergs    53

Bergs
Postado
  Em 15/12/2012 at 15:59, manoaj disse:

funciono não manow

 

developer Tool no crhome ou firebug no firefox. ve aí onde você tá errando. :grin: :grin: :grin:

Compartilhar este post

Link para o post
Compartilhar em outros sites

manoaj    12

manoaj
Postado
  Em 15/12/2012 at 16:02, Bergs disse:

developer Tool no crhome ou firebug no firefox. ve aí onde você tá errando. :grin:/> :grin:/> :grin:/>

cara ta apontando essa linha var textArea = document.getElementById("textarea")​​​; e dizendo

syntax error illegal character

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