Why is Chrome miscalculating jQuery submenu dimensions?
- by chunkymonkey
I'm trying to implement this dropdown menu with flyouts:
http://jsfiddle.net/chunkymonkey/fr6x4/
In Chrome certain categories can be expanded to show their subcategories while others show nothing when opened up.
For example:
Alternative Rock can be expanded to show its multiple subcategories . . . BUT . . .
World Music, which has as many subcategories, shows no subcategories when expanded.
(SCREENSHOT: http://i.imgur.com/0WorR.jpg)
I thought I had tracked this problem down to a problem with they way the dimensions of the dropdown elements are calculated in the original code:
First change:
- var newLeftVal = - ($('.fg-menu-current').parents('ul').size() - 1) * 180;
+ var newLeftVal = - ($('.fg-menu-current').parents('ul').size() - 1) * container.width();
Second change:
Remove:
var checkMenuHeight = function(el)
{
if (el.height() > options.maxHeight) { el.addClass('fg-menu-scroll') };
el.css({ height: options.maxHeight });
};
Add:
var checkMenuHeight = function(el)
{
var max_height = options.maxHeight - breadcrumb.getTotalHeight();
if (el.height() > max_height)
{
el.addClass('fg-menu-scroll');
el.height(max_height);
topList.height(max_height);
}
else
{
if (topList.height() < el.height())
{
topList.height(el.height());
}
}
};
But it's still not working only on Chrome (version 8, Windows & Mac) (not sure why Chrome is different).
