Hi Joel,
Thanks for your respond.
I did not provide you with information about the situation when this
behaviour occurs:
On windows XP using Firefox 2.0.
Strangly enough when using IE 6 and 7, it does show the url on the
statusbar.
Looks like a crossbrowser issue within jquery?
Anyway,
Firebug shows errors - the first one is the problem. It seems that at
some point the ampersands in the Superfish code have been encoded as
$amp; which is breaking the script.
Please search for this:amp;amp;
and change it to this:
Then it will work perfectly.
Joel Birch.
Hi Ruud,
This is interesting. I do see that behaviour in Mac Firefox although
when you mouseout from a submenu and then back onto it before it
disappears the status bar then does show the correct link. In Safari
(also Mac) the problem you does not exist at all. I haven't checked
what IE does
Hi Joel-!
ok - found another problem.
http://lhc.lucidcrew.com/ministries
the first and last menu items have no sub-nav, so on rollover, it
highlights the active tab and pops its subnav open. how do I avoid
this from happening?
hi Joel -
thanks for the response. I couldn't get it to work, so I just hid the
3rd level for now :(
the 3rd level still retains the display:block and mouseout
I don't see any errors on the demos. What is the url you are getting
errors one?
Do you have the bgiframe plugin installed too?
GET /css/bgIframe.js
these errors look like they are from an incorrect call of the js doc
from your html...
ET /css/css/css/css/
do you have something like this?
Hi Warren,
Sorry for the delay in responding. This sounds like the same issue
recently discussed here:
http://groups.google.com/group/jquery-en/browse_thread/thread/41fd759a678f6dcc
The solution was found in that thread. The quick answer is to use
Superfish 1.4.2beta which you can find here:
Hi Vincent,
This sounds like the IE z-index bug. Here are a few previous threads
from this list which address it.
http://groups.google.com/group/jquery-en/browse_thread/thread/826e8157b5fcf6a1/2dffd08fb21309fe?lnk=gstq=ie+z-index+bug+superfish#2dffd08fb21309fe
Hello,
I currently only had time for a quick scan of your code. Things seem
to be quite in order except that the nav class needs to be set on
the ul not the parent div. This will definitely cause the menu not to
function so try changing that and see how you go.
Also, you only need to apply the
Hi Joel,
Thanks for your quick reply. That's makes sense. Now my code is ul
class=nav and it's working fine in both IE6 and FF.
I added the bgiframe just in case the menu was blocked by the
background image. Also, on this page, I was having problems with the
menu blocking the podcast player :
Thanks Joel! It worked like a charm. No more animation.
PS: Thanks for making this plugin. Using the plugin was my first real
experience with JavaScript and Jquery. I addded a bunch of additional
functionality to it and it was an awesome learning experience. I made
the menu of my dreams :)
On
at the beginning of the superfish.js, you'll see a list of function
variables.
In there, you'll see an 'animation' entry. I think the default is
'{opacity:'show'},'.
I don't know what the options are, but i'd set that to false and see
how it goes.
On May 21, 7:08 am, Ed [EMAIL PROTECTED]
Hi Ed,
The option you need to change is the speed option. For example, you
could initialise Superfish like this:
$(document).ready(function(){
$('ul.nav').superfish({
speed : 1
});
});
Setting speed to 1 will make the animation occur at the speed of 1
millisecond ie. instantly.
Hi Iuilian,
I just had another go at achieving semi-transparency for all submenus,
but alas IE seems to have outwitted me on this one. It simply refuses
to apply any sort of transparency to elements whose parents already
have a transparency filter applied to them. I tried everything I could
Thanks for your response. Just so I'm clear, right now I have my
normal and rollover states as two separate images:
http://www.remanresource.com/images/nav_03.gif
http://www.remanresource.com/images/nav_03-over.gif
From what I'm reading from your post, I'd need to combine these into a
single
You don't have to combine them but if you don't you will get a delay
as the second image (hover state) loads for the first time you
mouseover. If you don't mind this (or you preload the hover images
some other way) then use this css instead:
#aboutus a { background: transparent
I found a way around what I was trying to do, though it would still be
useful to be able to add a hover class to LI's without nested UL's, to
help get past IE6's lack of hover support.
On May 14, 9:38 am, rolfsf [EMAIL PROTECTED] wrote:
The superfish plugin, from what I can tell, only adds the
Try adding this:
$(document).ready(function(){
$('ul.nav li').not(':has(ul)').hover(
function(){ $(this).addClass('sfHover'); },
function(){ $(this).removeClass('sfHover'); }
);
});
That should add the hover class to the remaining li elements. Often,
it is enough that the link
Hi Dave,
If you can throw an id on each main menu item you could do something
like this for each one (assuming you put the un-hovered and hovered
states in the same image, say 100px apart along the y axis):
#aboutus a { background: transparent url(aboutus.jpg) no-repeat 0 0; }
#aboutus:hover a,
Hello,
Very useful plug in btw.
My JS knowledge is about zero, so I tried to create some transparency
by adding to the CSS the following
.nav li li {
opacity: 0.9;
-moz-opacity: 0.9;
filter: alpha(opacity=90);
}
This works entirely in FF but only the second level works
Joel,
It looks like you nailed it. You can see the working menu here:
http://secure2.vqcdesigns.com/~hbgrc/
The only other issue I could find is that IE6 disregards the child
selectors for the active state on the main tabs, but that's obviously
not your doing.
I can't thank you enough for
I'm really happy to hear that we solved this issue and that you are
pleased with the end result. I appreciate your offer of a donation,
but that's not necessary thanks all the same. Your issue helped to
solidify the pathClass feature so it was a good exercise - cheers!
Joel Birch.
Hi Iulian,
IE can only apply one filter to an element at any one time and the
code that jQuery uses to fade-in something uses up that one
opportunity. Therefore, when you apply filter:(opacity=90); in the CSS
problems occur when JS wants to also apply filter to that element.
That is my
thanks ;)
2008/5/13 Joel Birch [EMAIL PROTECTED]:
I think you are experiencing a library conflict as both jQuery and
Prototype both want to use $. By the time you initialise Superfish,
the dollar symbol has been hijacked by Prototype and no longer works
for jQuery. A quick solution is to
I think you are experiencing a library conflict as both jQuery and
Prototype both want to use $. By the time you initialise Superfish,
the dollar symbol has been hijacked by Prototype and no longer works
for jQuery. A quick solution is to change your initialisation code to
this:
/* use jQuery
One more suggestion to really hit your menu out of the park. Try
adding something like this type of thing:
.item62.sfHover a {
background-image: url(../images/nav-regional-chamber-over.jpg);
}
...to your main tabs so that the 'active' look is applied to them.
Sorry I had to be brief
Joel,
Sooo close. That worked like a charm...however, once you actually
hover over the menu, the dropdowns are back to their old tricks and
the active dropdowns appear. Is there any way you can think of around
this? I assume this is all because of the pathClass.
Is it possible to achieve the
Hi Drew,
Here is another quick patch I've worked out for you. Remove that other
line I gave you (the one that manually applies hideSuperfishUl on
document ready. Then alter the following line of Superfish.js:
CHANGE THIS:
o.$path = $('li.'+o.pathClass,this).each(function(){
TO THIS:
o.$path =
Hi Joel,
Thanks a lot for taking the time to look into this. Your solution
does stop the dropdowns from staying open, which was a problem, so
that's great.
Perhaps I didn't state the biggest problem clearly though...if you
actually click on a link from a dropdown, (for example, go to the
About
Thanks Drew, sorry I overlooked that issue. Here's another hack to
solve that one. Add the following line inside your document ready
block, after the Superfish initialisation code:
$('ul.superfish li li').hideSuperfishUl();
That will close the last level of submenu. Sorry for another hacky
I looked at your page. It seems like you have the CSS figured out.
Nice menu! The styling to show where the user is would be via classes
on the relevant list item. This is not something that Superfish does -
it's best done on the server-side via PHP or whatever you use there.
That way your menu
Personally, I just design the menu so that the longer menu items do
flow onto a second or even third line if required. You have to use
padding instead of text-indent to provide the horizontal spacing in
this case.
As for your original request which would resize the width so that the
menu items
Hi Dave,
Sorry, but I don't understand your issue from what you posted. Can you
explain further please.
Cheers
Joel Birch.
Hi Phil,
No there is no resource like that unfortunately - the styling has been
down to the developer. The easiest thing to do is start with the demo
CSS which as you can see is very basic, and alter the CSS file
gradually (remember to check IE as you go so you know when bugs occur)
to get the
Joel,
am I right in thinking that I have to add the css class to the
relevant li items manually ?
--
Dave Buchholz
I-CRE8
http://www.i-cre8.co.uk
Skype ID: I-CRE8
On May 7, 7:10 am, Joel Birch [EMAIL PROTECTED] wrote:
Hi Dave,
Sorry, but I don't understand your issue from what you posted.
Thanks Joel
Hadn't heard of Accordion but I'll give it a go. I agree, the delay
stuff isn't needed quite so much with my nav. I'll see what I can do
with it :o)
Cheers
On 7 May, 15:41, Joel Birch [EMAIL PROTECTED] wrote:
Hi Reuben,
No further progress to report on the closing animations
Yes, that's correct. It's a job best suited to a server-side language
so that the current information is still present when JS is not
available.
Joel Birch.
On May 7, 11:38 am, Joel Birch [EMAIL PROTECTED] wrote:
Yes, that's correct. It's a job best suited to a server-side language
so that the current information is still present when JS is not
available.
Joel Birch.
Thanks Joel
--
Dave Buchholz
I-CRE8
http://www.i-cre8.co.uk
Skype ID: I-CRE8
Hi Drew,
If you remove the pathClass option, everything works fine. You don't
seem to be using that feature so it should not be in the options
object. Remove this line:
pathClass : 'active',
It looks like you could remove the bgIframe plugin also as you have
not included the intialisation code
Just as I hit send I realised that you are indeed wanting to use the
pathClass for the second tier of menu. The pathClass feature was only
ever tested to work with two tiers unfortunately, so it makes sense
that this bug exists. I'll have to have a think about what would be
required to make this
If the 'if' is removed from the out function, the menu almost works
perfectly. The only downside is that the current second tier menu is
'refreshed' when you mouseout rather than simply staying revealed. It
disappears then animates back in as if it is being restored as it
would if you moused out
Hi,
The order and specificity of the CSS rules are crucial. The rules you
added to those new classes must be overriding the Superfish rule that
disables the pure CSS reveals so that JS can take control and animate
the submenus in.
Joel Birch.
Hello,
You say it's organised like the my navbar example but also say it has
three levels. The navbar example demonstrates the pathClass feature
which works well for two level menus, but I have never attempted to
use it on menus that have more levels than that so you are heading
into uncharted
Hi Reuben,
No further progress to report on the closing animations for Superfish
I'm afraid. Looking at your page, it seems like maybe the Accordion
plugin may be more suitable for your menu. Have you looked into that?
Your menu behaves just like an Accordion menu. The only thing you
would miss
This sounds like IE's z-index bug. There should be a wealth of
information about it that you can find via google, but more helpfully,
the issue has been discussed on this list with regard to Superfish
quite a few times so if you search this list specifically you should
be able to find the
Hi Chris,
Sorry, but I'm not clear on what your issue is. Do you have a page you
can show us?
Joel Birch.
Hi folks
I've been trying to get this little puppy working in IE7 but to no
success (no surprises - I'm no javascript expert). I'm wondering if
anyone would be up for helping us out on it, paid work? In short, it
works fine at this URL: http://mga.id.au/test/ in Firefox but IE7
balks...
sorry for the late reply but we had our easter vacation here in
greece. You are both right the overflow:hidden was what caused the
problem. Now everything is working perfectly. I still have not
uploaded the corrected version but i now have everything set up
correctly.
thank you again for the
I guess I don't need the superfish plugin really. I don't get where
you put this:
$(document).ready(function(){
$(ul.nav).superfish();
});
what is a plugin and where do you put it?
I realise now that this is not dynamic, is there a way of making
this functionality dynamic ?
--
Dave Buchholz
I-CRE8
http://www.i-cre8.co.uk
Skype ID: I-CRE8
On Apr 25, 9:29 am, I-CRE8 [EMAIL PROTECTED] wrote:
http://www.i-cre8.co.uk/sf-menu/index.php
I have a demo menu here which I have
Thanks both,
This is great - I've implemented it here (I'm just the coder on this
project): http://mga.id.au/test/ where it works really nicely although
not in IE7. I checked out the demo on IE7 and didn't have similar
problems so I'm sure I just need to have a go at debugging it. So far
so
Hey Joel,
I added the code from Stan's site via the link in the other thread:
http://stanlemon.net/index/articles/hiding-a-superfish-menu.html
It is a little buggy like when roll over the main navs too fast they
sometimes get stuck (the subnavs don't always appear as expected).
The site using
Hi Joel,
So everything with the nav is fine except one small thing. I'd like
that when the selected state comes back that when you roll off
another subnav it fades out as well instead of kind of going away so
quickly. Where can I play with the speed of that?
For example, in my test page, 'About
Hi David,
Closing animations are not currently supported but efforts are being
made into adding them. Please see this thread that is currently
discussing this and also demonstrating the progress that is being
made.
http://groups.google.com/group/jquery-en/browse_thread/thread/7c316e978d574a5b
Hi Kelly,
The JavaScript component of Superfish is only responsible for the
showing and hiding behaviour of a menu and whilst a small parts of the
Superfish CSS (the hover and sfHover parts) are required to make this
happen whilst retaining accessibility when JS is not available, most
of it is
thanks Joel. that did the trick in Firefox IE7 - still contending
with IE6 but probably that looks to be a general nav issue - superfish
seems to be fine.
Pretty obvious if you read the site or almost any forum nowadays that
you will expect your post to be monitored if you are a new member.
On Apr 13, 3:21 pm, david [EMAIL PROTECTED] wrote:
Hello,
This may be a double post, kept waiting for my post more than 30
minutes to show up, but so far
Thanks Joel for the quick response. Hmmm, not sure what happened on
the posts then. I was checking and checking on the groups, logged in
and out, and couldn't see any posts until the last one.
I will double check since I thought I wasn't seeing the menu in
firefox either, with javascript
Firebug shows that your menu items are filling the width of your
ul.nav element. This means that when you mouse down through the nested
submenu items your hover state is interrupted by the next main menu
item (even though you can't see it), causing the link's hover never to
trigger and the
Hi Antreas,
It seems that your problem is due to overflow:hidden on your #wrapper
element. As the menu is inside that element, and you want it to be
visible outside it's bounds, you will have to remove overflow:hidden.
I notice your layout sort of relies on that property though - looks
like you
Just to follow up, I've documented my hack here:
http://stanlemon.net/index/articles/hiding-a-superfish-menu.html
Right now I've not seen any break down in other browsers, even with
sub menus. Only issue I've seen is a closing animation to height the
hide flickers a bit in IE - adding opacity
Thanks Stan,
I have created a test page which includes a link to a zip file
containing all the related files incase anyone wants to experiment
further. I found only one or two things that I had to correct from the
code on the page you linked to above - the one I can remember offhand
(might be
Hi David,
The menu works as you expect it to in all browsers that support :hover
on elements other than just anchors. Hence, it doesn't degrade as well
for IE6. All other modern browsers should be fine though. This is the
case with all suckerfish-style menus.
Your previous emails all came
If you mean submenu items are added dynamically, then yes you will
encounter issues. I think if you used the LiveQuery plugin you should
get the behaviour you are after.
Joel Birch.
Hi Reuben,
Superfish doesn't support closing animations. I tried it a while ago
but experienced too many glitches caused when mousing back over a
submenu that is in the process of closing. There has been some
interest in getting this working recently, so hopefully I'll get to it
some day.
Stan
Thanks for the help Joel...got it now.
Hi David,
Notice on the official horizontal example the nav class is on the
parent ul element, and the CSS depends on it being that way. You are
using an id instead - which is fine - except that you have it on a
containing div element. Much of your CSS that should be targeting the
parent ul (and
just an update, managed to make it work, just changed the selectors to
the second tier child li elements in line 51
codehasUl = function(){ return $.superfish.op.oldJquery ? 'li
li[ul]' : 'li li:has(ul)'; };/code
I still have a problem with the position of the third tier drop downs
in Opera 9,
Hi Garry,
Sorry about that. I changed the name of that file to
superfish-horizontal.css and did not update the links that appear in
the copy. Thanks for alerting me to this - I've fixed those links now.
The file you are after is here:
Hey Joel,
I finally got this fixed in IE, and I think the solution might be a
good addition to your css for the next fix. It seems to work
seemlessly in IE and FF, and Safari.
All i did was add z-index: 1; to the css element .nav li:hover, .nav
li.sfHover...
[code]
.nav li:hover, .nav
I FINALLY figured this out after playing with it for FAR too long.
Hopefully this helps somebody else.
if you are using superfish, the culprit is the following css
[code]
.nav li:hover, .nav li.sfHover,
.nav a:focus, .nav a:hover, .nav a:active {
background:#CFDEFF;
}
[/code]
adding
I managed to make it work by altering the hasUl function to return all
li tags, not just those with ul children, which makes a mockery of
the function name, but solves the issue that the over() function never
runs for li's without children, and thus doesn't hide its sibling's
children.
hasUl =
Hi Joel,
with your original opacity values it didn't work, I had to switch them
around.
It looks lovely in Firefox but in IE even the first submenu is already
completely transparent. I'm still poking it, so maybe will figure something
out.
Cynthia
Joel Birch wrote:
Hi Adrian,
Hmm,
On 26/03/2008, Schmitt [EMAIL PROTECTED] wrote:
with your original opacity values it didn't work, I had to switch them
around.
Hmm, my code worked for me when I tested it. Must be some unknown
difference in the rest of the code I guess.
All this JS hackery aside, I think the easiest and
This sounds like an issue I faced when using this type of menu
recently. I worked around the issue by adding a nested ul with one
item that duplicated the parent's href. I used the text in the nested
link as extra information about the parent link and also as a label
for the page when that is the
Hi Adrian,
Hmm, this isn't pretty, but sort of does the job (see below). I set
the animation to fade to opacity .92 which is only a subtle amount of
transparency because deeper nested submenus will inherit this and
apply their own further .92 amount, which could get hard to read. The
Superfish does not support animations on submenu close. I attempted it
when I was first creating the plugin but ran into problems when the
closing submenus were re-hovered. It may be easier to achieve now that
stop() exists, but I haven't experimented with it yet. Maybe one day.
Joel Birch.
OK thanks for letting me know
On Mar 24, 9:06 am, Joel Birch [EMAIL PROTECTED] wrote:
Superfish does not support animations on submenu close. I attempted it
when I was first creating the plugin but ran into problems when the
closing submenus were re-hovered. It may be easier to achieve now
Ok, I've narrowed the issue down to a JavaScript memory leak. A memory leak
makes sense because of the sporadic behavior of the menu. I found the memory
leak using the tool available at this link:
http://blogs.msdn.com/gpde/pages/javascript-memory-leak-detector.aspx
Hi Joel,
thanks for your reply!
This is strange: everything works fine for me in all browsers (except
that in IE6 the bottom nav doesn't show above the iframe generated by
the bgIframe plugin - it is a white with the word 'false' in it)
Yes, this is the problem I meant. Do think it is more
Hi Brian,
It looks like having position:fixed on the body element is causing the
problem. IE6 doesn't like position:fixed - looks like you may have to
rethink that.
Superfish bug... naah! ;)
Joel Birch.
Hi Joel,
sorry for stealing this thread...
I seem to have a very similar Problem, but I have read this thread
over and over again and still don't get it right.
I have used superfish in two different navigations on the same page.
Here's the page http://www.eyeculture.de.
Everything works fine in
This is strange: everything works fine for me in all browsers (except
that in IE6 the bottom nav doesn't show above the iframe generated by
the bgIframe plugin - it is a white with the word 'false' in it). IE7
on Win XP works perfect for me :/
I noticed you are including hoverIntent twice. It is
CSS to the rescue! I got it figured out, added extra classes to the
left and right LI's and added to Superfish's CSS and it worked!
OK it didn't all work. The left nav, which is just an LI with no sub-
UL works. The far right does not. I'm trying to use:
.navright a:hover {background: #333 url(/img2/top-nav-back-right-
black.png) top right no-repeat scroll}
to swap the background graphic, but it isn't triggering, let alone
Hi Ben,
Glad I could help.
Regarding your delay question: I intentionally made it so that
hovering items with submenus immediately cancels any existing delay on
other submenus in order to make the menu snappy and responsive.
However, I recommend that you try adding the hoverIntent plugin as
Hi Ben,
It turns out that the problem is that you are applying top:-34px; to
.nav * (that's every element within the nav) whereas what you want to
do is apply it to .nav only. You will also need to add
position:relative to .nav to make that negative top value work. Then
you will need to adjust
On 14/02/2008, Joel Birch [EMAIL PROTECTED] wrote:
you link to the bgiframe plugin in the head and call it after
initialising Superfish. This is throwing errors.
Sorry, I meant that the link to bgiframe.js is returning 404 so the
bgiframe isn't present when you call it in the code.
Joel
Hi Joel,
Thanks you VERY much for your answer (Much faster than mine, I'm
reading a lot of JS stuff for the moment ;-))
Superfish is really great, I've been looking a lot around, and it's
the best for me!
BUT, I still don't get some few things :-)
You can have a look here =
On 1/2/08 02:04, Joel Birch [EMAIL PROTECTED] wrote:
Doh, just as I clicked send I realised you wanted the solution for
when JS was *not* available. I guess you could use
display:none/display:block in your CSS along side the necessary 'top'
values, and then use the callbacks as shown
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(){
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
I am still struggling to find the time to work on those bugs. Anyone who
has ideas about this, please feel free to contact me/Joel via this list.
Joel, I appreciate your work, sorry I hadn't answered yet!
-Original Message-
About the callbacks. Would they enable us to write for
Hi Dave,
Instead of display:none and display:block to hide and reveal your
submenus you need to use top:-999em and top:1.5em (or whatever the
vertical offset you need for your menu) respectively. The only other
thing you need to once you have swaped 'display' for 'top' is that you
will need
Hi Simon,
It looks like you may not want to use the pathClass option for this
type of menu. When you do, it removes the class you pass in ('current'
in your case) and replaces it with your hover class ('sfHover'). This
is necessary to restore and keep open the path to your current page on
idle,
Hi Jesse and Joel,
I think the piece that you are missing, which is the cause of your
problem, is the page (Y) offset. If there is a vertical scrollbar,
you'll need the page y offset; with a horizontal scrollbar, the page x
offset (IE has different names for these things). The dimensions
Hi Karl,
What can I say? Thanks so much for shedding light on this issue, it's
the big piece of the puzzle we were missing. I'll have a go at folding
this into what we have so far.
Where do you find the time to help so many people on this list? You
have my unabashed admiration, sir.
Cheers!
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
On 31/1/08 12:26, Joel Birch [EMAIL PROTECTED] wrote:
Hi Dave,
Instead of display:none and display:block to hide and reveal your
submenus you need to use top:-999em and top:1.5em (or whatever the
vertical offset you need for your menu) respectively. The only other
thing you need to
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,
701 - 800 of 972 matches
Mail list logo
