MozillaZine

Flyout menu does not work properly in firefox

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

Post Posted May 4th, 2015, 4:57 pm

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

DanRaisch
Moderator

User avatar
 
Posts: 118403
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted May 4th, 2015, 7:31 pm

Moving to Web Development.

Pim

User avatar
 
Posts: 2201
Joined: May 17th, 2004, 2:04 pm
Location: Netherlands

Post Posted May 5th, 2015, 4:54 am

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

Post Posted May 5th, 2015, 9:49 am

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

trolly
Moderator

User avatar
 
Posts: 39879
Joined: August 22nd, 2005, 7:25 am

Post Posted May 5th, 2015, 11:50 am

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

Post Posted May 5th, 2015, 12:36 pm

Thanks a lot for your response.
Yes there is JS on the site, is there a solution for something like that?

trolly
Moderator

User avatar
 
Posts: 39879
Joined: August 22nd, 2005, 7:25 am

Post Posted May 5th, 2015, 12:50 pm

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.

jscher2000

User avatar
 
Posts: 10077
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted May 6th, 2015, 12:50 pm

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

Post Posted May 6th, 2015, 5:35 pm

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

Post Posted May 10th, 2015, 1:38 pm

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

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 1 guest