[jquery/js] Esconder div on_mouse_leave

[I-NOZex]

Eu tenho um  sistema de autosuggestion search http://www.9lessons.info/2009/06/autosuggestion-with-jquery-ajax-and-php.html desse site, e apos o cursor sair da div de resultados, queria, se possivel com um delay de 2 segundos ( +- ), que apos o cursor sair dela, ela se oculta-se...

Nao sei se me fiz entender bem, mas alquem sabe mais ou menos o codigo a usar?

Ja testei alguns jquery's, mas dame erro, diz que nao é uma funçao (js ainda vou orientando, agora jquery é que ando a nadar as vezes)...

Aguardo quem me possa ajudar, cumprimentos 😄

[brunoais]

Usa o event javascript: mouseout

Usa o setTimeout().

Usa o preventDefaut(). (se calhar tb o stopPropagation()...)

[I-NOZex]

Obrigado pela tua resposta, mas podes me mostrar um exemplo de como usar esse codigo? 😄

(EDIT: o onmouseout nao serve, pois a div tem conteudo... tera de ser on mouseleave, mas quando uso isso, diz que nao é uma funçao (isto definido em jquery))

[brunoais]

Eh... Se vir o código q tens agora ((x)HTML) já consigo algo. Assim do 0 é mais difícil de pensar em algo que n vá falhar.

mouseleave? O que é isso?

Eu n uso o jQuery para este tipo de coisas, por isso, n me lembro como é que ele atua perante isto.

[I-NOZex]

tens razao, my bad  ?

<script type="text/javascript" SRC="js/jquery.min.js"></script>
<script type="text/javascript" src="jquery.idTabs.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

/*$('#display').mouseleave(function()
{
   $('#display').hide('slow').delay(5500);
}

); */

$(document).ready(function(){


/*var MailTimeout;

function hideMailDropdown() {
  $("#display").hide();
  clearTimeout(MailTimeout);
}

          $("#display").mouseleave(function(){
    var MailTimeout=setTimeout("hideMailDropdown()",500); /* Wait half a second before hiding */
  /*});*/

$(".bar").keyup(function()
{
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;

if(searchbox=='')
{
}
else
{

$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{

$("#display").html(html).show();
        /*$(".display_box").mouseout(function(){
            $(".display_box").hide(5000);
        });*/



}




});
}return false;


});
});

/*jQuery(function($){
   $("#searchbox").Watermark("Search");
   });*/
</script>

podes ver em acção aqui http://beat2revolution.cixx6.com/index.php, procurando algo na caixa de pesquisa (a letra A por exmplo) e depois a div que qero ocultar é a que aparece com os resultados...

Obrigado, e desculpa por algo (:

[I-NOZex]

deixo aqui agora os ficheiros necessarios, penso eu, para que me possam tentar solucionar o problema, muito agradecido:

http://www19.zippyshare.com/v/39855447/file.html

virustotal scan

https://www.virustotal.com/file/5eb1c71669268d7a690ffa6a7507c0abbe4c03bad6a2037ff824bf9dd7816684/analysis/1335314038/

[brunoais]

(desculpa o atraso na resposta)

Indenta esse código como deve ser, sff. Eu tenho problemas em detetar os scopes com uma indentação dessas.

[I-NOZex]

Na descontra

Que qeres referir com identar? :s

[brunoais]

http://pt.wikipedia.org/wiki/Indentação

[I-NOZex]

pronto era o que tinha em mente... mas nao tou a ver como posso fazer mais ident no jquery... é so isso que é preciso ser alterado...

[brunoais]

Por exemplo:

http://jsbeautifier.org/

[I-NOZex]

grande ferramenta, obrigado 😄

e obrigado pela tua disponibilidade e ajuda, aqui fica o codigo, desta vez mais "bonito"

http://pastebin.com/2sdz5nui

[brunoais]

Pucha.....!!!

Ainda n consigo ler aquilo bem!

1º - Apaga todo o código que está comentado e deixa lá todo o código que está a executar.

2º - Mostra o código que o browser recebe. Não estou interessado no código php. Eu quero saber o que é que o browser vê.

[I-NOZex]

ve se agora consegues... só codigo de cliente

http://pastebin.com/QaM5swgq

[brunoais]

O q tu precisas é de isto:

	$(".bar").focusout(function () {
		setTimeout( function(){
				$('#display').hide('slow');
			}
			, 3000
		)
	});

Substitui isso com o q tens na parte do focusout.

[I-NOZex]

obrigado novamente, mas, nao ha forma sem o utilizador ter de clicar? assim como é feito para os menus em jquery...

[brunoais]

Sempre podes tentar:

	var bar = $(".bar");
bar.click(function (){
		bar.focusout(function () {
			setTimeout( function(){
					$('#display').hide('slow');
				}
				, 3000
			)
		});
})

Ele n trabalha para alguns casos de uso mais rebuscados mas tb... Esse código como está n vai muito longe... 😄

[I-NOZex]

qual a diferença entre este e o anterior? :s

por agora serve... um dia quando tiver tempo e malta faço algo limpinho inteiramente de raiz

[I-NOZex]

http://ajaxdump.com/?A2k73WgE

isto é exactamente o que eu quero, so tenho de por é a funcionar com base de dados...

quando procuras algo, e o cursor sai de cima dos resultados, ele esconde.... é mesmo isto que preciso. vou tentar adaptar isto para a base de dados

[I-NOZex]

Consegui adaptar como deve ser esse ultimo codigo, para permitir acesso a base de dados.

Obrigada a mesma por tudo bruno 😄