[jQuery] Re: superfish menu, Error: $(ul.sf-menu) is null
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 superfish. However, some pages give me the following error: Error: $(ul.sf-menu) is null, source file:http://blahblahblah.com/default.aspxline: 4 The menu still works using the CSS, but the superfish features fail at that point. Any ideas on what is wrong and how to fix? Thanks.
[jQuery] Re: superfish menu, Error: $(ul.sf-menu) is null
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 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 superfish. However, some pages give me the following error: Error: $(ul.sf-menu) is null, source file:http://blahblahblah.com/default.aspxline: 4 The menu still works using the CSS, but the superfish features fail at that point. Any ideas on what is wrong and how to fix? Thanks.
[jQuery] Re: SuperFish - always display some submenu items
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 you are looking for. On Sep 9, 9:15 am, Andrew Lysyuk [EMAIL PROTECTED] wrote: For some pages I want some menu-items to be always dropped-down. For example, I have li elements with class=no. I needSuperfishdon't react to events on the submenu inside this element.
[jQuery] Re: SuperFish - always display some submenu items
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
[jQuery] Re: SuperFish - always display some submenu items
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 visible, so we don't wrap it to 'div' ul li3/li li4/li li5/li /ul /li divliThis must be visible only on mouse over, so wrap it with 'div' ul li1/li li2/li li3/li /ul/li/div After that I'have modified selectors in source code of SuperFish from 'li' to 'div li' anywhere. It works in my Opera. Maybe useful for you. On 10 сент, 00:17, Mike Henke [EMAIL PROTECTED] wrote: We might be trying to solve the same issue... http://groups.google.com/group/jquery-en/browse_thread/thread/a1ea1b8...
[jQuery] Re: SuperFish - always display some submenu items
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.
[jQuery] Re: SuperFish - always display some submenu items
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.
[jQuery] Re: Superfish - display2 deep and have mouseover for anything deeper
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.
[jQuery] Re: Superfish - display2 deep and have mouseover for anything deeper
Arrgh. I meant Hi Mike. Sorry.
[jQuery] Re: superfish menu, Error: $(ul.sf-menu) is null
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 other. Joel Birch.
[jQuery] Re: Superfish: onBeforeShow and onHide callback functions
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.
[jQuery] Re: Superfish: Gap between top level menu and popup..
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 are
positioned relative to their parent item. Hence, if you alter the
height of the top level items by changing the link padding then you
need to calculate this top property like this:
(anchor top padding) + (line-height of link text) + (anchor bottom
padding) = submenu top propery
So by default, the result is 2.5em as shown here:
.75em + 1em + .75em = 2.5em
Hope this helps.
Joel Birch.
[jQuery] Re: Superfish Navigation bar text color
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.
[jQuery] Re: Superfish with custom backgrounds
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.
[jQuery] Re: Superfish Issues
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.
[jQuery] Re: Superfish Sub menu position
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.
[jQuery] Re: Superfish
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 tricky. The declaration
you need to override is this one:
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6
applies text colour*/
color: #FFF;
}
so the first idea would be to add to the selectors for the rule you
use to describe the hover styles, like this:
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu li:hover a, sf-menu li.sfHover a, /* --- ADDED THESE*/
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #FFF;
outline: 0;
color: #D1001A;
}
This will override the link's colour, but will probably also affect
links in the nested submenu. This could be avoided by using the
operator in our new selector, but that wouldn't fix the issue for IE6
unfortunately. So the next thing to do might be to reset the colour
for deeper nested links like so:
.sf-menu li:hover li a, sf-menu li.sfHover li a { /* --- ADDED AN
EXTRA LI */
color: #FFF;
}
Again, we may run into another problem because this new rule might
override the hover styles set above, so the final solution could add
an ID selector to each of the link pseudo styles in order to make sure
they always get priority. Here is the final proposed solution:
/* FINAL CODE: */
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu li:hover a, sf-menu li.sfHover a, /* --- ADDED THESE*/
#someID .sf-menu a:focus, #someID .sf-menu a:hover, #someID .sf-menu
a:active { /* --- ADDED IDs */
background: #FFF;
outline: 0;
color: #D1001A;}
.sf-menu li:hover li a, sf-menu li.sfHover li a { /* --- ADDED AN
EXTRA LI */
color: #FFF;
}
It's hard to be certain what the answer is without being able to test
the ideas on your menu so I may have overlooked things, but hopefully
this gives you some ideas.
Joel Birch.
[jQuery] Re: Superfish
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 dont
know where to enter your suggested #someID to get work.
for a quick view of my problem i prepared 2 files
my html file and my changed css file.
just exchange my html file with your example.html file
and the CSS with your superfish.css to see the problem.
if you cant help either it wont help anyway.
thank you anyway
Erick
### HTML ###
!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;
head
meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1 /
title/title
link rel=stylesheet type=text/css href=main.css /
link rel=stylesheet type=text/css href=css/superfish.css
media=screen
script type=text/javascript src=js/jquery-1.2.6.min.js/script
script type=text/javascript src=js/hoverIntent.js/script
script type=text/javascript src=js/superfish.js/script
script type=text/javascript
// initialise plugins
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
/script
/head
body bgcolor=#FF
!-- Begin Wrapper --
div id=wrapper
!-- Begin Header --
div id=header
/div
!-- End Header --
!-- Begin Naviagtion --
div id=navigation
ul class=sf-menu id=someID
li
a href=#Home/a
/li
li class=current
a href=# Info/a
/li
li
a href=#About us/a
ul
lia href=#aaHistory/a/li
lia href=#aaPartner/a/li
/ul
/li
/ul
/div
!-- End Naviagtion --
!-- Begin Content --
div id=contentbr style=clear:left;
zukkzkuzku
a href=#CONTENT/a
/div
!-- End Content --
!-- Begin Footer --
div id=footer
/div
!-- End Footer --
/div
!-- End Wrapper --
/body
/html
###HTML ###
### CSS ###
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding:0;
list-style: none;
}
.sf-menu {
line-height:1.0;
}
.sf-menu ul {
position: absolute;
top:-999em;
width: 10em; /* left offset of submenus need to match
(see below)
*/
}
.sf-menu ul li {
width: 100%;
font-weight:bold;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
font-weight:bold;
}
.sf-menu a {
display:block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top:2.5em; /* match top ul list item height */
z-index:99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top:-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 10em; /* match ul width */
top:0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top:-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top:0;
}
/*** DEMO SKIN ***/
.sf-menu {
float: left;
margin-bottom: 1em;
}
.sf-menu a {
border-left:0px solid #fff;
border-top: 0px solid #FFF;
padding:.75em 1em;
text-decoration:none;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6
applies text colour*/
color: #FFF;
}
.sf-menu li {
background: #D1001A;
}
.sf-menu li li {
background: #D1001A;
}
.sf-menu li li li {
background: #9AAEDB;
}
/* FINAL CODE: */
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu li:hover a, sf-menu li.sfHover a,/* --- ADDED THESE*/
#someID .sf-menu a:focus, #someID .sf-menu a:hover, #someID
[jQuery] Re: Superfish Current menu not displaying...
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 the testing is interesting. It DOES manage to display correctly at certain points in the hover. But I need help in understanding what is happening under the hood - which classes are being applies and why the menu fails over all. I think the problems here are related to the changes I made in order to make the sub nav level reach the full width of the nav bar - something you have to do in order to make the menu useful. (see the original example and hit the last menu item, and then try to reach one of it's sub items to see why this is a problem) Second problem is less apparent but equally devastating, and it's happening basically with all other browsers - and I think might be related to the IE 6 bug or the changes I needed to make to get the sub nav to run full width. The error can be experienced by activating one of the last two or three menu items and then mousing into the sub nav. About every 3rd or 4th time after activating the sub menu for some reason the sub menu reverts to the current menu. As if you have moused out of the area altogether. Only you haven't. At least not visibly. Any ideas or assistance would be greatly appreciated! On Sep 7, 11:22 am, trackpad [EMAIL PROTECTED] wrote: Thanks Joel. Here are two versions. One without the pathClass set... http://www.goodcompany.dk/tests/superfish/index.php And one with the pathClass set. http://www.goodcompany.dk/tests/superfish/index.php?pathClass=current Note that I am in the process of restructuring the CSS a bit, and have combined the two CSS files and have made some minor changes - but I have ruled out these as the cause by swapping in the original CSS periodically and running into the same problem. In fact you can see the example included with Superfish 1.4.8. behaving in the same way. I am testing in Mac Safari/FF and Win IE 6/7. http://www.goodcompany.dk/tests/superfish/original/example.html Sorry if I've overlooked the obvious (again). I must have because I don't think you would include a non-working example in the download. Could it be it is intentional that you don't show the sub level marked as current until you mouseover the parent? Been working some very late nights recently, so maybe I missed the idea. In any case I need to display the current location (including the submenu) from the start. Also, I don't know if you take freelance or would be available to do some paid superfish consulting, but please get in touch with me if you do offer help along these lines. I have some more complex modifications in mind down the road. goodcompany [dot] dk [at] gmail - thanks. On Sep 6, 4:21 am, Joel Birch [EMAIL PROTECTED] wrote: Hello, I can think of many possible causes of your problem. If you can show us a working example I'm sure we can figure out which one applies to your menu and offer a solution for it. Joel Birch.
[jQuery] Re: Superfish - display2 deep and have mouseover for anything deeper
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 3 **level 2 *level 1 **level 2 ***(hidden till mouseover of level 2) level 3 *level 1
[jQuery] Re: Superfish: onBeforeShow and onHide callback functions
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 none of
them were accepted, any suggestion of how to do it?
Thanks in advance!
[jQuery] Re: Superfish: Gap between top level menu and popup..
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. What are the spots on the default css to reduce the
height?
[jQuery] Re: superfish - item height question
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 didn't want to just make random stabs. After reading your post I looked again and tried 2.5em based the comment in this line: top:2.5em; /* match top ul list item height */ I never *did* figure out where the top ul list item height was set, but 2.5em works great for the height of the containing div. All seems to be entirely awesome now and thanks again borth for the outstanding code but for your interest in my dopey question. Steve
[jQuery] Re: Superfish - display2 deep and have mouseover for anything deeper
kind of like a alwaysOpen option
[jQuery] Re: Superfish - display2 deep and have mouseover for anything deeper
Anybody?
[jQuery] Re: Superfish - display2 deep and have mouseover for anything deeper
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 to 'current' in the options object you pass to superfish() then it should work given that you seem to have the class=current on the correct li elements. Hope this helps. Or have I misunderstood your question? Joel Birch.
[jQuery] Re: Superfish
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, .sf-menu a:visited { /* visited pseudo selector so IE6
applies text colour*/
color:#FFF;
}
so the first idea would be to add to the selectors for the rule you
use to describe the hover styles, like this:
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu li:hover a, sf-menu li.sfHover a,/* --- ADDED THESE*/
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background:#FFF;
outline:0;
color:#D1001A;
}
This will override the link's colour, but will probably also affect
links in the nested submenu. This could be avoided by using the
operator in our new selector, but that wouldn't fix the issue for IE6
unfortunately. So the next thing to do might be to reset the colour
for deeper nested links like so:
.sf-menu li:hover li a, sf-menu li.sfHover li a {/* --- ADDED AN
EXTRA LI */
color:#FFF;
}
Again, we may run into another problem because this new rule might
override the hover styles set above, so the final solution could add
an ID selector to each of the link pseudo styles in order to make sure
they always get priority. Here is the final proposed solution:
/* FINAL CODE: */
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu li:hover a, sf-menu li.sfHover a,/* --- ADDED THESE*/
#someID .sf-menu a:focus, #someID .sf-menu a:hover, #someID .sf-menu
a:active {/* --- ADDED IDs */
background:#FFF;
outline:0;
color:#D1001A;
}
.sf-menu li:hover li a, sf-menu li.sfHover li a {/* --- ADDED AN
EXTRA LI */
color:#FFF;
}
It's hard to be certain what the answer is without being able to test
the ideas on your menu so I may have overlooked things, but hopefully
this gives you some ideas.
Joel Birch.
[jQuery] Re: superfish - item height question
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 instead of ems. I still think altering the way your design works so that the div height can be set in ems is the best solution, if possible. Cheers Joel Birch
[jQuery] Re: superfish indicators
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 object you pass into .superfish() upon initialisation. You can read about that in the documention for clarification. Good luck, Joel Birch On 04/09/2008, jess [EMAIL PROTECTED] wrote: Hey All! Yay for swanky drop downs! I'm implemented super fish drop downs on a site I'm building and I was wondering if anyone could help me figure out how to do away with the arrow indicators altogether. They're pushing my layout around, and I would really just like to rid of them completely without breaking the code. I tried turning to the background color, but they still take up space. The superfish dropdowns I'm using are highlighted here: http://users.tpg.com.au/j_birch/plugins/superfish/#examples Please, any advice would be super appreciated! Thank you!
[jQuery] Re: superfish indicators
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) within superfish.css. However, if you still want to disable the arrows you can set autoArrows to false within the options object you pass into .superfish() upon initialisation. You can read about that in the documention for clarification. Good luck, Joel Birch On 04/09/2008, jess [EMAIL PROTECTED] wrote: Hey All! Yay for swanky drop downs! I'm implemented super fish drop downs on a site I'm building and I was wondering if anyone could help me figure out how to do away with the arrow indicators altogether. They're pushing my layout around, and I would really just like to rid of them completely without breaking the code. I tried turning to the background color, but they still take up space. The superfish dropdowns I'm using are highlighted here: http://users.tpg.com.au/j_birch/plugins/superfish/#examples Please, any advice would be super appreciated! Thank you!
[jQuery] Re: Superfish: onBeforeShow and onHide callback functions
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 detecting when the menu is completely
idle. Maybe you could add a condition to your onHide function that
checks the length of $('ul.sf-menu li.sfHover') and only proceed if
the result is less than it would be for an idle menu?
Joel Birch.
[jQuery] Re: Superfish question
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.
[jQuery] Re: Superfish: onBeforeShow and onHide callback functions
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 length of $('ul.sf-menu li.sfHover') and only proceed if
the result is less than it would be for an idle menu?
Joel Birch.
[jQuery] Re: Superfish - Evenly spread menu through entire width of ul
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 left, I know I could fix this manually using margins, padding, borders, etc ... however I would like more of a table style layout using ul, li's and superfish. Anyone try this before? I don't think I need to paste any examples, I'm using the stock examples from http://users.tpg.com.au/j_birch/plugins/superfish/. I think you need to use the supersubs plugin - see the with Supersubs tab on the demo page.
[jQuery] Re: Superfish - Evenly spread menu through entire width of ul
Actually, sorry Guy, but that is not what Supersubs does. Joel Birch.
[jQuery] Re: Superfish loading problem
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({
pathClass: 'current'
});
});
2nd I have a conflict with Scriptaculous effect.js file. I need
removed the file and it works. however the code that uses effect.js
is broken. Is there a way around the jquery.min.js and effect.js
conflict.
On Aug 27, 11:47 am, glowens [EMAIL PROTECTED] wrote:
I am running Superfish with Smarty templating engine but there appears
to be a conflict with jquery and smarty
I call Superfish using the basic code below but it will not work
$(document).ready(function(){
$(ul.sf-menu).superfish({
pathClass: 'current'
});
});
I changed the code to the following and it appears to call the code.
jQuery(document).ready(function(){
$(ul.sf-menu).superfish({
pathClass: 'current'
});
});
I beleive the issue is with the $. I tested this with the following.
jQuery(document).ready(function(){
alert('test')
});
});
and the alert is displayed. If I change the JQuery back to a $ it
will not work.
Any ideas or other ways to initiate the Superfish code.
[jQuery] Re: Superfish - Evenly spread menu through entire width of ul
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 Birch.
[jQuery] Re: SUPERFISH Supersubs problem in mozilla firefox
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.
[jQuery] Re: Superfish CSS question Position Static
Hi, I can't visualise your issue - can you please post a liink to the working example? Cheers Joel Birch.
[jQuery] Re: Superfish: Gap between top level menu and popup..
Hi ccollie, I can't visualise exactly what your issue is. Can you post an example please? Cheers Joel Birch.
[jQuery] Re: SUPERFISH Supersubs problem in mozilla firefox
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 using supersubs works in all browsers, so I copied it all over and tried again, to no avail. Any ideas folks? Does anyone in these parts know who created this Super Subs plug in and how I could contact them? Thanks a lot! Andy On Jul 31, 5:25 am, Joel Birch [EMAIL PROTECTED] wrote: @andy: I notice that the sub-widths are being set to the maxWidth value that you are initializing Supersubs with. This suggests to me that the wrong font size is probably being arrived at by the plugin so that when it calculates the em width based upon the font size it arrives at a far larger number than it should - triggering the maxWidth feature. I wish I had the time to look into this now, but unfortunately I am too busy. You might want to try tweaking the CSS for how you are setting the font-size and/or experimenting to see if the same bug occurs with a different font. I'll get to testing it myself, but I can't say when. @Kollin: I'd advise against those workarounds. If you want to apply a specific width to individual submenus, you should replace your inline style attribute with unique ids or classes on the li elements that contain them. Then set the width for each one, and it's child ul, from within the CSS. Also, you mentioned cross-browser problems when adding padding/margin/border to the li element, but you should not be doing that at all. You should add those things to the anchor elements only, as shown in the Superfish demo CSS files. This avoids any cross-browser issues and keeps things simple. Joel Birch.
[jQuery] Re: Superfish
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.
[jQuery] Re: Superfish
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 work. Now it's working! Thanks again!
[jQuery] Re: Superfish
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 relative, absolute, or fixed -- you won't be able to change its z-index in any browser. This is because the default position of HTML elements is static. And static means that the element can't move on any of its axes - x, y, or z. Can't move left or right, can't move top or bottom, can't move forward or back. --Karl Karl Swedberg www.englishrules.com www.learningjquery.com
[jQuery] Re: Superfish
Try adding position:relative and z-index:1 to your top_menu css.
[jQuery] Re: Superfish Question
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... On 19 ago, 02:24, Willie Krause [EMAIL PROTECTED] wrote: Hi All I use Superfish on a project as a menu system (and love it). I am a Java developer though and usually end up breaking ajax/javascript libraries when I try to make a customisation. My question is how easy / difficult would it be to make superfish *not* activate the drop-down part of the menu with a mouse event that hovers over it (default behaviour), but instead that it requires a mouse click? If it can be attempted by a non javascript coder (but who has done some js hacks in the past), could you please guide me in the right direction where to do this. Many thanks W
[jQuery] Re: Superfish with scripted dom page
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 necessary for a very basic menu ...
I also tested the json object. In IE7 it nicely produces all the
required values (testing with
'alert(data.lijstresultaten[stand].vaknaam)' ), so it doesn't fly out
because it misses those values...
You can see the result here: http://conforta.webhop.org/gip/gipp5quatclient.asp
Thank you so much for trying to help
On 18 aug, 04:54, Joel Birch [EMAIL PROTECTED] wrote:
Hello,
Here are a few thoughts on your code in the frame embedded in the page
you linked to.
Firstly, I'm not aware that this code is correct:
$().ready(function() {
I think you need the word 'document' in the first $() like this:
$(document).ready(function() {
Secondly, you should call the .superfish() method after the other code
which seems to alter the menu DOM. .superfish() has to be initialised
upon the final DOM structure.
Thirdly, I think you may get more consistent results across browsers
if you rewrite the following code:
.attr('innerHTML',klassen[a])
with this:
.html(klassen[a])
...which is jQuery's recommended way of injecting new HTML.
Hope some of this helps.
Joel Birch.
[jQuery] Re: Superfish with scripted dom page
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, rossenbere [EMAIL PROTECTED] wrote:
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 necessary for a very basic menu ...
I also tested the json object. In IE7 it nicely produces all the
required values (testing with
'alert(data.lijstresultaten[stand].vaknaam)' ), so it doesn't fly out
because it misses those values...
You can see the result here:http://conforta.webhop.org/gip/gipp5quatclient.asp
Thank you so much for trying to help
On 18 aug, 04:54, Joel Birch [EMAIL PROTECTED] wrote:
Hello,
Here are a few thoughts on your code in the frame embedded in the page
you linked to.
Firstly, I'm not aware that this code is correct:
$().ready(function() {
I think you need the word 'document' in the first $() like this:
$(document).ready(function() {
Secondly, you should call the .superfish() method after the other code
which seems to alter the menu DOM. .superfish() has to be initialised
upon the final DOM structure.
Thirdly, I think you may get more consistent results across browsers
if you rewrite the following code:
.attr('innerHTML',klassen[a])
with this:
.html(klassen[a])
...which is jQuery's recommended way of injecting new HTML.
Hope some of this helps.
Joel Birch.- Tekst uit oorspronkelijk bericht niet weergeven -
- Tekst uit oorspronkelijk bericht weergeven -
[jQuery] Re: Superfish and 3rd/4th level expanded
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
[jQuery] Re: Superfish (IE cleartype bug)
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
/
onShow : function(){
if ($.browser.msie)
{
$('ul').style.removeAttribute('filter');
}
},
/AND
ALSO//
onShow : function(u){
if ($.browser.msie)
{
u.style.removeAttribute('filter');
}
},
//
[jQuery] Re: Superfish (IE cleartype bug)
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: function(u)
{
if ($.browser.msie)
{
u.style.removeAttribute('filter');
}
},
///ALSO
TRIED/
onShow: function()
{
if ($.browser.msie)
{
$('ul').style.removeAttribute('filter');
}
},
Am I missing something.
[jQuery] Re: superfish shadow width problem
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 shadow placed back in the right
spot for IE6
.sf-shadow ul {
background:transparent url('../images/shadow.png') no-repeat
bottom right;
padding: 0 12px 9px 0;
p\adding:0;
}
Play with those style classes until you get something that works.
On Jul 22, 12:58 pm, 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 vertical-superfish.css for a wider menu (12em
instead of the default 10em) and i've got everything working except
the drop shadow, which stubbornly remains at a 10em width in firefox 3
ie7 (curiously, the non-transparent shadow displays correctly in
ie6) . anybody out there have any ideas?
let me know if you want any documentation; in the meantime, the page
is athttp://smbwebmarketing.com/okgba
thanks in advance,
--cz
[jQuery] Re: superfish shadow width problem
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 ul {
background:transparent url('../images/shadow.png') no-repeat
bottom right;
padding: 0 12px 9px 0;
p\adding:0;
}
[jQuery] Re: superfish shadow width problem
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 vertical-superfish.css for a wider menu (12em
instead of the default 10em) and i've got everything working except
the drop shadow, which stubbornly remains at a 10em width in firefox 3
ie7 (curiously, the non-transparent shadow displays correctly in
ie6) . anybody out there have any ideas?
let me know if you want any documentation; in the meantime, the page
is athttp://smbwebmarketing.com/okgba
thanks in advance,
--cz
[jQuery] Re: Superfish, it rolls... quiet complete
your page throws a few errors and I didn't see jquery being loaded, only some plugins.
[jQuery] Re: Superfish problem in IE6
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
[jQuery] Re: Superfish - strange behavior when including images in items
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 only remaining issue is IE7's behavior in which the dropshadow appears a split second after the ul.sfHover appears, giving it an annoying snapping into place feel. Unfortunately there is no way around that in IE7 as it can not fade transparent png images unless they have a solid background colour - which sort of renders the point of the drop shadow irrelevant. It was this or no drop shadow at all in IE7. However, if you use an animation that does not involve opacity - say, just a slide-down - then that works fine and the shadows are there all the time just like in more capable browsers. Also looking forward to the click to display rather than on hover you mentioned in one of your posts. Yes that is going to be tackled when I get chance - my paid work has picked up again so I can't make any promises about exactly when. Blessings to you, The appreciation of a fellow human is more than enough. Thanks David. David Carroll Joel Birch.
[jQuery] Re: Superfish - strange behavior when including images in items
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. Your's looks perfect so it's great to see it will be easy when I get around to it. Cheers Joel Birch.
[jQuery] Re: Superfish - strange behavior when including images in items
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.
[jQuery] Re: Superfish - strange behavior when including images in items
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 appears a split second after the ul.sfHover appears, giving it an annoying snapping into place feel. Also looking forward to the click to display rather than on hover you mentioned in one of your posts. Blessings to you, David Carroll
[jQuery] Re: Superfish 1.4.5 released - now with drop shadows!
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 in IE6 or 7 - will continue to ponder workarounds there. Other than that, just a general clean-up and further optimisations of the code. Check out them drop shadows... are they not perdy? If you think not then you can disable them completely via the options object.http://users.tpg.com.au/j_birch/plugins/superfish/#examples The next feature I will be adding is click main item to activate instead of hover. Joel Birch.
[jQuery] Re: Superfish 1.4.5 released - now with drop shadows!
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, although it did mean adding a touch more JS code to disable and renable them once the fade is complete (didn't need to do this for height animations, etc, just ones involving opacity). It seems that fading transparent 8-bit png files is fine unless they are the background image of the exact div you are animating the opacity on (the ul in this case). Will be uploading the patch soon. Cheers Joel Birch. 2008/7/11 Richard W [EMAIL PROTECTED]: 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)
[jQuery] Re: Superfish 1.4.5 released - now with drop shadows!
Hi, Joel... congrats on the new version. I've been working with the 1.4.1 version of Superfish for awhile on a new site and I have put 24-bit png's as the background images for the menu items (not the main items, just in the dropdowns) all was working fine for months. Then all of a sudden, in IE7, the png's lost their transparency and in some of the backgrounds of the slide down submenus, I get a scroll bar! (Where that came from I have no idea) Have you seen anything like this before and do you have any suggestions concerning why it may be happening and what can be done? I suspect it may have to do with my browser, because it wasn't happening on my client's machine when we met yesterday. You can see the menu at this dev site: http://c21ar.wsm-dev.com Do you see the problem? Or does the transparency in the dropdown items work properly? Thanks, Rick -Original Message- 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 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, although it did mean adding a touch more JS code to disable and renable them once the fade is complete (didn't need to do this for height animations, etc, just ones involving opacity). It seems that fading transparent 8-bit png files is fine unless they are the background image of the exact div you are animating the opacity on (the ul in this case). Will be uploading the patch soon. Cheers Joel Birch. 2008/7/11 Richard W [EMAIL PROTECTED]: 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) No virus found in this incoming message. Checked by AVG - http://www.avg.com Version: 8.0.138 / Virus Database: 270.4.7/1545 - Release Date: 7/10/2008 6:43 PM
[jQuery] Re: Superfish 1.4.5 released - now with drop shadows!
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 the animation
time was complete. The only fix I could think of was to do:
if ($.browser.mozilla $.browser.version 1.9)
$('body').css('-moz-opacity',.999);
Very disconcerting. Please let me know if the issue is not fixed for
FF2 Mac - I neglected to keep a copy to check.
Joel Birch.
[jQuery] Re: Superfish 1.4.5 released - now with drop shadows!
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 background image was on the element you are fading.
Your example proves otherwise.
It's hard to pin down why my 8-bit png arrows fade in perfectly (I
watched them with an ultra-slow fade-in to be sure of this) but my
8-bit png shadow does not. Your png being 24-bit suggests that the
x-bit is irrelevant. Although - still - why do my 8-bit arrows work? I
tested putting the arrows png into the place where my drop shadow png
is and it then did not work (was solid black until fade completed
again), so it seems like some strange combination at work - which I
haven't been able to track down.
Long story short though (bit late for that), your site looks
acceptable because the solid black background turns to
semi-transparent straight after the animation and the transition is
not *too* jarring. Oh, and I don't see any scrollbars. The only time
have seen scrollbars on the list items is when there were bgIframe
problems. If you are using the most up to date version of bgIframe you
can actually apply it (and probably should) more simply like this:
$('ul.nav').superfish().find('ul').bgIframe({opacity:false});
Hope this helped.
Joel Birch.
[jQuery] Re: Superfish 1.4.5 released - now with drop shadows!
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
(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 the animation
time was complete. The only fix I could think of was to do:
if ($.browser.mozilla $.browser.version 1.9)
$('body').css('-moz-opacity',.999);
Very disconcerting. Please let me know if the issue is not fixed for
FF2 Mac - I neglected to keep a copy to check.
Joel Birch.
[jQuery] Re: Superfish 1.4.5 released - now with drop shadows!
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.
[jQuery] Re: Superfish 1.4.5 released - now with drop shadows!
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.
[jQuery] Re: Superfish 1.4.5 released - now with drop shadows!
$.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
$.browser.version. Any idea what I should be checking for?
Cheers
Joel Birch.
[jQuery] Re: Superfish 1.4.5 released - now with drop shadows!
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 not. Cheers Joel Birch.
[jQuery] Re: Superfish 1.4.5 released - now with drop shadows!
Thanks so much for the help Richard! Joel.
[jQuery] Re: Superfish 1.4.5 released - now with drop shadows!
Thanks for the tips, Joel.
When I first implemented SuperFish on this site, it was
my first use and I wasn't sure what bgiframe.js was for exactly,
so I included it just to be safe. (I just didn't take the time
to read...)
Now that I know what it's for, I realize I don't need it to overcome
IE6 form issues, so I just renamed the bgiframe.js file so all references
to the site would be disabled.
That actually solved all issues I was having. Now the bg images for the
dropdown links are transparent (semi-transparent, as the bg image only
fades down about 50% at the end) and the scroll bar at the end of the
bgiframe areas has disappeared.
So, all the issues were related to the use of the bgiframe.
I'll update my version of SuperFish to the latest on my next site that
I'm about to start work on and see what happens. I just don't want to
bother a good thing when I'm only 3 days from 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 released - now with drop shadows!
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 background image was on the element you are fading.
Your example proves otherwise.
It's hard to pin down why my 8-bit png arrows fade in perfectly (I
watched them with an ultra-slow fade-in to be sure of this) but my
8-bit png shadow does not. Your png being 24-bit suggests that the
x-bit is irrelevant. Although - still - why do my 8-bit arrows work? I
tested putting the arrows png into the place where my drop shadow png
is and it then did not work (was solid black until fade completed
again), so it seems like some strange combination at work - which I
haven't been able to track down.
Long story short though (bit late for that), your site looks
acceptable because the solid black background turns to
semi-transparent straight after the animation and the transition is
not *too* jarring. Oh, and I don't see any scrollbars. The only time
have seen scrollbars on the list items is when there were bgIframe
problems. If you are using the most up to date version of bgIframe you
can actually apply it (and probably should) more simply like this:
$('ul.nav').superfish().find('ul').bgIframe({opacity:false});
Hope this helped.
Joel Birch.
No virus found in this incoming message.
Checked by AVG - http://www.avg.com
Version: 8.0.138 / Virus Database: 270.4.7/1546 - Release Date: 7/11/2008
6:47 AM
[jQuery] Re: Superfish 1.4.5 released - now with drop shadows!
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.
[jQuery] Re: Superfish Question
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 that are not perfectly rounded to an integer. Rather than specify everything in absolute pixels I prefer to let Firefox quirks be Firefox quirks in this case. You might decide otherwise. Joel Birch.
[jQuery] Re: Superfish - Help - How to make menu centered on the page with css?
Hello, Here are some previous threads you may get some hints from: http://tinyurl.com/6qafru http://tinyurl.com/5wcf3f Joel Birch.
[jQuery] Re: Superfish 1.4.5 released - now with drop shadows!
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 Sucker/Superfish style. Any insight on this? Have you tried it out for the non-JS, IE6 user? Joe On Jul 10, 10:44 am, Joel Birch [EMAIL PROTECTED] wrote: Okay, so the drop shadows are not applied in IE6 or 7 - will continue to ponder workarounds there. Other than that, just a general clean-up and further optimisations of the code. Check out them drop shadows... are they not perdy? If you think not then you can disable them completely via the options object.http://users.tpg.com.au/j_birch/plugins/superfish/#examples The next feature I will be adding is click main item to activate instead of hover. Joel Birch.
[jQuery] Re: Superfish 1.4.5 released - now with drop shadows!
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 this situation it is up to you to provide alternative access to the nested links in some other manner. That said, I'd love to be proven wrong if you can find any examples. Joel Birch.
[jQuery] Re: Superfish / Firefox 3 PC / Flash issue
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 Birch [EMAIL PROTECTED] wrote: 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. -- Simone de Beauvoir - To catch a husband is an art; to hold him is a job.
[jQuery] Re: Superfish 1.4.4 released - has auto-submenu arrows
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 easily disabled via options object. http://users.tpg.com.au/j_birch/plugins/superfish/ Hi Joel, Nice work as always! One thing I noticed on your demo at: http://users.tpg.com.au/j_birch/plugins/superfish/#sample2 If you open one of the droplist boxes (say 3rd one over, it stays open) - THEN click the 3rd Superfish menu above it, the menu opens BEHIND the opened droplist. Could just be a thing with the demo page, but I thought I'd mention it. Chuck
[jQuery] Re: Superfish 1.4.4 released - has auto-submenu arrows
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.
[jQuery] Re: Superfish / Firefox 3 PC / Flash issue
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:
div id=home-showcase
script type=text/javascript
var flashvars = {};
var params = {};
params.wmode = opaque;
var attributes = {};
attributes.align = top;
swfobject.embedSWF(showcase_new.swf, home-showcase,
904,
276, 9.0.0, false, flashvars, params, attributes);
/script
div id=home-showcase
a
href=http://www.adobe.com/go/getflashplayer;
img
src=http://www.adobe.com/images/shared/download_buttons/
get_flash_player.gif alt=Get Adobe Flash player //a
/div
Hopefully this will help anybody else who may run into a similar
issue.
By the way, thank you for this great plugin, Joel.
[jQuery] Re: Superfish / Firefox 3 PC / Flash issue
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.
[jQuery] Re: SUPERFISH IE 6 help
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 which rule is responsible. If you can create and send me a set of test files that I can run locally I'll see if I can find your bugs for you. You'll need to change the image urls to point to your server, or include the images with the files etc. Joel Birch.
[jQuery] Re: Superfish - button width
The latest version of Superfish (version 1.4.2 - released a couple days ago) does this by default now. Joel Birch.
[jQuery] Re: Superfish 1.4.3 released - now with new documentation
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 also discovered the Supersubs plugin to superfish. It tackles really elegantly that common issue of the width of the submenus and the length of its items. On subtle issue I see is still there, that on FF some sub-item text are moving up 1px just after having been rendered. Also one point on which I am still confused since our last talk on how to find an elegant way to add background transparency to submenus, but having that background positioned from the bottom right corner of the submenu. I can myself only imagine rather bad tricks to reach that goal. Thanks a lot for this release. -Olivier http://tinyurl.com/6y8et2 Joel Birch wrote: Hi everyone, I just released Superfish 1.4.3. The documentation is completely overhauled and now uses Mike Alsup's fantastic templates. Please let me know if I've left anything incomplete - it's quite a big nail-biting change. The CSS has undergone further revision. Rather than each menu type (horizontal, vertical, navbar) having it's own CSS file, now you include superfish.css to create the standard menu-type, then add the extra CSS file relevant to the alternate style, as well as adding an extra class to the parent ul to suit. Hopefully the docs explain this well enough. http://users.tpg.com.au/j_birch/plugins/superfish/ Cheers Joel Birch.
[jQuery] Re: Superfish 1.4.3 released - now with new documentation
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 text: this is something Firefox does that can only be worked around by specifying vertical spacing (line-height, padding, top, etc) in pixels, and that's definitely something that would be worse than what it would solve. I guess we'll have to live with that. I don't remember the details of the background transparency issue you mentioned - sorry. Cheers for the reply! Joel Birch.
[jQuery] Re: Superfish - button width
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.
[jQuery] Re: Superfish Question: Menu Disappear onclick
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
experiment with .css('visibility','hidden') instead of hide() as the
latter could make other page elements move around disconcertingly.
Joel Birch.
[jQuery] Re: Superfish Question: Menu Disappear onclick
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 probably
just use .hide() instead of .hideSuperfish() there.
Joel Birch.
[jQuery] Re: Superfish Question: Menu Disappear onclick
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 it to hide for good. This with hoverintent
makes superfish feel very responsive. I highly recommend it.
On Jul 2, 1:04 pm, Joel Birch [EMAIL PROTECTED] wrote:
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
experiment with .css('visibility','hidden') instead of hide() as the
latter could make other page elements move around disconcertingly.
Joel Birch.
[jQuery] Re: Superfish hover question
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 LI. The only way I found for the expected behavior to occur was if I included an empty nested second-level UL. You can see it in this example: ul class=nav li class=current a href=/Home/a ul/ul /li li a href=#menu item/a ul lia href=#menu item/a/li lia href=#menu item/a/li lia href=#menu item/a/li /ul /li /ul So, while it works, it's not semantically correct and I'm wondering if there's another, semantically correct way, of handling this? Thanks!
[jQuery] Re: superfish v1.3.1 question
Carleigh, that is a excellent example of what can be achieved with Superfish, thanks for sharing Davd Buchholz
[jQuery] Re: superfish v1.3.1 question
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. Now I have - so thanks! I think commenting out that code you indicated will remove keyboard access to the submenus. The user probably won't be able to use the tab key to move through the links and have the submenus open as required. That said, from the large amount of links in your menu it's easy to understand why that code slows down the initialisation of the menu. I guess you need to decide if the performance increase of commenting out that code justifies the accessibility hit of losing keyboard access to the submenus. Regarding upgrading: to help you decide if you should upgrade please look at the changelog to see what improvements have been made since 1.3.1 - http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt many of the changes don't affect your menu type but a couple do, including one related to increasing performance on initialisation and another that fixes a disappearing text bug in IE. I'm pretty sure that you won't need to alter any CSS and the new JS file should just replace your current one without any other changes. Thanks again for showing me your site Carleigh - very interesting. Joel Birch. P.S. in your example code I think you also need to include the following .end() within the commented out block as that is supposed to reverse the .find() that you want to comment out.
[jQuery] Re: superfish animation (yet another )
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 has worked. Some times the old tricks are, in fact, the best trick. On Jun 10, 5:34 am, Joel Birch [EMAIL PROTECTED] wrote: Hey thanks for the props! ;) Theanimationworks fine when I check your previous link - I assume you found that issue. As for centring the nav items - I've never attempted that before. The CSS currently depends on floating left so I can imagine you would have trouble getting them centred. However, read through this article on 24 Ways - it shows how to centre a tab navigation and could probably be slightly adapted for what you want:http://24ways.org/2005/centered-tabs-with-css Cheers Joel Birch.
[jQuery] Re: superfish animation (yet another )
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 PROTECTED] wrote: 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.
[jQuery] Re: superfish animation (yet another )
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 look good. I appreciate it greatly! On Jun 5, 4:19 am, Joel Birch [EMAIL PROTECTED] wrote: 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.
[jQuery] Re: superfish help
great, that will work. thanks.
[jQuery] Re: Superfish IE Trobule
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] wrote: Have a look at this page:http://72.167.210.71/stage/ The horizontal nav menu uses Superfish and its working great except on the home page with IE 6 7. This almost certainly has to do with IE absolute positioning bugs which have tried to solve but so far eludes me. The home page uses jquery innerfade to display a list of images one at a time and fade then in and out at specified intervals. Any suggestions a much appreciated. Thank you
[jQuery] Re: superfish help
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: http://www.strathcona.vic.edu.au/ Hover over Term dates or OSA to see what I did there. Joel Birch.
[jQuery] Re: Superfish help
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 Cherne(hoverIntent)...you have changed my life. On Jun 6, 9:56 am, jwadenpfuhl [EMAIL PROTECTED] wrote: Is there a way to have a delay on the mouseover event for a superfish menu?
