[jQuery] Re: Newbie: Superfish menu help
Thanks Jason, you are most welcome. And I am flattered that you like my stuff. :) Joel. On 07/06/2007, at 2:12 AM, JLuther wrote: Joel, Thank you! You are the Man! I hadn't had a chance to check on this issue since my second post yesterday, so I'm sorry you were replying to yourself. Thanks for pointing out the issues with the CSS, too. I got so frustrated with my poor JavaScript skills (lack thereof) that I totally overlooked that part of the problem was with the H in sfHover. Now it's working in Firefox, I've got to do some work to get IE on board. I'll check out the CSS example on the Superfish page. Thanks again for all your help. The Superfish plugin is great. By the way, your Blush Tomatoes site is a work of art, incredible. Jason Luther On Jun 5, 10:37 pm, Joel Birch <[EMAIL PROTECTED]> wrote: On 06/06/2007, at 12:22 PM, Joel Birch wrote: Then the only problem you have is CSS related. Your submenu widths are sort-of collapsed until fully animated in, and then they suddenly go to their proper width. I have experienced this before and it can be solved by making sure that all the submenu's elements are given explicit widths and making sure that the a, li and ul elements' padding and widths add up to the same total width. I can't remember exactly which of those elements is the culprit but it just takes a bit of tweaking to get perfect. If you change the width for the selector '#nav li ul' from 150px to 225px, the collapsing widths problem is solved also. The menu should now be perfect in Firefox. The timed delay of one second really helps the usability of you menu! Because there are so many links tightly-packed together, negotiating to the nested submenus can get really tricky without the timed delay, but with it you can mouse diagonally and cut corners making the experience far less infuriating. Thanks for using Superfish, Jason. Let me know if you have any more issues. Until then, I had better stop replying to myself ;) Joel Birch.
[jQuery] Re: Newbie: Superfish menu help
Joel, Thank you! You are the Man! I hadn't had a chance to check on this issue since my second post yesterday, so I'm sorry you were replying to yourself. Thanks for pointing out the issues with the CSS, too. I got so frustrated with my poor JavaScript skills (lack thereof) that I totally overlooked that part of the problem was with the H in sfHover. Now it's working in Firefox, I've got to do some work to get IE on board. I'll check out the CSS example on the Superfish page. Thanks again for all your help. The Superfish plugin is great. By the way, your Blush Tomatoes site is a work of art, incredible. Jason Luther On Jun 5, 10:37 pm, Joel Birch <[EMAIL PROTECTED]> wrote: > On 06/06/2007, at 12:22 PM, Joel Birch wrote: > > > Then the only problem you have is CSS related. Your submenu widths > > are sort-of collapsed until fully animated in, and then they > > suddenly go to their proper width. I have experienced this before > > and it can be solved by making sure that all the submenu's elements > > are given explicit widths and making sure that the a, li and ul > > elements' padding and widths add up to the same total width. I > > can't remember exactly which of those elements is the culprit but > > it just takes a bit of tweaking to get perfect. > > If you change the width for the selector '#nav li ul' from 150px to > 225px, the collapsing widths problem is solved also. The menu should > now be perfect in Firefox. > > The timed delay of one second really helps the usability of you menu! > Because there are so many links tightly-packed together, negotiating > to the nested submenus can get really tricky without the timed delay, > but with it you can mouse diagonally and cut corners making the > experience far less infuriating. > > Thanks for using Superfish, Jason. Let me know if you have any more > issues. Until then, I had better stop replying to myself ;) > > Joel Birch.
[jQuery] Re: Newbie: Superfish menu help
On 06/06/2007, at 12:22 PM, Joel Birch wrote: Then the only problem you have is CSS related. Your submenu widths are sort-of collapsed until fully animated in, and then they suddenly go to their proper width. I have experienced this before and it can be solved by making sure that all the submenu's elements are given explicit widths and making sure that the a, li and ul elements' padding and widths add up to the same total width. I can't remember exactly which of those elements is the culprit but it just takes a bit of tweaking to get perfect. If you change the width for the selector '#nav li ul' from 150px to 225px, the collapsing widths problem is solved also. The menu should now be perfect in Firefox. The timed delay of one second really helps the usability of you menu! Because there are so many links tightly-packed together, negotiating to the nested submenus can get really tricky without the timed delay, but with it you can mouse diagonally and cut corners making the experience far less infuriating. Thanks for using Superfish, Jason. Let me know if you have any more issues. Until then, I had better stop replying to myself ;) Joel Birch.
[jQuery] Re: Newbie: Superfish menu help
Hi again Jason,
I have your superfish menu working within Firefox using Firebug. If
you fix the points I mentioned in my previous emails you will find
that it mostly works. What doesn't work is the delay on mouseout and
I have tracked that down to the fact that in your CSS you are
spelling sfHover as sfhover. If you fix that in the CSS the menu now
works perfectly. Or, if you prefer to use 'sfhover' (no cap H), feed
it in to override the default for Superfish via the options:
$(document).ready(function() {
$('#nav').superfish({
delay : 1000,
hoverClass : 'sfhover'
});
});
Then the only problem you have is CSS related. Your submenu widths
are sort-of collapsed until fully animated in, and then they suddenly
go to their proper width. I have experienced this before and it can
be solved by making sure that all the submenu's elements are given
explicit widths and making sure that the a, li and ul elements'
padding and widths add up to the same total width. I can't remember
exactly which of those elements is the culprit but it just takes a
bit of tweaking to get perfect.
You may also find that certain other browsers do not like things like
'left: auto;' to move the submenus into place, which is why I use
'left: 0;' or the like instead. For other browser CSS issues, maybe
look at the original Superfish CSS example file for solutions, as
that demo is tested in everything except Linux browsers, which I
don't have access to.
Good luck. I can't wait to see your menu working perfectly!
Joel Birch.
[jQuery] Re: Newbie: Superfish menu help
Whoops, sorry Jason - you're not Andy!
Anyway, another thing that is stopping your code from working (in
addition to my previous point about the closing bracket etc.) is that
the div that contains your nav has an id of 'nav', not a class.
Therefore, you need to change your code to:
$(document).ready(function() {
$('#nav').superfish({
delay : 1000
});
});
...and then possibly change any CSS that may be trying to work
on .nav to #nav.
Joel Birch.
[jQuery] Re: Newbie: Superfish menu help
On 06/06/2007, at 7:35 AM, JLuther wrote:
Andy,
Thanks, I tried adding the curly brace, but still no change in FF. The
menu won't even display in IE7 now.
Hi Andy,
You are actually missing the closing bracket (not curly this time)
and semicolon for the $(document).ready() function. Insert ); after
the last curly bracket that appears before the closing tag.
You are calling the options correctly, except just a tip: you only
need to set the options that you want to override the defaults,
therefore you could call your superfish like this:
$(document).ready(function() {
$('ul.nav').superfish({
delay : 1000 /* <-- this is the only option that differs from the
defaults*/
});
}); /* <-- you are missing this closing bracket and semicolon*/
Hope you get it working. Nice site by the way.
Joel Birch.
[jQuery] Re: Newbie: Superfish menu help
Andy, Thanks, I tried adding the curly brace, but still no change in FF. The menu won't even display in IE7 now. On Jun 5, 4:09 pm, "Andy Matthews" <[EMAIL PROTECTED]> wrote: > In IE 7 and FF2 for the PC, I get a JS error when I load that page. > > Looks like you might be missing a closing curly brace around line 21. > > -Original Message- > From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On > > Behalf Of JLuther > Sent: Tuesday, June 05, 2007 2:56 PM > To: jQuery (English) > Subject: [jQuery] Newbie: Superfish menu help > > Hi, > > I'm new to JavaScript and jQuery, so I apologize if I sound like an idiot. I > am trying to set a delay for when the mouse rolls off a menu, but I don't > seem to be able to get it to work right. You can view the drop down menu and > see how Superfish was called at href="http://www.bluefilamentdesign.com/haverford-new.html";>http://www.bluefilamentdesign > .com/haverford-new.html. > > I've tried many combinations, but have just reverted to the default settings > for lack of anything else to think of. > > Any clues would be greatly appreciated. Thank you in advance, > > Jason Luther
[jQuery] Re: Newbie: Superfish menu help
In IE 7 and FF2 for the PC, I get a JS error when I load that page. Looks like you might be missing a closing curly brace around line 21. -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of JLuther Sent: Tuesday, June 05, 2007 2:56 PM To: jQuery (English) Subject: [jQuery] Newbie: Superfish menu help Hi, I'm new to JavaScript and jQuery, so I apologize if I sound like an idiot. I am trying to set a delay for when the mouse rolls off a menu, but I don't seem to be able to get it to work right. You can view the drop down menu and see how Superfish was called at http://www.bluefilamentdesign .com/haverford-new.html. I've tried many combinations, but have just reverted to the default settings for lack of anything else to think of. Any clues would be greatly appreciated. Thank you in advance, Jason Luther
