svn commit: r1736851 - /ofbiz/trunk/applications/order/webapp/ordermgr/entry/catalog/productsummary.ftl

Author: jleroux
Date: Mon Mar 28 09:55:17 2016
New Revision: 1736851

URL: http://svn.apache.org/viewvc?rev=1736851&view=rev
Log:
A patch from James Yong for <<popup fades in and out non-stop when hovers on a product image in list view>> https://issues.apache.org/jira/browse/OFBIZ-6961

Problem
========
Go to https://localhost:8443/ecommerce/gift-cards-GC-100-c
When the mouse hovers on a product image in a list view, the popup fades in and out non-stop.
 
Cause
=====
The list view has a narrower height than the grid (matrix) view. This causes the popup to overlay on the target and results in the cycling.

Quick Fix
==============
To illustrate the problem, we change the display to grid view, instead of list view, by append the following to the CatalogDetail.groovy file
{quote}
context.put("numCol", 3);
context.viewSize = 12;
{quote}

Better Solution
===============
Use tooltip from jQuery UI. Works correctly when the products are displayed in list view / grid view. A patch will be provided.


jleroux: I checked, there should not be other cases like this

Modified:
    ofbiz/trunk/applications/order/webapp/ordermgr/entry/catalog/productsummary.ftl

Modified: ofbiz/trunk/applications/order/webapp/ordermgr/entry/catalog/productsummary.ftl
URL: http://svn.apache.org/viewvc/ofbiz/trunk/applications/order/webapp/ordermgr/entry/catalog/productsummary.ftl?rev=1736851&r1=1736850&r2=1736851&view=diff
==============================================================================
--- ofbiz/trunk/applications/order/webapp/ordermgr/entry/catalog/productsummary.ftl (original)
+++ ofbiz/trunk/applications/order/webapp/ordermgr/entry/catalog/productsummary.ftl Mon Mar 28 09:55:17 2016
@@ -88,11 +88,13 @@ ${virtualJavaScript!}
           </table>
         </div>
         <script type="text/javascript">
-          jQuery("#${productInfoLinkId}").hover(function() {
-                  jQuery("#${productDetailId}").fadeIn("slow");
-              }, function () {
-                  jQuery("#${productDetailId}").fadeOut("fast");
-              });
+          jQuery("#${productInfoLinkId}").attr('title', jQuery("#${productDetailId}").remove().html());
+          jQuery("#${productInfoLinkId}").tooltip({
+              content: function(){
+                  return this.getAttribute("title");
+              },
+              tooltipClass: "popup",  
+          });
         </script>
         <div class="productbuy">
           <#-- check to see if introductionDate hasn't passed yet -->