Lib Jquery

[felipesagan]

Olá estou tentando fazer um site para uma amiga,acontece que li um tutorial de css e outro de html.O problema é que terei pouco tempo pra fazer o site pra ela,então não vou conseguir ler com calma o tutorial de javascript e principalmente da parte do Jquery.

Consegui editar alguns códigos em jquery,mas fiquei muito limitado.Por enquanto é só pra quebrar o galho.Me corrijam nos termos que eu utilizar,pois ainda sou leigo.Vou postar os códigos que usei,e infelizmente nessa etapa vocês só me ajudariam me dando um código pronto,pois termos técnicos ainda não conheço.

----Mouse In,Mouse Out----

No meu site optei por deixar o viewport todo ocupado com a imagem do background quando o usuario coloca o mouse fora do viewport e caso ele volte o mouse para o viewport os menus voltem..Isso consegui fazer editando um código da internet em jquery e mudando o zindex.

----Mousemove,mousestop----

Outra função que consegui fazer foi fazer com que a imagem de fundo ocupe o viewport todo quando o usuário deixa de mexer o mouse por um tempo,e no momento que ele volta a mexer o site volta ao normal com os menus.

----Erro---

O erro aconteceu quando eu fui tentar as duas funções,pois uma conflita com a outra em termos de lógica.

----Como o site deveria funcionar?---

Hipótese 1 ,sequencia:

1)Se eu carregar o site com o mouse fora do viewport o site deve apresentar os menus normalmente,e depois de um tempo de inatividade do mouse a imagem de fundo ocupa toda a tela.Caso o usuario mexa no mouse fora do viewport nada acontece(i.e continua sem os menus aparecendo)

1.1)Caso o usuario coloque o mouse dentro do viewport os menus reaparecem e novamente a inatividade do mouse faz os menus sumirem.

1.2)Se o usuário colocar o mouse fora do viewport o background ocupa toda a tela,e mesmo que ele mexa o mouse na parte de fora do viewport nada acontece(i.e continua sem os menus aparecendo)

Hipotése 2,sequencia:

2)Se eu carregar o site com o mouse dentro do viewport,independente se o mouse está parado ou mexendo os menus aparecem normalmente,apenas depois de um tempo de inatividade do mouse é que os menus desaparecem.A partir daqui o funcionamento é o mesmo dos itens 1.1 e 1.2.

Obs:Quis dizer que o site sempre carrega normalmente independente do mouse estar dentro ou fora do viewport,a partir dai que a coisa muda de figura.Sei que deverei usar um contador,mas não faco ideia como.Lembrando que ao carregar o site,carregas-se primeiro o css do elemento supersized,que garante que o background inicie com os menus.Pois o supersized.css configura o zindex inicial do elemento 'supersized' como baixo perto dos outros elementos.

----Código Mouse In,Mouse out------------

<script type="text/javascript">
  var mouseX = 0;
  var mouseY = 0;
  var counter = 0;
var mouseIsIn = true;
function wireEvent() {
window.addEventListener("mouseout",
    function(e){
        mouseX = e.pageX;
        mouseY = e.pageY;
    	if ((mouseY >= 0 && mouseY <= window.innerHeight)
    	&& (mouseX >= 0 && mouseX <= window.innerWidth))
    		return;
        //do something for mouse out
    	
    	mouseIsIn = false;
    document.getElementById('supersized').style.zIndex=100000;  
    },
    false);
window.addEventListener("mouseover",
    function(e){
    	if(mouseIsIn)
    		return;
        //do something for mouse over
    	
    	mouseIsIn = true;
    	document.getElementById('supersized').style.zIndex=-999;
	},
    false);}
</script> 

------Código mousemove,mousestop------------

<script type="text/javascript">
var stopMove = {
    event: null,
    interval: null,
    coords: { y: 0, x: 0},
    stopped: true,
    init: function(options) {
        var self = this;
        $(document).mousemove(function(e){
            self.event=e;
            if (self.coords.y == e.pageY && self.coords.x == e.pageX) {
                self.stopped = true;
                return;
            }
            self.stopped=false;
            self.coords.y = e.pageY;
            self.coords.x = e.pageX;
            
        });
        this.interval = setInterval(function(){
            return self.stopped ? options.stop(self.event) : options.move(self.event);
        }, options.duration);
        return this;
    },
    stop: function(){
        $(document).unbind("mousemove", this.event)
        clearInterval(this.interval);
    },
};

// function to pass
var onMove = function(event){
     document.getElementById('supersized').style.zIndex=-999;   
};

var onStop = function(event){
     document.getElementById('supersized').style.zIndex=100000;  
};
$(document).ready(function(){stopMove.init({
        move: onMove,
        stop: onStop,
        duration: 100
    });
    
});
</script>

A lógica da ordem dos eventos que estou fazendo está completamente errada,gostaria de saber se alguém poderia me ajudar.Caso esteja muito confuso explico de uma maneira mais visual através de imagens.Obrigado

No caso do mousestop/mousemove percebe-se que para que o usuário coloque o mouse fora do viewport ele precisará mover o mesmo.E a partir do momento que ele tira o mouse fora do viewport nada mais acontece,apenas permanece o ultimo estado que é o do mousemove.

Se estiver muito confuso,já sabem faço umas imagens explicativas,obrigado!

----OBS:Um problema que está acontecendo é que o mousestop só funciona quando clicamos com o mouse----

Editado Agosto 5, 2014 por felipesagan

[felipesagan]

-------------Tópico Resolvido--------------------

Acho que consegui,mesmo sem saber javascript.Os arquivos necessários(jquery.1.10.2.min.js e mousestop.js) estão nesse link:https://codeload.github.com/websanova/mousestop/zip/master

Lembrando que o plugin mousestop.js é muito bom e pode-se usar várias funções em cada evento,No meu caso resolvi mudar o z-index do meu background.No lugar de document.getElementById('supersized').style.zIndex=xxxxx; você pode colocar qualquer função!

Para os desavisados o que acontece é que quando eu tiro o mouse do viewport o background expande-se,quando mexe-se o mouse dentro do viewport o background volta ao normal ,e quando o mouse está parado dentro do viewport o background também expande-se..É possivel mudar o tempo de algo acontecer entre o mouse estar parado ou movendo,basta modificar no arquivo mousestop.js.

Ademais no meu código retirei a parte do mouseover,pois como eu havia dito no meu post-pergunta existia um erro de lógica e consegui identificar depois de uma semana .É possivel mudar o tempo de algo acontecer entre o mouse estar parado ou movendo,basta modificar no arquivo mousestop.js.

O que acontece é que mousemove e mousestop só é executado se acontecer mouseover.E configurar mouseover e mousestop e mousemove não faz sentido nenhum.Então para o meu caso só importava mousemove,mousestop e mouseout.Se eu escrever alguma abobóra me corrijam,mas aqui funcionou legal e achei interessante.Abraços.

------------------------Dentro da Tag Head--------------------

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

---------------------Dentro da Tag Body-----------------------

<script type="text/javascript" src="js/mousestop.js"></script>
<script type="text/javascript">
         
        $(window)
        .mousestop(function() { document.getElementById('supersized').style.zIndex=100000; })
        .mousemove(function() {document.getElementById('supersized').style.zIndex=-999; })
        .mouseout(function() { document.getElementById('supersized').style.zIndex=100000; });

        $('#window').mousestop().trigger('mousestop');
       

        
      </script>

Editado Agosto 8, 2014 por felipesagan