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
Flyout menu does not work properly in firefox
- DanRaisch
- Moderator
- Posts: 127246
- Joined: September 23rd, 2004, 8:57 pm
- Location: Somewhere on the right coast
Re: Flyout menu does not work properly in firefox
Moving to Web Development.
- Pim
- Posts: 2215
- Joined: May 17th, 2004, 2:04 pm
- Location: Netherlands
Re: Flyout menu does not work properly in firefox
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
-
- Posts: 4
- Joined: May 4th, 2015, 4:51 pm
Re: Flyout menu does not work properly in firefox
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
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
- Posts: 39851
- Joined: August 22nd, 2005, 7:25 am
Re: Flyout menu does not work properly in firefox
Is there JS on that page?
If yes then the original calculation may be triggered before the complete page is rendered.
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.
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.
-
- Posts: 4
- Joined: May 4th, 2015, 4:51 pm
Re: Flyout menu does not work properly in firefox
Thanks a lot for your response.
Yes there is JS on the site, is there a solution for something like that?
Yes there is JS on the site, is there a solution for something like that?
- trolly
- Moderator
- Posts: 39851
- Joined: August 22nd, 2005, 7:25 am
Re: Flyout menu does not work properly in firefox
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.
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.
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
- Posts: 11772
- Joined: December 19th, 2004, 12:26 am
- Location: Silicon Valley, CA USA
- Contact:
Re: Flyout menu does not work properly in firefox
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.
-
- Posts: 52
- Joined: July 24th, 2014, 6:02 am
- Location: Australia
Re: Flyout menu does not work properly in firefox
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) 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:
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
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();
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
-
- Posts: 4
- Joined: May 4th, 2015, 4:51 pm
Re: Flyout menu does not work properly in firefox
Thank you very much for all your answers.
Dom1953 was right with the code he supplied.
It solved the problem completely.
Dom1953 was right with the code he supplied.
It solved the problem completely.