Hey Joel,
I think I have this sorted out. Sorry I couldn't get back to it until
this evening. Work was pretty busy today. Here is the onBeforeShow
function:
onBeforeShow = function(){
this.each(function(){
var $u = $(this);
$u.css('display','block');
var menuWidth = $u.width(),
parentWidth =
$u.parents('ul').width(),
totalRight = $w.width() +
_offset('x'),
menuRight = $u.offset().left +
menuWidth;
if (menuRight > totalRight) {
$u.css('margin-left', ($u.parents('ul').length == 1 ? totalRight
- menuRight : -(menuWidth + parentWidth)) + 'px');
}
var windowHeight = $w.height(),
offsetTop = $u.offset().top,
menuHeight = $u.height(),
baseline = windowHeight +
_offset('y');
var expandUp = (offsetTop + menuHeight
> baseline);
if (expandUp) {
$u.css('margin-top',baseline -
(menuHeight + offsetTop));
}
$u.css('display','none');
});
};
Looks like you were really close, but we need to treat the top-level
items differently from the others.
I might have a little time this weekend to look at your z-index
issues, too, but I need to get some paid work out of the way
first. ;-) .
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jan 31, 2008, at 9:42 PM, Joel Birch wrote:
Karl,
I'm honoured that you are getting some use out of Superfish.
I didn't want to give you more work so I just gave the horizontal
stuff a shot and I can't get it right. I just can't get my head around
all these similar sounding measurements! Would you be so kind...? O:)
Here's where I got to, just for a giggle:
onBeforeShow = function(){
this.each(function(){
var $u = $(this);
$u.css('display','block');
var windowWidth = $w.width(),
offsetLeft = $u.offset().left,
menuWidth = $u.width(),
totalWidth = menuWidth + _offset('x'),
parentWidth = $u.parents('ul').width(); /*I've lost where to use
this*/
var expandLeft = (offsetLeft + menuWidth > totalWidth);
if (expandLeft) {
$u.css('margin-left','-' + totalWidth - (menuWidth +
offsetLeft)+'px'); /*this ain't right*/
}
var windowHeight = $w.height(),
offsetTop = $u.offset().top,
menuHeight = $u.height(),
baseline = windowHeight + _offset('y');
var expandUp = (offsetTop + menuHeight > baseline);
if (expandUp) {
$u.css('margin-top', baseline - (menuHeight +
offsetTop));
}
$u.css('display','none');
});
}
Many thanks,
Joel.
