Pesquisar na Comunidade

Olá vou postar o link com download do plugin mousestop.js gostaria de saber se alguém consegue transformar a div teste default que no caso é a div #teste no viewport todo.Ou seja tudo que acontecia dentro da div teste irá acontecer dentro do viewport,as outras divs não me importam.Quando o usuário tirar o mouse do viewport,mouseout,se colocar dentro mouseover,se mexer no mouse, mousemove,se parar de mexer mousestop.Meu objetivo na verdade não é fazer aparecer mensagens na div output.Mas sim mudar o zindex do background.Meu objetivo na verdade é fazer a imagem de fundo ocupar o viewport todo quando o mouse fica parado ou quando sai do viewport.Mas o site sempre carrega normalmente,depois que muda-se o zindex dependendo do que acontece.Obrigado. Link :https://codeload.github.com/websanova/mousestop/zip/master

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----