Clean up hover effect, move some CSS out of ui.init.js to screen.css. Fix context_menu, it wasn't closing. Fix context_menu in IE7 by putting a bg color on the menu

3 files changed, 29 insertions, 35 deletions

diff --git a/lib/gallery.common.js b/lib/gallery.common.js
index 6e3efe5a..618c556e 100644
--- a/lib/gallery.common.js
+++ b/lib/gallery.common.js
@@ -113,10 +113,11 @@
 
   $.fn.gallery_context_menu = function() {
     if ($(".gContextMenu li").length) {  
+      var hover_target = ".gContextMenu";
       var in_progress = 0;
-      $(".gContextMenu *").removeAttr('title');
-      $(".gContextMenu ul").hide();
-      $(".gContextMenu li").hover(
+      $(hover_target + " *").removeAttr('title');
+      $(hover_target + " ul").hide();
+      $(hover_target).hover(
         function() {
           if (in_progress == 0) {
             $(this).find("ul").slideDown("fast", function() { in_progress = 1; });
@@ -125,7 +126,7 @@
           }
         },
         function() {
-          $(this).find(".gContext").slideUp("slow", function() { in_progress = 0; });
+          $(this).find("ul").slideUp("slow", function() { in_progress = 0; });
         }
       );
     }
diff --git a/themes/wind/css/screen.css b/themes/wind/css/screen.css
index 2898bf2b..444c370e 100644
--- a/themes/wind/css/screen.css
+++ b/themes/wind/css/screen.css
@@ -465,6 +465,7 @@ form .gError,
 #gContent .gPhoto h2,
 #gContent .gItem .gMetadata {
   display: none;
+  margin-bottom: .6em;
 }
 
 #gContent #gAlbumGrid .gAlbum {
@@ -480,8 +481,9 @@ form .gError,
 }
 
 #gContent #gAlbumGrid .gHoverItem {
-  background-color: #fff;
   border: 1px solid #000;
+  position: absolute !important;
+  z-index: 1000 !important;
 }
 
 #gContent .gHoverItem h2,
@@ -489,6 +491,12 @@ form .gError,
   display: block;
 }
 
+#gContent #gAlbumGrid #gPlaceHolder {
+  position: relative;
+  visibility: hidden;
+  z-index: 1;
+}
+
 /* Individual photo content ~~~~~~~~~~~~~~ */
 
 #gContent #gItem {
@@ -589,7 +597,7 @@ form .gError,
 
 #gSiteMenu {
   bottom: 0;
-	display: none;
+  display: none;
   left: 140px;
   position: absolute;
 }
@@ -601,9 +609,10 @@ form .gError,
 /* Context Menu  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 .gContextMenu {
-  position: absolute;
+  background-color: #fff;
   bottom: 0;
   left: 0;
+  position: absolute;
 }
 
 .gItem .gContextMenu {
diff --git a/themes/wind/js/ui.init.js b/themes/wind/js/ui.init.js
index 4eee1bb2..abf79b81 100644
--- a/themes/wind/js/ui.init.js
+++ b/themes/wind/js/ui.init.js
@@ -65,34 +65,19 @@ $(document).ready(function() {
     // Initialize thumbnail hover effect
     $(".gItem").hover(
       function() {
-        // Insert invisible placeholder to hold the item's position in the grid
-        var placeHolder = $(this).clone();
-        $(placeHolder).attr("id", "gPlaceHolder");
-        $(placeHolder).css("visibility", "hidden");
+        // Insert a placeholder to hold the item's position in the grid
+        var placeHolder = $(this).clone().attr("id", "gPlaceHolder");
         $(this).after($(placeHolder));
-        // Style and position the item
-        $(this).addClass("gHoverItem");
+        // Style and position the hover item
         var position = $(this).position();
-        $(this).css("position", "absolute");
-        $(this).css("top", position.top);
-        $(this).css("left", position.left);
-        $(this).css("z-index", "1000");
+        $(this).css("top", position.top).css("left", position.left);
+        $(this).addClass("gHoverItem");
         // Initialize the contextual menu
         $(this).gallery_context_menu();
-        // Set height based on height of descendents
-        var title = $(this).find("h2");
-        var meta = $(this).find(".gMetadata");
-        var item_ht = $(this).height();
-        var title_ht = $(title).gallery_height();
-        var meta_ht = $(meta).gallery_height();
-        var ht = item_ht + title_ht + meta_ht;
-        var context_label = $(this).find(".gContextMenu li:first");
-        var css_id = $(this).attr("id");
-        if ($("#" + css_id + " .gContextMenu li").length) {
-          var context_label_ht = $(context_label).gallery_height();
-          ht = ht + context_label_ht;
-        }
-        $(this).height(ht);
+        $(this).height("auto");
+        var context_menu = $(this).find(".gContextMenu");
+        var adj_height = $(this).height() + context_menu.height(); 
+        $(this).height(adj_height); 
       },
       function() {
         // Reset item height, position, and z-index
@@ -104,14 +89,13 @@ $(document).ready(function() {
         if ($.browser.msie && $.browser.version >= 8) {
           sib_height = sib_height + 1;
         }
+        $(this).toggleClass("gHoverItem");
         $(this).css("height", sib_height);
         $(this).css("position", "relative");
-        $(this).css("top", 0);
-        $(this).css("left", 0);
-        $(this).css("z-index", 1);
+        $(this).css("top", 0).css("left", 0);
         // Remove the placeholder and hover class from the item
-        $("#gPlaceHolder").remove();
         $(this).removeClass("gHoverItem");
+        $("#gPlaceHolder").remove();
       }
     );
   }