google-code-export / sparkyframework

Automatically exported from code.google.com/p/sparkyframework
1 stars 0 forks source link

Responsive menu not functioning in IE or Firefox #3

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
What steps will reproduce the problem?
1. Open a website using the responsive menu.
2. Resize window to different widths.

What is the expected output? What do you see instead?
In Firefox and IE the menu wraps around the available space instead of being 
transformed into the alternative menu.

What version of the product are you using? On what operating system?
Joomla 2.5.8, Windows 8, Firefox 17.0.1 & IE 10

Please provide any additional information below.
Firefox and IE deal with Html Lists differently than Crome or other browsers, 
they wrap the List entries on the webpage. The only way to prevent the wrap is 
to fix the width of the UL tag, which is difficult to implement in a dynamic 
template system as sparky.

After trying several different approaches to fix this issue, including using 
offset().top to determine when a menu button has been wrapped, I realised a 
very simple solution which should not cause any adverse effects in any 
unaffected browser.

I noticed that when the menu buttons were being wrapped, the 
topMenuContainerWidth was exactly 10px higher than the topmenuWidth.
So in responsive_menu.js, Line 6 I changed the line
from:
    if(topMenuWidth > topMenuContainerWidth) {
to
    if(topMenuWidth+10 >= topMenuContainerWidth) {

The responsive menu then worked perfectly.

Original issue reported on code.google.com by Stewart...@gmail.com on 10 Dec 2012 at 1:04

GoogleCodeExporter commented 9 years ago
The 10 pixels I added are due to the 'Global Horizontal Cell Margin' I had set 
to 10 pixels. Increasing the value broke the fix, so it would mean that the 
div.cell_pad margin value should replace the fixed 10 pixels. 

Original comment by Stewart...@gmail.com on 10 Dec 2012 at 1:24

GoogleCodeExporter commented 9 years ago
Changed now to
    var topMenuCellPadMargin = parseInt(jQuery("div.cell div.cell_pad").css("margin-left"));

    if(topMenuWidth+topMenuCellPadMargin >= topMenuContainerWidth) {

which now makes the fix work with any value of 'Global Horizontal Cell Margin', 
I hope.

Original comment by Stewart...@gmail.com on 10 Dec 2012 at 1:43

GoogleCodeExporter commented 9 years ago
The Fix implemented works ok in firefox, though in internet explorer there is 
still some wrapping when the 'Global Horizontal Cell Margin' is set. If the 
menu is just a few pixels greater than the window width then it was still wrap 
on internet explorer.

Original comment by Stewart...@gmail.com on 13 Dec 2012 at 12:07