ajaxcart does not display properly in Chrome or Safari

[michael_s]

Hello,

 

When using Chrome or Safari browsers, the ajaxcart in whmcs v4.5.1 does not scroll with the page, and disappears. See the video:

 

http://screencast.com/t/7vDsCCMPvtZn

 

 

Seems to work fine in FF, IE.

 

Does anyone else see this behavior?

[Sophia]

Yes, confirmed. I use Chrome and the shopping cart stays at the top at all times.

[jpkelly]

Same here... Well actually it vanishes when it gets to the top.

[bradh]

Glad I'm not the only one

[Juanzo]

I'm not sure if it's of any use since we use a custom template, but you can check our ajax order form working at both browsers.

[Sophia]

Juanzo, confirmed as well... though the "default" Ajax Cart template does not behave that way at all.

[webjive]

I can confirm this happens with every new release for some reason. I have had to fix the JS every time, and every time I have to backtrack and figure out what's broken for WebKit.

[jpkelly]

I found that this function in main.js controls the properties of fixedFloatWrapper and changing absolute to inherit in two places fixed it for me.

 

$(document).ready(function(){

   recalcsummary();

   (function ($) {
       $.fn.basketFloat = function () {
           $me = this;
           var position = this.position();
           var yPos;
           $me.wrap('<div id="fixedFloatWrapper" style="position:inherit;left:' + position.left + 'px;" />');

           $(window).scroll(function () {
               yPos = $(window).scrollTop();
               if (yPos >= position.top) {
                   $me.css('position', 'fixed').css('top', '5px');
               } else {
                   $me.removeAttr("style");
               }
           });

           $(window).resize(function () {
               $('#fixedFloatWrapper').css('position', 'static');
               $me.removeAttr("style");
               position = $me.position();
               $('#fixedFloatWrapper').css({ 'position': 'inherit', 'left': position.left + 'px' });
               if (yPos >= position.top) {
                   $me.css('position', 'fixed').css('top', '0');
               } else {
                   $me.removeAttr("style");
               }
           });

       };
   })(jQuery);
   jQuery('#cartsummary').basketFloat();

});

[Sophia]

That sorted it for me too, THANKS for posting the solution, jpkelly!