www.peopleinside.it - desktop site instead of mobile site

[PeopleInside]

URL: https://www.peopleinside.it Browser / Version: Firefox 31.0 Operating System: Windows Problem type: Desktop site instead of mobile site

Steps to Reproduce 1) Navigate to: https://www.peopleinside.it with small windows like a phone cell.

2) Now in the menu click on a page

3) After the page is loaded in mobile mode resize the window to big

Expected Behavior:

Menu are showed in desktop mode correctly

Actual Behavior: Menu are not showed correctly in desktop mode

[karlcow]

So I can confirm this behavior on Firefox Nightly on MacOSX.

the navigation bar is at .art-nav. There is a javascript to handle the responsive menu.

function(e) {
  var menu = $(this).next();
  if (menu.is(":visible")) {
    menu.slideUp("fast", function() {
      $(this).removeClass("visible").css("display", "");
    });
  } else {
    menu.slideDown("fast", function() {
      $(this).addClass("visible").css("display", "");
    });
  }
  e.preventDefault();
}

Some menu items not all of them are being set with style="width: 26px;", once we removed the style attribute attribute, everything is working.

https://www.peopleinside.it/wpi15/wp-content/themes/PeopleInside_IT_2015_2/script.responsive.js This seems a bit complicated for something which could be handled by CSS.

I haven't found the script yet which sets the width.

[PeopleInside]

So I will wait for a solution. Maybe if i can fix this problem with CSS code or something else..

Thanks

[PeopleInside]

As I can understand issue are on those menu who have submenu.

"Su di Me", "Diario di bordo", "Video", "Gallery", "Contatti" (mouse over and is opened sub menu)

Issue from mobile to Desktop are on those menu

[PeopleInside]

Where i can try to remove the style attribute?

[magsout]

@karlcow

I haven't found the script yet which sets the width.

script.js

var menuExtendedCreate = (function ($) {
    "use strict";
    return function () {
        var sheet = $(".art-sheet");
        var sheetLeft = sheet.offset().left;
        var sheetWidth = sheet.width();
        // reset
        $("#art-menu-style").remove();

        var styleStr = "";
        $("<style id=\"art-menu-style\"></style>").appendTo('head');
        var style = document.styleSheets[document.styleSheets.length - 1];

        $(".art-hmenu>li").each(function(i, v) {
            var itm = $(this);
            var subm = itm.children("ul");
            if (subm.length === 0) {
                return;
            }

            // reset
            itm.removeClass("ext ext-r ext-l");
            itm.css("width", "").find(".ext-off,.ext-m,.ext-l,.ext-r").remove();
            subm.children("li").children("a").css("width", "");

            var lw = 0, rw = 0;

            if (typeof subm.attr("data-ext-l") !== "undefined" && typeof subm.attr("data-ext-r") !== "undefined") {
                lw = parseInt(subm.attr("data-ext-l"), 10) + 7;
                rw = parseInt(subm.attr("data-ext-r"), 10) + 7;
                itm.addClass("ext-r").addClass("ext-l");
            } else {
                var ltr = !subm.hasClass("art-hmenu-right-to-left");
                itm.addClass(ltr ? "ext-r" : "ext-l");
            }

            var shadow = 7;
            if (subm.length > 0) {
                var lnk = itm.children("a");
                var lnkWidth = lnk.outerWidth(false);
                itm.css("width", Math.round(parseFloat(lnkWidth, 10)) + "px");
                var menubarMargin = 4 * 2; // margin * 2 sides
                var menubarBorder = 0 * 2; // border 1 side
                var submWidth = subm.width() + shadow + menubarMargin + menubarBorder;
                var w = submWidth - lnkWidth;
                $("<div class=\"ext-off\"></div>").insertBefore(lnk);
                $("<div class=\"ext-m\"></div>").insertBefore(lnk);
                if (w < 0) {
                    var submA = subm.children("li").children("a");
                    var pL = parseInt(submA.css("padding-left").replace("px", ""), 10) || 0;
                    var pR = parseInt(submA.css("padding-right").replace("px", ""), 10) || 0;
                    var bL = parseInt(submA.css("border-left").replace("px", ""), 10) || 0;
                    var bR = parseInt(submA.css("border-right").replace("px", ""), 10) || 0;
                    subm.children("li").children("a").css("width", (lnkWidth - pL - pR - bL - bR) + "px");
                    submWidth = subm.width() + shadow + menubarMargin + menubarBorder;
                    w = submWidth - lnkWidth;
                }
                $("<div class=\"ext-l\" style=\"width: " + (lw > 0 ? lw : Math.round(parseFloat(w, 10))) + "px;\"></div>").insertBefore(lnk);
                $("<div class=\"ext-r\" style=\"width: " + (rw > 0 ? rw : Math.round(parseFloat(w, 10))) + "px;\"></div>").insertBefore(lnk);
                itm.addClass("ext");
                if (style !== null && typeof style.insertRule !== "undefined") {
                    var cls = "art-hmenu-item-" + i;
                    var selector = ".desktop ul.art-hmenu>li." + cls + ":hover>ul:before";
                    var r = submWidth;
                    var b = subm.height() + (shadow * 2) + menubarBorder + menubarMargin;
                    var rule = "clip: rect(11px, " + Math.round(parseFloat(r, 10)) + "px, " + Math.round(parseFloat(b, 10)) + "px, -" + shadow + "px);";
                    itm.addClass(cls);
                    var rulesLen = typeof style.cssRules === "undefined" || style.cssRules === null ? 0 : style.cssRules.length;
                    style.insertRule(selector + '{' + rule + '}', rulesLen);
                }
            }
        });
    };
})(jQuery);
jQuery(window).load(menuExtendedCreate);

