Flyout menu does not work properly in firefox
My webpage http://www.base-x-of-war.com/ has a flyout menu. When I hover over the left hand menu the flyout part should be directly next to the left hand menu with the products. But when I hover over the left hand menu, the flyout part is on the very right site of the page and you can see only a very small strip of it.
After I zoomed in or out, the flyout menu works all of the sudden. But after I have clicked on a product category and want to use the flyout menu again it is on the very right side again and I have to zoom in or out again so that the flyout menu appears where it should be. The same happens when I hover over the menu and make a left click with the mouse and select "open link in a new tab" it works again but only until I have clicked a product category in the fly out part.
It works absolute fine in all other browser I have tested.
Your help would be much appreciated, I have searched hours in the web and have found nothing that could help me with this.
Thanks and best regards Simone
Chosen solution
Hello, thank you all very much for your answers. This answer from forums.mozillazine.org fixed my problem:
The problem is reproducible when the page is reloaded. Clicking on a product category causes the problem to reappear, yes, but largely because a new page has been loaded from the server.
You mentioned this code in a script element starting shortly after page text "Self-Adhesive Metal Foil for 25 x 25 mm bases" (line 773 of main page served)
$(window).on('resize', function() {
.... resize code ....
}).resize();
Now if the call to .resize() is to trigger execution of the resize event handler, and so setup the flyout menu code, it would seem to be too early for Firefox: the DOM has not been finalized and more HTML follows down the page.
Without being able to modify and test the server page I can only predict how to fix it:
function myResizeCode() { // name the resize function for reference
.... resize code ....
}
$(window).on('resize', myResizeCode); // register resize handler $(window).on('load', myResizeCode); // and call when page has loaded
Read this answer in context 👍 0All Replies (7)
You can ask advice at this forum.
It looks that the code that calculates the menu width and position isn't triggered unless you resize the window (changing the width 1px by dragging the border or zooming the page works), so the menu flyout still has the default setting. I see:
<ul style="width: 51px; left: 1100px; display: none;" class="sub-container flmenu">
After a resize this changes to:
<ul style="width: 898px; left: 252px; display: none;" class="sub-container flmenu">
I don't know how this onresize event ($(window).on('resize', function()) would have to be triggered to initialize the menu properly.
Thank you for looking into this. Could you tell me which file it is in which you have found this line? Thanks a lot
That is the line in the page code that is about the element with the flyout menu.
Thank you for the reply. It may be a stupid question for you but where can I find this row of code you have highlighted in the picture in my FTP files to change them? I can find the same row when I inspect the code but on the right side of the inspect window is only stated for this row with the pixel sizes Element ( inline width: 51px; left: 1099px; display: none;
and no path to any file.
best regards Simone
That is because this is an inline style rule that is added as a style attribute to the page code (DOM) and modified via JavaScript if you hover the menu items as you can see in the screenshot I posted above.
The JavaScript code that runs after a resize is in the main file on line 772 and further down.
Note that if the menu bar is hidden that it is sufficient to press the Alt key to make the resize code run.
The .resize() function is in the inline script of your index.html file starting on line 772.
You have .resize() after the resize function is added, which should trigger it immediately, but for some reason this doesn't work in firefox (not really sure why, because it works when I try to do the same thing in a different webpage).
I would suggest adding another line after that, $(window).trigger("resize"); which I think will fix the issue.
Chosen Solution
Hello, thank you all very much for your answers. This answer from forums.mozillazine.org fixed my problem:
The problem is reproducible when the page is reloaded. Clicking on a product category causes the problem to reappear, yes, but largely because a new page has been loaded from the server.
You mentioned this code in a script element starting shortly after page text "Self-Adhesive Metal Foil for 25 x 25 mm bases" (line 773 of main page served)
$(window).on('resize', function() {
.... resize code ....
}).resize();
Now if the call to .resize() is to trigger execution of the resize event handler, and so setup the flyout menu code, it would seem to be too early for Firefox: the DOM has not been finalized and more HTML follows down the page.
Without being able to modify and test the server page I can only predict how to fix it:
function myResizeCode() { // name the resize function for reference
.... resize code ....
}
$(window).on('resize', myResizeCode); // register resize handler $(window).on('load', myResizeCode); // and call when page has loaded