Fixing thumbnail hovering problems


XS version 26.4 or later

Related articles

Infradox XS tags, functions and conditions

Adding Custom CSS

Adding Javascript to your pages


If you have changed the CSS or settings related to thumbnail hovering - and you have problems with positioning of the hover element, then you can add the json formatted object "mouseoverpos" to your custom Javascript. 

The globally defined mouseoverpos object

The object must be added at the top of your Javascript in the code editor. So not inside the Client object, because it must be globally accessible.

The object must look like this. Note that the -4 and -1 are just examples. To get the positioning correct will probably require some experimenting on different browsers and with different view styles selected (e.g. small thumbnails, large thumbnails, list et cetera).

var mouseoverpos={
     "inside":{"at":"center top","my":"center top"},
     "outside":{"at":"center top","my":"center-4 top-1"}

If you have positioning problems with certain browsers only, then write your script to include the object for that specific browser only. For example:

if("Firefox") {
     var mouseoverpos={
          "inside":{"at":"center top","my":"center top"},
          "outside":{"at":"center top","my":"center-4 top-1"}

Changing the position for different pages

If you need to change the positioning for different pages, then first introduce the mouseoverpos object globally as explained above - and the override its properties inside the client javascript object.

Normally you'll only have to modify the property. E.g."center-5 top-2";

Below is an example (in the code editor Client Javascript) that changes the positioning for the list view style of search results and for the order pages:

var mouseoverpos={

     "inside":{"at":"center top","my":"center top"},
     "outside":{"at":"center top","my":"center-4 top-1"}

var client = {

    init: function() {

          if("Firefox") { /* if the browser is firefox */
               switch( { /* what is the page type */
               case 1:  /* page type 1 = search results */
                    if($("#pagethumbnails").hasClass("so1")){ /* the container has the class so1 thus view style 1 is active (thumbnail list style) */ 
               "center-5 top-2";  /* override the my property for this page type */
                    }; break;
               case 4:  /* page type 4 = order/cart pages */
          "center+1 top-2";



The jQ object

The jQ object is part of the infradox.js file, and it is automatically available on all your pages.

It has has the following properties:

  • jQ.mozilla
  • jQ.webkit
  • jQ.opera
  • jQ.msie
  • jQ.fullVersion
  • jQ.majorVersion





Have more questions? Submit a request


Article is closed for comments.
Powered by Zendesk