[Resolvido] Checar eventos

[Denis Lins 0]

Fala galera, tudo legal?

 

Estou com um problema para checar se um evento esta acontecendo.

 

Como fazer isso?

 

Exemplo: Verificar se a div#teste esta com o mouse sobre ela.

 

Tem como fazer isto?

[Shwa 0]

nao sei

se tu nao puder mudar a sua logica e fazer o que precisa usando o evento mouseover, talvez dê pra fazer uma gambiarra legal aí: determine uma variavel pra carregar o status do mouse de acordo com o elemento, por exemplo

 

no onmouseover da #teste, determine isMouseOver = true;, no onmouseout determine isMouseOver = false;

 

nisso tu checa a variavel isMouseOver e fica sabendo se ela ta verdadeira ou nao

 

testa ae e posta o resultado

[Thiago Retondar 18]

Exemplo: Verificar se a div#teste esta com o mouse sobre ela.

document.getElementById('teste').onmouseover = function(){ alert('O cursor está cima da div'); };

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Denis Lins 0]

Olha cara, tenho quase certeza que isto nao vai funcionar.

 

Vou explicar melhor:

 

Tenho um menu dropdown, que abre onmouseover.

 

Quando cara tira o mouse do link que abre o menu, ele se fecha, mesmo quando o mouse ainda está sobre o menu.

 

Só consegui fechar o menu corretamente quando o mouse passa somente sobre a div do menu.

 

Código:

 

$('li.contato').mouseover(function()
	{
		$('#dropdown_contato').css({
			position: 'absolute',
			top: $(this).offset().top + 30,
			left: $(this).offset().left
		}).show('fast').mouseleave(function()
		{
			$(this).hide(111);
		});
	});

[Thiago Retondar 18]

Por que não faz com CSS?

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Denis Lins 0]

Porque o menu usa um plugin, lavalamp, nao sei se voce ja ouviu falar dele (http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/).

 

Eu tirei a parte dele para facilitar a compreensão.

 

Mas sinceramente, nao entendi a parte do fazer com css. Uma explicada seria útil, talvez seja mesmo possivel.

 

Mas enfim, vou postar aqui o código completo:

 

$('li.contato').mouseover(function()
	{
		$('.lavaLampWithImage').unbind();
		$('#dropdown_contato').css({
			position: 'absolute',
			top: $(this).offset().top + 30,
			left: $(this).offset().left
		}).show('fast').mouseleave(function()
		{
			$(".lavaLampWithImage").lavaLamp({
				fx: "backout",
				speed: 500
			});
			$(this).hide(111);
			event.stopPropagation();
		});
	});

O código do plugin:

 

OBS: Este plugin foi praticamente TODO editado por mim, para um melhor funcionamento do menu.

O original está no link que passei acima, mas nao creio que seja de importancia nenhuma.

 

(function($) {
$.fn.lavaLamp = function(o) {
    o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});
	
	if($('#dropdown_contato').is(':visible'))
	{
		$('#dropdown_contato').hide();
	}
	
    return this.each(function() {
        var me = $(this), noop = function(){},
            $li = $("li", this), curr = $("li#current", this)[0] || $("li", this).attr("id", "current")[0];
		
		if($("li.back", this).length == 1)
		{
            $back = $("li.back", this);
			move(curr);
		}
		else
		{
            $back = $('<li class="back"><div class="left"></div></li>').appendTo(me);
		}
		
        $li.not(".back").hover(function() {
            move(this);
        }, noop);

        $(this).hover(noop, function() {
            move(curr);
        });

        $li.click(function(e) {
            setCurr(this);
            return o.click.apply(this, [e, this]);
        });

        setCurr(curr);

        function setCurr(el) {
            $back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
            curr = el;
        };

        function move(el) {			
			if($('#dropdown_contato').is(':visible'))
			{
				$('#dropdown_contato').hide();
			}
			$back.each(function() {
                $(this).dequeue();
			}).animate({
                width: el.offsetWidth,
                left: el.offsetLeft
            }, o.speed, o.fx);
        };

    });
};
})(jQuery);

[Thiago Retondar 18]

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://forum.imasters.com.br/index.php?/topic/340960-menu-drop-down-fluido-3-niveis-imagens/

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Denis Lins 0]

@Thiago,

 

Desculpa minha ignorância, mesmo, não costumo ser assim kk

 

Mas sinceramente não entendi como implementar isto no meu código.

 

Teria como voce ou alguem alterar meu codigo so pra mim saber aonde eu devo mudar e o que mudar?

 

Desde já agradeço e aguardo.

[Thiago Retondar 18]

heheeheh Tranquilo... :P

 

Está decidido que irá fazer com CSS? Posso mover o tópico para a área correta, então?

 

Tenta esboçar algo aê e posta o HTML e CSS.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Denis Lins 0]

Olha ..

 

Eu sou programador, daqueles de fazer sistemas mesmo, usando css e html simplesmente para coisas básicas.

 

Mas comecei a trabalhar agora como web designer, e fui obrigado a aprender a montar layouts css com 1 semana ASUHAUSH

 

Mas até que foi tranquilo. Mas como não sou tãão experiente com css, não entendi como funciona o menu do link que voce me enviou, não entendi a lógica (programadores adoram logica kkk).

 

Mas entao, se alguem conseguisse me explicar o funcionamento, eu tenho quase certeza que ja conseguiria.

 

Quanto a mudanca do topico, deixo isso com voce. Como nao estou conseguindo fazer, qualquer area que resolva o meu problema pra mim ja esta bom :P

 

No mais, obrigado ai, espero uma ajuda xD

[Thiago Retondar 18]

Tópico movido:

 

JavaScript / DHTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Webstandards: CSS / XML / XHTML / HTML

 

Esse aqui é mais simples, talvez consiga entender http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://ogordo.com/menu-com-submenus/

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Denis Lins 0]

Opa! acho que entendi sim.

 

Quando passa o mouse no li ele abre o menu.

 

E o menu nao se fecha, porque ele está dentro do li, entao, o mouse ainda está sobre o li.

 

Vou fazer e posto aqui, seja para esclarecer dúvidas ou já pronto.

 

Valeu thiago! ;D

[Thiago Retondar 18]

Ok.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Denis Lins 0]

Só aproveitando o tópico, teria como ou nao verificar eventos?

 

Tipo:

 

if($('#teste').isMouseOver) { alert('mouseover'); }

[William Bruno 1501]

não.

Não tem como, 'verificar eventos', mas sim atrelar funções em um evento:

 

$('#teste').mouseover(function(){
  alert( 'MouseOver' );
});

[Denis Lins 0]

Ai galera, pra quem me ajudou, o resultado ta na mão:

 

http://www.treeti.com.br/tree/

 

Mais uma vez obrigado, vocês foram de grande ajuda :D

 

Ate mais galera! ;D