From 1497e77bacf5966ea3852c3ebc87c6d220521228 Mon Sep 17 00:00:00 2001
From: timb <timb@mb.home>
Date: Sat, 6 Feb 2010 18:24:21 -0800
Subject: fix hand

---
 static/js/home.js | 48 ++++++++++++++++++++++++++----------------------
 1 file changed, 26 insertions(+), 22 deletions(-)

(limited to 'static/js/home.js')

diff --git a/static/js/home.js b/static/js/home.js
index af4ee4b..58fc384 100755
--- a/static/js/home.js
+++ b/static/js/home.js
@@ -53,8 +53,7 @@ function initLoginForm() {
   $(pass).keypress(ifEnter(login));
   $(submit).click(login);
     
-  //disable this until i can figure out the bug on the front page...
-  //initBigHand(submit)
+  initBigHand(submit)
 }
 
 function initExpandableLoginForm() {
@@ -81,10 +80,12 @@ function initExpandableLoginForm() {
 }
 
 function initBigHand(id){
-  var cursor = "#cursor-big"
+  var cursorId = "#cursor-big"
+  var cursor = $(cursorId)[0]
   
-  if (!$(cursor).length) // add cursor image to page if it doesn't exist already...    
-    $('<img src="/static/img/cursors/osx.hand.gif" class="invisible no-cursor" id="cursor-big">').appendTo('body')
+  // jquery's reported element sizes are not exactly the same as the browser's 'mouseover' target sizes
+  // so we'll allow a few pixels extra
+  var fudgeFactor = 2
 
   $(id).addClass("no-cursor")
 
@@ -98,6 +99,7 @@ function initBigHand(id){
   //    find image co-ords
   //    bind a global mousemove func
   //    bind cursor click event
+  //    unbind mouseover
   // mousemove func:
   //    move image to mouse co-ords
   //    if mouse co-ords are outside the image co-ords:
@@ -106,17 +108,17 @@ function initBigHand(id){
   //        unbind cursor click event
 
   var mousemove = function(e){
-    $(cursor).css({
-      "top": e.pageY + "px",
-      "left": e.pageX - 32 + "px" // 32: (4 pixels * 8 pixels per big pixel) to line up pointy finger with cursor
-    })
-    $(id).unbind('mouseover', imageMouseOver)
-    if (e.pageY < initBigHand.coords.top || 
-        e.pageY > initBigHand.coords.bottom ||
-        e.pageX < initBigHand.coords.left || 
-        e.pageX > initBigHand.coords.right) {
-          $(cursor).addClass('invisible')
-          $(cursor).unbind('click', cursorClick)
+    var y = e.pageY, x = e.pageX, coords = initBigHand.coords
+    
+    cursor.style.top = y + "px"
+    cursor.style.left = x - 32 + "px" // 32: (4 pixels * 8 pixels per big pixel) to line up pointy finger with cursor
+    if (y < coords.top || 
+        y > coords.bottom ||
+        x < coords.left || 
+        x > coords.right) {
+          $(cursorId).addClass('invisible')
+          $(cursorId).css({"top": 0, "left": 0 })
+          $(cursorId).unbind('click', cursorClick)
           $('body').unbind('mousemove', mousemove)
           $(id).mouseover(imageMouseOver)
       }    
@@ -125,15 +127,17 @@ function initBigHand(id){
   var cursorClick = function(){ $(id).click() }
   
   var imageMouseOver = function(){
+    //console.log("moused over...")
     initBigHand.coords = {
-      "left":   $(id).offset().left,
-      "top":    $(id).offset().top,
-      "right":  $(id).offset().left + $(id).width(),
-      "bottom": $(id).offset().top + $(id).height()
+      "left":   $(id).offset().left - fudgeFactor,
+      "top":    $(id).offset().top - fudgeFactor,
+      "right":  $(id).offset().left + $(id).width() + fudgeFactor,
+      "bottom": $(id).offset().top + $(id).height() + fudgeFactor
     }
     $('body').mousemove(mousemove)
-    $(cursor).click(cursorClick)
-    $(cursor).removeClass('invisible')
+    $(cursorId).click(cursorClick)
+    $(cursorId).removeClass('invisible')
+    $(id).unbind('mouseover', imageMouseOver)
   }
   
   $(id).mouseover(imageMouseOver)
-- 
cgit v1.2.3-70-g09d2