I should also point out that this happens in both IE7 and Firefox.
On Sep 9, 12:22 pm, oconshaw [EMAIL PROTECTED] wrote:
I'm using the superfish menu with a navigation module in dotnetnuke
that emits the page structure as an unordered list. Most pages work
fine with the menu system and
Another comment -- the issue seems to be related to certain modules
that are also included on the page. For example, there is a feedback
form on one of the pages that fails. When I take it off the page and
superfish menu load fine. Add it back and we have a problem once
again.
On Sep 9, 12:22
kinda like this?
Superfish - display2 deep and have mouseover for anything deeper
Options
http://groups.google.com/group/jquery-en/browse_thread/thread/a1ea1b8efa9d60d1/3f1a6ff2d1a2fdb2?lnk=gstq=superfish#3f1a6ff2d1a2fdb2
It isn't solved yet but we maybe can combine our discussion if it is
what
We might be trying to solve the same issue...
http://groups.google.com/group/jquery-en/browse_thread/thread/a1ea1b8efa9d60d1/3f1a6ff2d1a2fdb2?lnk=gstq=superfish#3f1a6ff2d1a2fdb2
Not at all the same, but near ))
Do you have any ideas?
I tried to edit source code, but I'm very newbie in jQuery...
There is one method, but IE braek layout of HTML template after that -
I tried to wrap li elements that I need to proccess with
SuperFish to div/div:
liThis must be always
Hi Andrew,
Superfish doesn't have the feature of being able to skip the first
level of menu. I'll consider how best to do this for a future version
of Superfish as long as it doesn't bloat the code too much. Sorry I
couldn't help.
Joel Birch.
Sorry, that response was meant for Mike - sorry for the confusion!
However, I was just about to write you a near-identical response
anyway. I'll keep your feature request in mind, but for now I'm afraid
you are out of luck with this.
Joel Birch.
Hi Andrew,
Superfish doesn't have the feature of being able to skip the first
level of menu. I'll consider how best to do this for a future version
of Superfish as long as it doesn't bloat the code too much. Sorry I
couldn't help.
Joel Birch.
Arrgh. I meant Hi Mike. Sorry.
Hello,
We would have to see your page to figure out which of your other
scripts are not playing nice with Superfish. Maybe those scripts use
the dollar symbol? If so, you could just rewrite your jQuery code to
use the 'jQuery' function name instead of '$' as they are both
equivalent to each
Hello,
Superfish does not handle closing animations. The main reason for this
is that it is surprisingly tricky to do without triggering buggy
behaviour and adding too much code bloat to handle those bugs. Doesn't
seem worth it to me.
Joel Birch.
Notice in superfish.css, this rule:
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top:2.5em; /* match top ul list item height */
z-index:99;
}
The top property dictates where the top of the first submenus
Please supply a link to your example so we can give specific help.
Here is my general help:
.sf-menu a { color:white; }
.sf-menu ul a { color:red; }
Joel Birch.
Sure. Just specify the hovers for the top level links, then override
the rest using more specific selectors to set their backgrounds to a
solid colour, or whatever you want them to be.
Joel Birch.
As shown in the Superfish documentation, you need to call supersubs()
after superfish() in the chain. Give that a go and see if it works.
Joel Birch.
You could either design the page to avoid this, or you can alter the
CSS so that the right most nav item's submenu uses right:0; , or you
could search for the 'Supposition' plugin and use that instead.
Joel Birch.
TEST
On 6 Sep., 04:11, Joel Birch [EMAIL PROTECTED] wrote:
Hi Erick,
To reduce the height of the menu, simply reduce the amount of top and
bottom padding on the anchor elements.
Your text colour problem is a little more complicated to do
cross-browser as the CSS cascade makes things
hi joel,
first of all .. thank you very much for your replay :-)
i changed the css with your solutions but still
have problems with the display of the first menu
item when hovering over a submenu.
unfortunately i am not the big css master, so
i do have enormous problems where to fix it. also i
I've made another pass at it.
http://isitsf.com/test/sfish/
For reference, you can see the original here:
http://isitsf.com/test/sfish/original/
I currently am facing two problems. One of them is general IE6
compatibility. I am at a loss as to why it's not working out there
right now - but
Thanks, the current class option is pretty cool and will be useful.
Maybe this outline of the vertical navigation I am looking for will
explain better.
Level 1 and 2 always display.
*level 1
**level 2
***(hidden till mouseover of level 2) level 3
***(hidden till mouseover of level 2) level
Hi Joel,
I'm using your last version of superfish but I'm having trouble
closing the menu with the same effects.
So right now to show it i have a slideDown and a fadeIn
({opacity:'show',height:'show'}), and I want to close it with a
slideUp and a fadeOut... I've tried in many ways but it seems
change the default .for the horizontal menu of sf-menu a { padding: .
75em 1em;} to .25em 1em and a gap will appear from the menu to where
the drop down appears. I was implementing your comment about reducing
the height of the menu by reducing the top and bottom padding on the
anchor elements.
Joel;
Thanks so much for taking the time to reply.
I have no problems with setting that element's height in ems, I just
couldn't find where in the superfish css file that height was
established. I saw a line height being set and several widths and lots
of offsets, but never found a height and I
kind of like a alwaysOpen option
Anybody?
Hi Mike,
I assume that mark-up is copied from the generated source, not the
original source, as it contains classes and elements that are added
dynamically by Superfish.
There is the pathClass option which keeps the second level menu
leading to the current page (only) open. If you set pathClass
Hi Erick,
To reduce the height of the menu, simply reduce the amount of top and
bottom padding on the anchor elements.
Your text colour problem is a little more complicated to do
cross-browser as the CSS cascade makes things tricky. The declaration
you need to override is this one:
.sf-menu a,
Hi Steve,
I think the simple answer is to size your div's height using ems also.
If you can't do that for some reason then you could just set the top
level list items elements to a fixed height in using
height:28px;overflow:hidden; and change the top and bottom padding on
the links to use px
Hi Jess,
I'm replying from my iPod so will be brief. The extra space can be
removed by deleting the padding from the .sub-with-ul class (i think
thats what it's called) within superfish.css. However, if you still
want to disable the arrows you can set autoArrows to false within the
options
Oh RAD
You rock, Joel. Thank you SO much!
Woot!
-jess
On Sep 3, 11:40 am, Joel Birch [EMAIL PROTECTED] wrote:
Hi Jess,
I'm replying from my iPod so will be brief. The extra space can be
removed by deleting the padding from the .sub-with-ul class (i think
thats what it's called)
Joel,
That fixed it. Thanks for your help.
Justin
On Aug 28, 7:43 pm, Joel Birch [EMAIL PROTECTED] wrote:
Hi Justin,
The onHide callback will fire whenever the function that hides other
submenus runs, which it does when moving from submenu to submenu.
Hence, it is not suitable for
Hello,
Yes, that sounds pretty much correct. If you want to generate the HTML
for the menu dynamically, you need to initialise Superfish after you
have done that, rather than before. Hope this helps.
Joel Birch.
Hi Justin,
The onHide callback will fire whenever the function that hides other
submenus runs, which it does when moving from submenu to submenu.
Hence, it is not suitable for detecting when the menu is completely
idle. Maybe you could add a condition to your onHide function that
checks the
Ara wrote:
Quick question (hopefully quick). I'm trying to use superfish to
create a nav bar style menu, this all works as advertised, however
I've set the width of the ul to be 960px, I'd like all the li's to
spread evenly through the entire 960px.
The default behavior is squished to the
Actually, sorry Guy, but that is not what Supersubs does.
Joel Birch.
I figured out the problem. Well, most of it.
1st I needed to use jQuery.noConflict to get around the $ issue. The
code is
var $jQ = jQuery.noConflict();
var $jQ = jQuery;
$jQ(document).ready(function(){
$jQ(ul.sf-menu).superfish({
Hello,
If for example you have 5 main menu items, you could set the top level
li elements to width:20% (or an equivalent pixel measurement) so that
the anchors, being display:block, expand to fill their li parent. You
may also want to set text-align:center on those anchors.
Good luck.
Joel
Hi Andy,
Sorry you are still having issues, but I still haven't had time to
look at this. If you could package up a set of files showing the
problem that I can debug locally I may get to it sooner. Supersubs is
still in a use-at-your-own-risk phase at the moment.
Joel Birch.
Hi,
I can't visualise your issue - can you please post a liink to the
working example?
Cheers
Joel Birch.
Hi ccollie,
I can't visualise exactly what your issue is. Can you post an example please?
Cheers
Joel Birch.
I had initially set the font-size using pixels in 3 places in the
css.
I switched those over to em units.
However, this problem is still happening in Firefox.
I also have been going over every bit of code in the js, the css, and
the html, and I am stumped.
The example on the superfish page
Thank you very much...
I tried this with another script, but at this point i didn't work.
Now it's working! Thanks again!
On 21 Aug., 03:33, ak732 [EMAIL PROTECTED] wrote:
Try adding position:relative and z-index:1 to your top_menu css.
You're welcome. Perhaps, when you tried it before, you forgot to add
the relative positioning. Without that, in IE at least, the z-index
won't be respected.
On Aug 21, 4:31 am, felix [EMAIL PROTECTED] wrote:
Thank you very much...
I tried this with another script, but at this point i didn't
On Aug 21, 2008, at 11:54 AM, ak732 wrote:
You're welcome. Perhaps, when you tried it before, you forgot to add
the relative positioning. Without that, in IE at least, the z-index
won't be respected.
Just to elaborate on this...
If you don't give an element a position -- such as
Try adding position:relative and z-index:1 to your top_menu css.
Hello Willie!!
I never used a superfish plugin, but I believe that is not so hard to
make a superfish *not* activate the drop-down,
You need to take a look in the code javascript and the css of the
plugin...Delete or change part of the code...
Instead of hover use something like onclick...
Waw this is a fast reply! Thanks for trying to help me out!
I followed your advice, made the suggested changes, added some comment
and cleaned up my code, but unfortunately the problem remains...
I threw out everything unnecessary, keeping an empty html page to be
filled with only those elements
I solved my problem!!!
My page didn't have a valid document type on top
Adding this made it work !!!
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
html xmlns=http://www.w3.org/1999/xhtml;
:-)
Thanks for helping!
On 18 aug, 15:00,
hello
for example: http://www.redbulls.com/index.php#pid__lang_de
I think this kind of menu gives a god overview over the available
services..
Michael
Actually I should be the one who should thank you for this menu. Great
work!!! As per you suggestion I tried to put fix in onShow callback
but it did not worked so far I tried this
Actually I should be the one who should thank you for coming up with
this menu, it is great. Like you said I tried to put that fix in
onShow callback but it did not worked. So far this is what I did
/
onShow:
I had to nudge some other style to get everything working. Try this
ul.sf-menu li li.sfHover ul {
left: 12em; /* match ul width */
}
ul.sf-menu li li li.sfHover ul {
left: 12em; /* match ul width */
}
and I also had to do this to get the
I had a similar issue. Try adjusting these styles.
ul.sf-menu li li.sfHover ul {
left:12em; /* match ul width */
}
ul.sf-menu li li li.sfHover ul {
left:12em; /* match ul width */
}
And I also had to add this css hack to get the shadow back in the
right place for IE6
.sf-shadow
never mind. i added this:
.sf-vertical ul {width:12em;}
and the problem went away.
On Jul 22, 11:58 am, seezee [EMAIL PROTECTED] wrote:
i'm using the latest version of superfish (1.4.7). i have both
horizontal and vertical menus on the same page. i've adjusted the
parameters on the
your page throws a few errors and I didn't see jquery being loaded,
only some plugins.
The bad news is that IE6 does not support :hover on anything except
anchor elements, and li:hover is needed for any kind of drop-down
menus to work with valid code.
The good news is that your Superfish menu is probably working perfectly!
Joel Birch
2008/7/14 DavCar [EMAIL PROTECTED]:
Thank you Joel. Solved my problem.
And I learned some valuable insights too. Much appreciated!
You are most welcome!
Still trying to wrap my head around your beautiful and suscinct
code :-) I'm still kind of new to the whole client-side of things.
My
Hello,
Glad you are liking Superfish. It seems to me that if you apply your
item padding to the anchor instead of the li element everything will
be huncky-dory. Padding should always go on the anchor - as per the
official demos.
You beat me to the toolbar/icon thing - a demo of that is planned.
Also, you need to remove the height declaration from the li elements.
The size of the menu items should always be dictated by the anchor as
this ensures that the hit area spans the full item. The li element
will shrink-wrap it automatically.
Joel Birch.
Thank you Joel. Solved my problem.
And I learned some valuable insights too. Much appreciated!
Still trying to wrap my head around your beautiful and suscinct
code :-) I'm still kind of new to the whole client-side of things.
My only remaining issue is IE7's behavior in which the dropshadow
Awesome Joel! Love the new features.
I got one quick suggestion, if you add -moz-opacity:.999; to your body
style then my screen won't experience display issues with fadein/
fadeout. (FF2 on Mac)
On Jul 10, 4:44 pm, Joel Birch [EMAIL PROTECTED] wrote:
Okay, so the drop shadows are not applied
Thanks for the nod Richard - it means a great deal to me that you like
it. Thanks for the suggestion for the text-mode fix for FF2, also.
I've moved to FF3 Mac and it seems my brain is keen to forget that
annoyance.
I've found an acceptable workaround to get the drop shadows working
for IE7 too,
-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Joel
Birch
Sent: Friday, July 11, 2008 8:09 AM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Superfish 1.4.5 released - now with drop shadows!
Thanks for the nod Richard - it means a great deal to me
Okay, the IE7 fix has been released - Superfish is now v1.4.6
(couldn't be bothered saying 1.4.5.1).
Richard, I found that adding -moz-opacity:.999 to the body of the
documentation CSS (to fix FF2 Mac) caused the fade-ins not to work in
FF3 Mac! They just popped straight to full opacity after
Hi Rick, thanks for the congrats. I checked your site in IE7 and this
is what is happening: the pngs are solid black until the animation has
fully faded in, then they switch to being transparent. This is the
same problem I had with the drop shadows, although I thought it only
occurred when the
Hi Joel
Indeed this is quite a frustrating FF bug! Your fix has not solved the
solution for FF2 Mac, I have to assume because you're checking for
browser verion 1.9 .. ?
On Jul 11, 2:16 pm, Joel Birch [EMAIL PROTECTED] wrote:
Okay, the IE7 fix has been released - Superfish is now v1.4.6
I was quite confused by why Firefox3 identifies itself as 1.9 via
$.browser.version. Any idea what I should be checking for?
Cheers
Joel Birch.
Just found this explanation (last couple of comments on the page):
http://allinthehead.com/retro/328/when-bugs-collide-fixing-text-dimming-in-firefox-2
Have altered the fix - hopefully it works now. Please scream in anguish if not.
Cheers
Joel Birch.
$.browser.version returns as string
This should work:
if ($.browser.mozilla parseFloat($.browser.version) 1.9)
$('body').css('-moz-opacity',.999);
On Jul 11, 3:17 pm, Joel Birch [EMAIL PROTECTED] wrote:
I was quite confused by why Firefox3 identifies itself as 1.9 via
That's done it :)
On Jul 11, 3:23 pm, Joel Birch [EMAIL PROTECTED] wrote:
Just found this explanation (last couple of comments on the
page):http://allinthehead.com/retro/328/when-bugs-collide-fixing-text-dimmi...
Have altered the fix - hopefully it works now. Please scream in anguish if
Thanks so much for the help Richard!
Joel.
launch. (Hopefully...if the
client will stop changing her mind!) :o)
Rick
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Joel
Birch
Sent: Friday, July 11, 2008 9:42 AM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Superfish 1.4.5
Glad to have helped! And thank you once again for a very sexy menu ;)
BTW I had no idea about the FF3 opacity issues, that fix you use is
now standard for me
On Jul 11, 3:30 pm, Joel Birch [EMAIL PROTECTED] wrote:
Thanks so much for the help Richard!
Joel.
Hi Abba,
I can only guess that you mean that in Firefox the type sometimes
shifts one pixel after the animation is complete. My experiments show
that this is likely something to do with Firefox rounding off relative
units such as em units for line-height, vertical padding and possibly
font-sizes
Hello,
Here are some previous threads you may get some hints from:
http://tinyurl.com/6qafru
http://tinyurl.com/5wcf3f
Joel Birch.
Joel,
Love the plugin, but it unfortunately isn't terrible accessible,
particularly the non-Javascript enabled IE6 user. At work, we have to
make our sites accessible to even this unfortunate user and have found
it to be very difficult and nearly impossible to replicate the true
Hi Joe,
I do appreciate your concern. However, when JS is not available in
IE6, there is no way that a menu like this can be made to work as it
does for modern browsers - at least not while using clean, semantic
and valid mark-up. Therefore, if your accessibility needs require you
to cater for
Get Firefox and install the Firebug Plugin.
It will let you inspect the DOM and see whatever generated code there is in
realtime.
It will also let you see the CSS applied to each element do see if you may
have any Z indexing issues or strange div spans.
On Mon, Jul 7, 2008 at 11:50 PM, Joel
On Tue, 8 Jul 2008 00:52:19 +1000, Joel Birch wrote:
Third release in 7 days, and like the subject says: auto generation of
submenu arrows via an added span, customisable CSS, and nicely
degradable indexed alpha-transparent png that should work for all
colour schemes and menu types. Can be
Thanks for the feedback Chuck,
I see that behaviour in Firefox (all platforms), but I'm fine with it
- and I think I have to be as I'm 95% sure there is no way around it.
It's not nearly as bad as the problem bgIframe fixes for IE6 at least.
Joel Birch.
I may have solved my issue. Before, I was calling the flash file in
with object (swfobject static publishing default). On a whim, I
decided to try and call the Flash file with the dynamic method of
swfobject. As a result, my Superfish menu now appears correctly. Here
is my code for reference:
This is interesting. I wonder if you can track down the differences in
the generated source between the two methods of embedding? That would
be great to know.
Thanks for the info Chad!
Joel Birch.
Hello,
Looks like you just need to do general IE CSS debugging. It's easy to
trigger IE bugs when creating these menus, that's why I strongly
advise beginning with the Superfish CSS file and build from that
whilst checking IE at every step along the way. That way, when IE
borks you know exactly
The latest version of Superfish (version 1.4.2 - released a couple
days ago) does this by default now.
Joel Birch.
This is really nice Joel.
The css are well structured and I think easy to understand.
Since it is a prerequisite to use superfish, perhaps you may consider
adding a link to a pure css menu article (or to an exemple in your
site). Overall the superfish package is very slick to use.
I have
Thanks Olivier!
Regarding the link to a pure CSS menu article, there is a link to A
List Apart article on the word suckerfish close to the top of the
Overview section as soon as you enter the page. Also, obviously the
demo CSS files do all the work for you anyway.
Regarding the 1px jump on
Hi MossyOwls,
I've done this a couple of times. It was pretty easy but I can't
remember off the top of my head. You might be able to figure it out
from studying these two examples:
http://www.blushtomatoes.com.au/about/
http://www.strathcona.vic.edu.au/
Good luck.
Joel Birch.
Hello,
How about this - or something very like it:
$(document).ready(function() {
$('ul.nav').superfish().click(function(){
$(this).hide();
});
});
I guess clicking anywhere in the nav is suitable. Might not need to
attach the click handler to the links really. You may want to
Sorry - I interpreted your request wrong I think. Try this instead:
$(document).ready(function() {
$('ul.nav').superfish(/*options if required*/).find('li').click(function() {
$(this).hideSuperfishUl();
});
});
...untested, but you never know your luck. Actually, you can
Thanks Joel, you rock.
I ended up going with
$(document).ready(function() {
$('ul.nav').superfish().click(function(){
$(this).find(ul).hide();
});
});
So the original menu is still there, sometimes new items open in a new
window, so I didn't want
I found the solution, though the solution that I found requires non-
semantic code. The issue occurred when I deleted entirely a nested UL
from an LI. I did this because that particular top-level LI had no
sub-items. In other words, no second-level navigation was to appear
under that top-level
Carleigh,
that is a excellent example of what can be achieved with Superfish,
thanks for sharing
Davd Buchholz
Hi Carleigh,
Thanks for the kind words - I do remember our previous correspondence.
Your site is fantastic. Amazing how many links you have managed to
show on the home page. I haven't seen that type of multi-column menu
using Superfish before, but I have been wanting to see if it could be
done.
Not sure it will ever come across, but if someone else asks, you can
center this by just using some oldschool layout methods
table cellpadding=0 cellspacing=0 border=0 align=center
trtd
just thought i'd share. I've tested this and it centers the nav
beautifully. Nothing else I've tried
You know, I actually did that once... I seem to be having some local
issues w/file redundancy... Regardless, I've made the change, and
there is still no animation. Now the error console doesn't throw that
odd amp;amp; anymore, however.
Any other ideas?
On Jun 5, 4:19 am, Joel Birch [EMAIL
wow, some odd encoding happened on my end, changed all the to gt;
and so on. I've since just pulled down a new copy of the superfish.js
and it works perfectly. Thank you for taking the time to help me
out. You've built something outstanding here, and it's guys like you
that make guys like me
great, that will work. thanks.
OK - figured it out. I had the menu and its grandparent set to
position relative which I removed (to restore static positioning) and
then wholia - back in business. This link helped:
http://verens.com/archives/2005/07/15/ie-z-index-bug/
On Jun 10, 8:04 pm, Geoff Hankerson [EMAIL PROTECTED]
Hi Warren,
For those types of menu, I work around this by adding an unnecessary
child to main nav items that otherwise would have none. I use the
extra child to point to the same page as it's parent and also provide
slightly more info in the link text. An example of this can be seen
here:
To all who would read this, nevermind. I did read a little closer in
the documentation for Superfish and it mentions the ability for
Superfish to integrate with hoverIntent.js which has the delay on
mouseover functionality...rock on. Thank you Joel Birch(Superfish) and
Brian
601 - 700 of 972 matches
Mail list logo