[magsout]

And this is called by

jQuery(window).bind("responsiveNav", (function ($) {
    /*global menuExtendedCreate */
    "use strict";
    return function (event, options) {
        if (options.isDesktopNav && $("li.ext").length > 0) {
            menuExtendedCreate();
        }
    };
})(jQuery));

in script.responsive.js

[PeopleInside]

mmmmmm so need to find a fix, a solution. Thanks for the help, i will continue to follow this topic to find a guide how to fix this issue.

Many thanks!

[magsout]

in first time, it's dirty and not the final solution : but

ul.art-hmenu li {
  /*added this hack */
  width : auto !important;
}

[PeopleInside]

Great, this work and solve my issue! @magsout, thanks!

Very great !!!

[magsout]

there is still an issue about javascript which add useless styles

[PeopleInside]

Ok now menu are showed well but is not showed well submenu maybe i need a little more code? So as before when screen from mobile switch to desktop now show the main menu well but submenu not well.

Now:

What should be:

[PeopleInside]

Tested theme in a clean wordpress installation. Issue is the same. Issue is on the Theme. Need a fix.

[magsout]

hum, this is because of art-hmenu-mega-menu on desktop version, there is a script that add width but, if you load on small device first and move to desktop, the script isn't add style

[PeopleInside]

So will be difficult to fix?

[hallvors]

I guess listening to resize events and setting art-hmenu-mega-menu (which I assume is a class name?) when window widht exceeds a certain threshold is enough?

[PeopleInside]

Thank you. I don't know how to do for fix.

Thanks for your message.

Inviato da dispositivo mobile. | Sended by mobile device Il 22/Ago/2015 15:48, "Hallvord R. M. Steen" notifications@github.com ha scritto:

I guess listening to resize events and setting art-hmenu-mega-menu (which I assume is a class name?) when window widht exceeds a certain threshold is enough?

— Reply to this email directly or view it on GitHub https://github.com/webcompat/web-bugs/issues/1092#issuecomment-133705104 .

[hallvors]

Something like

var widthThreshold = 560; // if window is wider, set mega-menu class
window.addEventListener('resize', function(){
    if(window.innerWidth > widthThreshold){
        document.documentElement.classList.add('art-hmenu-mega-menu');
    }else{
        document.documentElement.classList.remove('art-hmenu-mega-menu');
    }
}, false);

I haven't looked at the site's code, so it may need some tweaking. Of course you should also change the threshold number depending on how much space the menus need.

[PeopleInside]

Thanks. Tested this code but seems to not work and I AM unable to edit for make it work. Thanks for the help @hallvors.