[jQuery] Re: Superfish Feature Request
Have a look at this Superfish extension called Supposition. It is an effort to achieve exactly what you are asking for, although it comes with no guarantees or support. http://users.tpg.com.au/j_birch/plugins/superfish/supposition-test/ Joel Birch.
[jQuery] Re: Superfish Feature Request
Awesome! Thank you Joel. On Nov 6, 7:10 am, Joel Birch [EMAIL PROTECTED] wrote: Have a look at this Superfish extension called Supposition. It is an effort to achieve exactly what you are asking for, although it comes with no guarantees or support. http://users.tpg.com.au/j_birch/plugins/superfish/supposition-test/ Joel Birch.
[jQuery] Re: Superfish feature request
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.
[jQuery] Re: Superfish feature request
Hi Karl, You've come through with the goods again, I really appreciate you taking the time to help with this - especially after attempting to do it myself! I found that no amount of coffee seemed to help, which is strange. Regarding the z-index issue, I found that the code in onInit has no useful effect (at least in Firefox, which is all I have tested this plugin-plugin in). I commented that code out and attempted to get the z-index stuff right just by changing the code in the menu's CSS file. I even tried adding suitable z-indexes to every element in the menu and making sure that each one was positioned in some way other than 'static'. Nothing I came up with worked which was surprising and a bit disheartening. I'm sensing some sort of absolute-positioning-with-z-index shortcoming that I don't know the details of. I'm thinking that if it can't be done with pure CSS then it probably can't be done via JS that merely adds inline z-indexes which seems to be the aim of Jesse's original code. I might have to let this slosh around in my head for a while and hope something crystallises. There's no rush to complete this as far as I know. Karl, please don't feel like I'm expecting further input from you - I know you are a busy man and this is really just a frivolous-hobby-type project. Test files have been updated. Cheers! Joel Birch.
[jQuery] Re: Superfish feature request
Quick update,
I have done some more work on this code so now you can simply apply
the positioning plugin to Superfish like a regular plugin, which is
much easier for the user than how it was done before:
$(function() {
$('.nav').superfish().supposition();
});
You could even apply it later on (although I'm not sure why you would):
$(function() {
$('.nav').superfish();
/* later that day... */
$('.nav').supposition();
});
So as long as you attach Supposition after you have attached
Superfish, it works.
Thanks to Karl Swedberg's advice and code to get the correct page
offsets the positioning bug we have been pondering is partially fixed.
Notice on the main demo page where the menu is way down the page you
can actually see the submenus now so they are being positioned
properly. Thanks Karl.
However, all is not well. There are still situations when the submenus
are positioned too high. It seems to be when the window is constrained
to an area in the middle of a long document. See this screengrab for a
scenario where this happens:
http://users.tpg.com.au/j_birch/plugins/superfish/supposition-test/img/screengrab.png
The test page featured in that image is this page:
http://users.tpg.com.au/j_birch/plugins/superfish/supposition-test/menuAtTop.html
I think a similar problem would happen with the horizontal axis also.
Karl has suggested we look at the ClueTip code for further hints so
I'll do that next time I gather my meagre brain-power to have another
go at this.
The z-index bug is still untouched. If anyone wants to have a fiddle
with this stuff, here is a link to a Zip archive containing all the
test files, set up and ready to run locally.
http://users.tpg.com.au/j_birch/plugins/superfish/supposition-test.zip
Cheers
Joel Birch.
[jQuery] Re: Superfish feature request
hey Joel,
This is fun!
I think this should do it for the vertical stuff. You can apply
something similar for the horizontal :
snippet
var windowHeight = $w.height(),
offsetTop = $u.offset().top,
menuHeight = $u.height(),
baseline = windowHeight +
_offset('y'); // -- ADDED
var expandUp = (offsetTop + menuHeight
baseline); // -- MODIFIED
if (expandUp) {
$u.css('margin-top', baseline - (menuHeight + offsetTop)); //
-- MODIFIED
}
/snippet
extra parentheses in that last modified line not needed, of course.
They just help me visualize what's going on.
Cheers,
--Karl
On Jan 31, 2008, at 10:13 AM, Joel Birch wrote:
Quick update,
I have done some more work on this code so now you can simply apply
the positioning plugin to Superfish like a regular plugin, which is
much easier for the user than how it was done before:
$(function() {
$('.nav').superfish().supposition();
});
You could even apply it later on (although I'm not sure why you
would):
$(function() {
$('.nav').superfish();
/* later that day... */
$('.nav').supposition();
});
So as long as you attach Supposition after you have attached
Superfish, it works.
Thanks to Karl Swedberg's advice and code to get the correct page
offsets the positioning bug we have been pondering is partially fixed.
Notice on the main demo page where the menu is way down the page you
can actually see the submenus now so they are being positioned
properly. Thanks Karl.
However, all is not well. There are still situations when the submenus
are positioned too high. It seems to be when the window is constrained
to an area in the middle of a long document. See this screengrab for a
scenario where this happens:
http://users.tpg.com.au/j_birch/plugins/superfish/supposition-test/img/screengrab.png
The test page featured in that image is this page:
http://users.tpg.com.au/j_birch/plugins/superfish/supposition-test/menuAtTop.html
I think a similar problem would happen with the horizontal axis also.
Karl has suggested we look at the ClueTip code for further hints so
I'll do that next time I gather my meagre brain-power to have another
go at this.
The z-index bug is still untouched. If anyone wants to have a fiddle
with this stuff, here is a link to a Zip archive containing all the
test files, set up and ready to run locally.
http://users.tpg.com.au/j_birch/plugins/superfish/supposition-test.zip
Cheers
Joel Birch.
[jQuery] Re: Superfish feature request
Hi Karl, Once again you have come through with the goods! I blindly pasted in your code (all these dimension calculations fry my brain) and it's working perfectly with regard to positioning. All hail King Karl [...we're not worthy...] All we (Jesse and I, that is - I'm not hinting for Karl to do it!) need to do now is rewrite the z-index code so that revealed submenus always appear above the rest of the menu. Then I think we can put this little exercise to bed. Zip archive (linked above) and test page has been updated. Cheers Joel Birch.
[jQuery] Re: Superfish feature request
On Jan 31, 2008, at 8:50 PM, Joel Birch wrote: Hi Karl, Once again you have come through with the goods! I blindly pasted in your code (all these dimension calculations fry my brain) and it's working perfectly with regard to positioning. All hail King Karl [...we're not worthy...] LOL. You are too funny! Your Superfish plugin is really fantastic, by the way. I've been using it on a couple sites, and the clients are duly impressed. :-) Anyway, I'm really glad it's working for you. Don't forget to mirror those changes for the scrollLeft calculations as well. Unless you want me to do that. I'd be happy to. All we (Jesse and I, that is - I'm not hinting for Karl to do it!) need to do now is rewrite the z-index code so that revealed submenus always appear above the rest of the menu. Then I think we can put this little exercise to bed. Zip archive (linked above) and test page has been updated. Great news. Congrats! --Karl
[jQuery] Re: Superfish feature request
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.
[jQuery] Re: Superfish feature request
Hi Jesse, I have been working on separating out the code you provided into it's own plugin (kind of sillily named Supposition, I really hate the name now so please feel free to suggest something better) so that it can be optionally added to a Superfish menu if the user desires, leaving the original code more or less untouched (and easier for me to maintain). I also resolved a few other issues such as a so-so workaround for the text jog issue, etc. and I also found that $(window).height() wasn't working on pages with more content than you had on your demo page, so I added in a snippet from the Dimensions plugin to get a correct viewport value. The main issue now (in addition to the z-index issues) is that the offset value for the vertical position of the submenus does not take into account the scroll position of the document. You can see on my main demo page that the menu appears way down the page, so when you hover the menu the submenus appear way up the page, usually outside the viewport completely unless you have the browser window maximised and are running a high screen resolution. I'm hoping that you understand how to fix this as I am lost when it comes to this type of stuff. Below is a link to my demo page with an extensive rant/explanation of where we are currently at with this idea. At the bottom of that page there is also a link to a zip file containing all the files for my demo so you can have an experiment yourself if you feel up to it. Any and all feedback is gladly received. http://users.tpg.com.au/j_birch/plugins/superfish/supposition-test/ Cheers Joel Birch.
[jQuery] Re: Superfish feature request
You're right, this is the quirk I'm talking about. I'm on Windows myself, so I have been referring to Windows Firefox. I'm still puzzled by this :| I hope we (or someone else) will be able to work this out.
[jQuery] Re: Superfish feature request
And a little update, as it seems to work great now (tested in IE6, IE7 and FF2): http://www.klaasse.net/superfish-ext/superfish.html I'm not totally satisfied yet, because: - I'm using + 1 in my calculations to include border/margin/padding stuff in the width() and height() results; - There's some strange right-border redrawing going on, which I can't explain; - As you may have noticed, there appear little arrows when a menu has a submenu. However, they disappear when one 'mouseover's the menuitem. Any suggestions / opinions / whatever? Maybe Joel can include something like this in the next release of Superfish. Feel free to use it! From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Jesse Klaasse Sent: Wednesday, January 02, 2008 4:25 PM To: jquery-en@googlegroups.com Subject: [jQuery] Superfish feature request Importance: Low I am thoroughly enjoying the Superfish menu.. However, I would love to see the following option: when a submenu falls outside of the window, it's position should be adapted in order to fit. Just like most operating systems handle menus when they don't fit.. Would this be possible? It could be called something like 'forceFit' or so.. Thanks in advance! (The simplest approach would probably be to check if a ul's offset left plus it's width exceeds the window width, and adjust x position accordingly.. Likewise, this could be done for the vertical position)
[jQuery] Re: Superfish feature request - pixelshift/redraw bug
This issue has something to do with the animation. When I replace the animation with a simple show() method, there's no pixel shift anymore.. * There's some strange submenu text pixel-shift (FF only) and right border redrawing (both IE and FF) going on, which I can't explain. However, this also seems to happen using the original Superfish menu! Maybe this is a common jQuery animation related bug? I have already tried the beta of 1.2.2, but unfortunately that didn't help..
[jQuery] Re: Superfish feature request
Hi Jesse, Sorry I have been unresponsive - I've been too busy with work etc. which is unfortunate because I think what you have done here is fantastic. I wish I had more time now to discuss this new feature indepth but, alas, I have to race off to work again :/ Regarding the border redrawing, this is most likely due to the border not being included in the CSS values for width on elements like li and ul. I know it's tricky to include pixel units into an em value, but I find just adding .1em or .01em or something in between to those widths generally solves the problem. Again, I wish I could go on. I'll try and find time on the weekend to reply more fully. I'm thinking we could make this code into a module that can be added onto Superfish as an option. A plugin for a plugin. Cheers Joel Birch.
[jQuery] Re: Superfish feature request
Oh, and the pixel-shift problem in FF is most likely the now fairly well documented opacity triggered text-mode quirk of that browser (on Mac at least). I wouldn't worry about that - it will always occur whenever any on-screen element's opacity switches between 1 and . or .01 and 0 - as it does with fadeins. Joel Birch.
[jQuery] Re: Superfish feature request
One more thing I just thought of. Regarding finding a more robust solution for the width() and height() offsets, this value will always depend on the CSS the designer uses for the menu so I think the lesser evil here would be to add some offset options to the options object so you can pass in values to suit a particular menu when calling the plugin. Joel Birch.
[jQuery] Re: Superfish feature request - pixelshift/redraw bug
Hi Jesse, I'm at work, but I did a search for an explanation of the Mac Firefox text flicker issue that I posted previously. Here it is: Mac Firefox has two text rendering anti-aliasing modes, one of which makes the text look much lighter or less bold in weight. The usual mode is used when everything on the page has an opacity of 1, or fully opaque. The moment anything drops to 0. opacity, as it does on fadeOut (although this is not a jQuery issue - it's any form of opacity) all the text on the page shifts to the lighter text rendering mode. The reverse also occurs on fadeIn and also between .0001 and 0, that is, just as something becomes completely transparent. It's annoying and the only two workarounds are (1) to set opacity: .999 on the body element which forces all the text on the page to use the light rendering mode 100% of the time and never switch to the bolder mode. This sometimes looks quite good when the design has dark text on a light background. It wouldn't do for light text on dark though, as the text just becomes far too thin and begins to lose readability. The other (2) workaround is to avoid using opacity in the animation completely and using a simple slideDown instead. Cheers Joel Birch.
[jQuery] Re: Superfish feature request
It just dawned on me that you probably were not referring to the Mac FF text mode shift caused by opacity changes. I see now that the menu item text shifts upward one pixel once the fadein animation has completed. When using the default font (Georgia or maybe Times on the computer I'm currently using) the text shifts left one pixel, and when I click your handy use Verdana link it shifts up one pixel and also left one pixel. I've seen this behaviour before but haven't figured out exactly why it happens. Interestingly, depending on the vertical padding of the list items in the menu, sometimes it's not all of the items' text that shifts. So sometimes only every second items' text shifts after the animation is complete, as if the text wants to round-off it's x and y position in order to fit into some sort of preferred (by Firefox) pixel grid. Food for thought. I think it's possible that this is another Firefox quirk that can't be fixed, although hopefully there is a workaround. Just out of interest - are you referring to Mac Firefox, Windows Firefox, or both? I can't test Windows where I currently am. Joel Birch.
[jQuery] Re: Superfish feature request
I have written some test code, which does what it's meant to do, but I
think it isn't in the right place..
I have added this code to the default options block of superfish.js:
autofitX: true,
autofitY: true,
And this code instead of the original showSuperfishUl part:
showSuperfishUl : function(o){
return this
.addClass(o.hoverClass)
.find('ul:hidden')
.css('visibility','visible')
.animate(o.animation,o.speed,function(){
o.onshow.call(this);
if (o.autofitY) {
var menuHeight = $ul.height();
var expandUp = ($ul.offset().top + menuHeight
$(window).height());
if (expandUp) $ul.css(margin-top,($(window).height() -
menuHeight - $ul.offset().top) + px);
}
})
.each(function(){
$ul = $(this);
if (o.autofitX) {
var menuWidth = $ul.width();
var parentWidth = $ul.parents('ul').width();
var expandLeft = ($ul.offset().left + menuWidth
$(window).width());
if (expandLeft) $ul.css(margin-left,- + (menuWidth +
parentWidth) + px);
}
})
.end();
},
This works, however, I don't think it's the correct place to perform
these actions. Any opinions?
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Jesse Klaasse
Sent: Wednesday, January 02, 2008 4:25 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Superfish feature request
Importance: Low
I am thoroughly enjoying the Superfish menu.. However, I would love to
see the following option: when a submenu falls outside of the window,
it's position should be adapted in order to fit. Just like most
operating systems handle menus when they don't fit.. Would this be
possible? It could be called something like 'forceFit' or so.. Thanks in
advance!
(The simplest approach would probably be to check if a ul's offset
left plus it's width exceeds the window width, and adjust x position
accordingly.. Likewise, this could be done for the vertical position)
