Announcement

Collapse
No announcement yet.

Mobile Menu Problems

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Mobile Menu Problems

    With the Shadows theme has anyone experienced problems with the mobile menu. I have 10 menu items. The first level looks good. The second level, starting with menu item 7 and continuing through 10 is not showing up correctly. It looks like the vertical alignment is off, you must scroll up to see the top of the menu. The second level of the last menu item is completely off the screen.

    I was about to start a support ticket on this but thought I would ask here if anyone has seen this menu behavior before? Check it out on your phone at www.paddletramps.com.
    Gary

    [email protected]
    www.icCommerce.com

  • Hi Gary,

    I am unable to duplicate this issue. What device are you seeing this on? I am seeing several JavaScript console errors when loading the storefront, so that may cause an issue depending on the device and browser.
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    Comment


    • I'm seeing it on my iPhone, model 6S, software version 12.3.1
      Same results in both Safari and Chrome
      Gary

      [email protected]
      www.icCommerce.com

      Comment


      • Hi Gary,

        Are you referring to the need to scroll to the top to see the links in the secondary level?
        Matt Zimmermann
        Director of UI/UX Standards and Theme Development
        / Miva, Inc.

        Comment


        • yes, click the last menu item (Bid Day Gifts), The resulting screen looks blank. You have to scroll to see anything.
          Gary

          [email protected]
          www.icCommerce.com

          Comment


          • Hi Gary,

            Try replacing your User Interface -> JavaScript Resources -> transfigure-navigation code with this:
            Code:
            (function ($, window, document) {
                'use strict';
            
                var touchCapable = 'ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
            
                /**
                 * Double Tap To Go [http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly]
                 * By: Osvaldas Valutis [http://www.osvaldas.info]
                 * License: MIT
                 */
                $.fn.doubleTapToGo = function () {
                    if (touchCapable) {
                        this.each(function () {
                            var curItem = false;
            
                            $(this).on('click', function (event) {
                                var item = $(this);
            
                                if (item[0] !== curItem[0]) {
                                    event.preventDefault();
                                    curItem = item;
                                }
                            });
            
                            $(document).on('click touchstart MSPointerDown', function (event) {
                                var resetItem = true,
                                    parents = $(event.target).parents();
            
                                for (var i = 0; i < parents.length; i++) {
                                    if (parents[i] === curItem[0]) {
                                        resetItem = false;
                                    }
                                }
                                if (resetItem) {
                                    curItem = false;
                                }
                            });
                        });
                    }
            
                    return this;
                };
            
            
                /**
                 * This function works if the element, or its parent, have been hidden via JavaScript, and can either
                 * retrieve inner or outer dimensions as well as returning the offset values. The function is called
                 * directly on the object and will insert a clone just after the original element making it possible
                 * for the clone to maintain inherited dimensions.
                 *
                 * @param outer
                 * @returns {*}
                 *
                 * element width: $(ELEMENT).getRealDimensions().width;
                 * element outerWidth: $(ELEMENT).getRealDimensions(true).width;
                 * element height: $(ELEMENT).getRealDimensions().height;
                 * element outerHeight: $(ELEMENT).getRealDimensions(true).height;
                 * element offsetTop: $(ELEMENT).getRealDimensions().offsetTop;
                 * element offsetLeft: $(ELEMENT).getRealDimensions().offsetLeft;
                 */
                $.fn.getRealDimensions = function (outer) {
                    var $this = $(this);
            
                    if ($this.length === 0) {
                        return false;
                    }
            
                    var $clone = $this.clone().css(
                        {
                            'display': 'block',
                            'visibility': 'hidden'
                        }
                    ).insertAfter($this);
            
                    var result = {
                        width: (outer) ? $clone.outerWidth() : $clone.innerWidth(),
                        height: (outer) ? $clone.outerHeight() : $clone.innerHeight(),
                        offsetTop: $clone.offset().top,
                        offsetLeft: $clone.offset().left
                    };
            
                    $clone.remove();
                    return result;
                };
            
            
                /**
                 * This function will check if navigation elements will be rendered outside
                 * of the visible area. If they will be, a class is added to the parent
                 * element which will change the render direction. You can pass a jQuery
                 * object as the `container` parameter to have the visible area set to
                 * something other than the documentElement.
                 *
                 * @param container
                 */
                $.fn.setOffsetDirection = function (container) {
                    var triggerElement = $(this);
            
                    triggerElement.on('mouseenter', function (e) {
                        var parentElement = $(this),
                            childElement = parentElement.find('ul').first(),
                            grandchildElement = childElement.find('ul').first(),
                            childOffsetWidth = childElement.offset().left + childElement.width(),
                            documentWidth = container ? container.outerWidth() : document.documentElement.clientWidth;
            
                        if (grandchildElement) {
                            childOffsetWidth = childOffsetWidth + grandchildElement.getRealDimensions().width;
                        }
            
                        var isEntirelyVisible = (childOffsetWidth <= documentWidth);
            
                        if (!isEntirelyVisible) {
                            //console.log('NOT In the viewport!');
                            parentElement.addClass('is-off-screen');
                        }
                        else {
                            //console.log('In the viewport!');
                            parentElement.removeClass('is-off-screen');
                        }
                    });
                    return this;
                };
            
            
                /**
                 * This function is the compiled call for all the functions contained in this extension. You can pass a jQuery
                 * object as the `container` parameter to have the visible area set to something other than the documentElement.
                 *
                 * Example: $(ELEMENT).transfigureNavigation();
                 *          $(ELEMENT).transfigureNavigation($(CONTAINER_ELEMENT));
                 *
                 * @param container
                 */
                $.fn.transfigureNavigation = function (container) {
                    var clientPort = document.documentElement.clientWidth;
                    var waitForIt;
            
                    window.addEventListener('resize', function (event) {
                        if (!waitForIt) {
                            waitForIt = setTimeout(function () {
                                waitForIt = null;
                                clientPort = document.documentElement.clientWidth;
            
                                if (clientPort < 960) {
                                    showSubnavigation();
                                }
                            }, 66);
                        }
                    }, false);
            
                    function showSubnavigation() {
                        $.hook('has-child-menu').children('a').on('click', function (event) {
                            var selected = $(this);
            
                            event.preventDefault();
                            selected.next('ul').removeClass('is-hidden');
                            selected.parent('.has-child-menu').closest('ul').addClass('show-next');
                            selected.closest('[data-layout]').scrollTop(0);
                        });
            
                        $.hook('show-previous-menu').on('click', function (event) {
                            var selected = $(this);
            
                            event.preventDefault();
                            selected.parent('ul').addClass('is-hidden').parent('.has-child-menu').closest('ul').removeClass('show-next');
                        });
                    }
            
                    document.querySelector('[data-hook="open-main-menu"]').addEventListener('click', function (event) {
                        event.preventDefault();
                        document.documentElement.classList.add('has-open-main-menu');
                        document.querySelector('[data-hook="transfigure-navigation"]').classList.add('is-open');
                    });
            
                    document.querySelector('[data-hook="close-main-menu"]').addEventListener('click', function (event) {
                        event.preventDefault();
                        document.documentElement.classList.remove('has-open-main-menu');
                        document.querySelector('[data-hook="transfigure-navigation"]').classList.remove('is-open');
                    });
            
                    if (clientPort < 960) {
                        showSubnavigation();
                    }
                    else {
                        return this.doubleTapToGo().setOffsetDirection(container);
                    }
                };
            })(jQuery, window, document);
            Matt Zimmermann
            Director of UI/UX Standards and Theme Development
            / Miva, Inc.

            Comment

            Working...
            X

            This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

            This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

            Accept