Don't clone hover item, apply styles to the original container. Contextual menu rotates are now immediately visible. Fixes ticket 667.

2 files changed, 37 insertions, 46 deletions

diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index 55839c57..cc5f6bcb 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -406,7 +406,6 @@ form .gError,
 }
 
 #gSidebar {
-  background-color: #fff;
   font-size: .9em;
   padding: 0 20px;
   width: 220px;
@@ -492,23 +491,13 @@ form .gError,
   width: 16px;
 }
 
-#gContent #gAlbumGrid #gHoverItem {
+#gContent #gAlbumGrid .gHoverItem {
   background-color: #fff;
   border: 1px solid #000;
-  display: none;
-  height: auto;
-  padding: 0;
-  position: absolute;
-  width: auto;
-  z-index: 100;
-}
-
-#gContent #gAlbumGrid #gHoverItem .gItem {
-  border: none;
 }
 
-#gContent #gHoverItem .gItem h2,
-#gContent #gHoverItem .gItem .gMetadata {
+#gContent .gHoverItem h2,
+#gContent .gHoverItem .gMetadata {
   display: block;
 }
 
@@ -647,15 +636,15 @@ form .gError,
   line-height: 1.6em;
 }
 
-#gHoverItem .gContextMenu {
+.gHoverItem .gContextMenu {
   display: block;
 }
 
-#gHoverItem .gContextMenu li {
+.gHoverItem .gContextMenu li {
   text-align: left;
 }
 
-#gHoverItem .gContextMenu a:hover {
+.gHoverItem .gContextMenu a:hover {
   text-decoration: none;
 }
 
diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js
index 2391f638..006d74bb 100644
--- a/themes/default/js/ui.init.js
+++ b/themes/default/js/ui.init.js
@@ -62,39 +62,41 @@ $(document).ready(function() {
     // Initialize context menus
     $(".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");
+        $(this).after($(placeHolder));
+        // Style and position the item
+        $(this).addClass("gHoverItem");
         var position = $(this).position();
-        var item_classes = $(this).attr("class");
-        var bg_color = $(this).css("background-color");
-        var container = $(this).parent();
-        $("#gHoverItem").remove();
-        container.append("<div id=\"gHoverItem\"><div class=\"" + item_classes + "\">"
-            + $(this).html() + "</div></div>");
-        $("#gHoverItem").css("top", position.top);
-        $("#gHoverItem").css("left", position.left);
-        $("#gHoverItem").css("background-color", bg_color);
-        $.fn.gallery_hover_init();
-        var v_align = $(this).find(".gValign");
+        $(this).css("position", "absolute");
+        $(this).css("top", position.top);
+        $(this).css("left", position.left);
+        $(this).css("z-index", "1000");
+        // 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 context = $(this).find(".gContextMenu");
         var context_label = $(this).find(".gContextMenu li:first");
-        $("#gHoverItem .gItem").height(
-            $(v_align).gallery_height()
-            + $(title).gallery_height()
-            + $(meta).gallery_height()
-            + parseInt($(context).css("margin-top").replace("px",""))
-            + $(context_label).gallery_height()
-          );
-
-        $("#gHoverItem").fadeIn("fast");
-        $("#gHoverItem").hover(
-          function(){
-            $(this).gallery_context_menu();
-          },
-          function() {
-            $(this).hide();
-          }
-        );
+        var item_ht = $(this).height();
+        var title_ht = $(title).gallery_height();
+        var meta_ht = $(meta).gallery_height();
+        var context_label_ht = $(context_label).gallery_height();
+        $(this).height(item_ht + title_ht + meta_ht + context_label_ht);
+      },
+      function() {
+        // Reset item height, position, and z-index
+        var sib_height = $(this).next().height();
+        $(this).css("height", sib_height);
+        $(this).css("position", "relative");
+        $(this).css("top", null);
+        $(this).css("left", null);
+        $(this).css("z-index", null);
+        // Remove the placeholder and hover class from the item
+        $("#gPlaceHolder").remove();
+        $(this).removeClass("gHoverItem");
       }
     );
   }