I have mousemove () and a keyup () handler in my jQuery, both do different things. The mousemove () handler will make sure that fading divs are turned on and off, and the keyup () handler will scroll through the window. This works fine in Safari, Opera, and Firefox, but strange things happen in Chrome. It looks like the mousemove () function runs on keyup (). I played and found that this only happens when the cursor is inside the window, i.e. Chrome interprets the scrolling of the window relative to the cursor as the mousemove () event. Is there any way to prevent this / make Chrome differentiation here?
For reference, here is the relevant part of jQuery:
// Where we are now var xpos = 0; var ypos = 0; // Actually get there var target = $( '.category' ).eq(ypos).find( '.cell' ).eq(xpos); $.scrollTo(target, 0); // Fade the navigation in and out var indur, outdur, outdelay; indur = 500; outdur = 500; outdelay = 1500; var fadeout; $( 'html' ).mousemove(function(e) { console.log("Mouse moved"); if (fadeout) { clearTimeout(fadeout); fadeout = 0; } // The text-based navigation $( '.tnav' ).fadeIn(indur); // The four arrows if(xpos > 0) $( '.navleft' ).fadeIn(indur); if(xpos < lengths[ypos]-1) $( '.navright' ).fadeIn(indur); if(ypos > 0) $( '.navup' ).fadeIn(indur); if(ypos < lengths.length-1) $( '.navdown' ).fadeIn(indur); fadeout = setTimeout(function() { $( '.tnav, .navleft, .navright, .navup, .navdown' ).fadeOut(outdur); }, outdelay); e.preventDefault(); }); // end of fading block // The fading function var fadeStep = function(trgt, spd, dir) { if(trgt.length) { switch(dir) { case "right": xpos++; break; case "left": xpos--; break; case "up": ypos--; break; case "down": ypos++; break; default: return; } $.scrollTo(trgt, spd, { onAfter: function() { // Make sure the right arrows are faded out immediately if(xpos == 0) { $( '.navleft' ).fadeOut(outdur); } if(xpos >= lengths[ypos]-1) { $( '.navright' ).fadeOut(outdur); } if(ypos == 0) { $( '.navup' ).fadeOut(outdur); } if(ypos >= lengths.length-1) { $( '.navdown' ).fadeOut(outdur); } } }); } // end if block }; // The scrolling - using arrow keys var speed = 300; $( document ).keyup(function(e) { switch(e.which) { case 39: if(xpos < lengths[ypos]) { target = $( '.category' ).eq(ypos).find( '.cell' ).eq(xpos+1); fadeStep(target, speed, 'right'); } break; case 37: if(xpos > 0) { target = $( '.category' ).eq(ypos).find( '.cell' ).eq(xpos-1); fadeStep(target, speed, 'left'); } break; case 38: if(ypos > 0) { target = $( '.category' ).eq(ypos-1).find( '.cell' ).eq(xpos); fadeStep(target, speed, 'up'); } break; case 40: if(ypos < lengths.length) { target = $( '.category' ).eq(ypos+1).find( '.cell' ).eq(xpos); fadeStep(target, speed, 'down'); } break; default: return; } e.preventDefault(); });
HTML:
<div class="nav"> <div class="tnav"> <h1>My awesome site</h1> <h2>email@whatever.com</h2> <ul class="menu"> <li><a href="" class="catb">Row 1</a></li> <li><a href="" class="catb">Row 2</a></li> <li><a href="" class="catb">Row 3</a></li> <li><a href="" class="catb">Row 4</a></li> <li><a href="" class="catb">Row 5</a></li> </ul> </div> <div class="navup"> </div> <div class="navleft"> </div> <div class="navright"> </div> <div class="navdown"> </div> </div>
.category and .cell are div classes, each category contains a row of cells, all cells are full-screen, and the window scrolls to the appropriate positions based on key events.
Hope this all makes sense. Thanks!