Flyout menu does not work properly in firefox

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Post Reply
simone1
Posts: 4
Joined: May 4th, 2015, 4:51 pm

Flyout menu does not work properly in firefox

Post by simone1 »

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.
I just downloaded Firefox completely new today 5th of Mai 2015, so there are no addons and I have made no changes or new configurations to Firefox.

Thanks and best regards
Simone
User avatar
DanRaisch
Moderator
Posts: 127188
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Re: Flyout menu does not work properly in firefox

Post by DanRaisch »

Moving to Web Development.
User avatar
Pim
Posts: 2215
Joined: May 17th, 2004, 2:04 pm
Location: Netherlands

Re: Flyout menu does not work properly in firefox

Post by Pim »

There are serious errors on the page; see the W3C Validator. Structural errors like DIVs in ULs, LINKs in DIVs and elements wth two CLASS attributes are handled differently by different browsers. Correct the errors first and then check if the differences still exist.
Groetjes, Pim
simone1
Posts: 4
Joined: May 4th, 2015, 4:51 pm

Re: Flyout menu does not work properly in firefox

Post by simone1 »

Thanks for looking into this.
I had a answer from another forum but unfortunately he could not help me further.
Can anyone help me with this reply:

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.

Thanks
User avatar
trolly
Moderator
Posts: 39851
Joined: August 22nd, 2005, 7:25 am

Re: Flyout menu does not work properly in firefox

Post by trolly »

Is there JS on that page?
If yes then the original calculation may be triggered before the complete page is rendered.
Think for yourself. Otherwise you have to believe what other people tell you.
A society based on individualism is an oxymoron. || Freedom is at first the freedom to starve.
Constitution says: One man, one vote. Supreme court says: One dollar, one vote.
simone1
Posts: 4
Joined: May 4th, 2015, 4:51 pm

Re: Flyout menu does not work properly in firefox

Post by simone1 »

Thanks a lot for your response.
Yes there is JS on the site, is there a solution for something like that?
User avatar
trolly
Moderator
Posts: 39851
Joined: August 22nd, 2005, 7:25 am

Re: Flyout menu does not work properly in firefox

Post by trolly »

There once was a thread about a similar problem but I can not find it at the moment.

There were two potential solutions:
- use event handler like "onload"
- start the script with a delay

And sometimes it helps when the script is moved to the end of the page. But that is not a proper solution.
Think for yourself. Otherwise you have to believe what other people tell you.
A society based on individualism is an oxymoron. || Freedom is at first the freedom to starve.
Constitution says: One man, one vote. Supreme court says: One dollar, one vote.
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: Flyout menu does not work properly in firefox

Post by jscher2000 »

I don't know where that initial width is coming from. Mine is setting to 1149px. But I think the problem with the code is wherever that is set.
Dom1953
Posts: 52
Joined: July 24th, 2014, 6:02 am
Location: Australia

Re: Flyout menu does not work properly in firefox

Post by Dom1953 »

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)

Code: Select all

$(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:

Code: Select all

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

Please note that I am not a jQuery user and this is untested - whether the code would be better executed using a $(document).ready() call instead of using the window load event is not something I can comment on.

Hope it helps, Dom
simone1
Posts: 4
Joined: May 4th, 2015, 4:51 pm

Re: Flyout menu does not work properly in firefox

Post by simone1 »

Thank you very much for all your answers.
Dom1953 was right with the code he supplied.
It solved the problem completely.
Post Reply