0

I have a Magento 1.9 installation and I have problem with menu of new responsive theme of Magento. The problem is with a windows 8 laptop with touch screen display and only with Chrome & Firefox. IE does not have any problem. By mouse over on Menu the drop down does not work. I have disabled the touch screen option on Chrome by using chrome://flags. That will solve the problem. Does have anyone have a solution for this problem without disabling the browser touch screen option. I should also mention it is not possible to scroll the screen with the browser bar.

  • I too have the same problem the Menu doesn't work when there is a drop down in IE and IPad – Dexter Jul 7 '14 at 12:01
  • This is a bug reported here: Issue #5398 It seems to be closed however latest release still doesn't work for me. – Aphroz Oct 9 '14 at 7:46
2

I found a solution, modify app.js in your skin folder and at line 153:

Change

var pointerEvent = 'touchend';

to

var pointerEvent = 'mouseover';

There is also a bug with the zoom on the product view (zoom isn't active on the first image), change line 711 from:

ProductMediaManager.createZoom($j(".no-touch .gallery-image.visible")); //set zoom on first image

to:

ProductMediaManager.createZoom($j(".gallery-image.visible")); //set zoom on first image

Of course, if you modifiy app.js, it will be overwritten in the next version and you should not do it, but hopefuly these bugs will be resolved in the next version ;)

Thanks to Alfred Stephenson => http://www.magentocommerce.com/bug-tracking/issue/index/id/308

EDIT:

The version on demo.magentocommerce.com is working correctly. The difference is in app.js, on line 189:

}).on('click', function (event) {
    var elem = $j(this);
    if (elem.data('has-touch')) {
        elem.data('has-touch', false);
        event.preventDefault();
        return;
    }

    if(Modernizr.mq("screen and (max-width:" + bp.medium + "px)")) {
        var elem = $j(this).parent();

        var alreadyExpanded = elem.hasClass('menu-active');

        nav.find('li.level0').removeClass('menu-active');

        // Collapse all active sub-menus
        nav.find('.sub-menu-active').removeClass('sub-menu-active');

        if (!alreadyExpanded) {
            elem.addClass('menu-active');
        }

        event.preventDefault();
    }

change it to:

}).on('click', function (event) {
    var elem = $j(this);
    if (elem.data('has-touch')) {
        event.preventDefault();
    }

    elem.data('has-touch', false);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.