[jQuery] superfish IE error - pleasee help
Hi All, this is the error i get in superfish menu in joomla
jQuery.noConflict();
jQuery(function($){ $("ul.sf-menu").superfish({hoverClass:'sfHover',
pathClass:'active', pathLevels:0, delay:800, animation:
{opacity:'show'}, speed:'def', autoArrows:0, dropShadows:1}) });
jQuery(window).load( function() {jQuery("ul.sf-
menu").superfish_width_mod({ vertical:0, menuWidth:'100%', equalWidth:
0, resizeSeps:0, resizeSubMenus:0 }) })
jQuery.event.special.hover.delay = 100;
jQuery.event.special.hover.speed = 100;
Now Charlie (another user on this forum) says it could be the window
load function...it isnt, still gives errors, according to the error
report in IE its something to do with the bit around "ul.sf-menu" on
the fourth line down...any help would be greatly appreciated.
Chris
Re: [jQuery] superfish joomla
You forgot to put ; after }) a couple of times.
IE is a bit strict in that regard.
Jonathan
Eddie wrote:
Hello all at jquery group, superfish menu in joomla works fantastic
but it gives an error in IE8 and my client hates it! the "done, but
with errors" this is the errordoes anyone know how to fix it!!
Best,
Chris
Message: Object doesn't support this property or method
Line: 48
Char: 35
Code: 0
URI: http://www.rallybrc.co.uk/
this is the code around line 48:
jQuery.noConflict();
jQuery(function($){ $("ul.sf-menu").superfish({hoverClass:'sfHover',
pathClass:'active', pathLevels:0, delay:800, animation:
{opacity:'show'}, speed:'def', autoArrows:0, dropShadows:1}) });
jQuery(window).load( function() { jQuery("ul.sf-
menu").superfish_width_mod({ vertical:0, menuWidth:'100%', equalWidth:
0, resizeSeps:0, resizeSubMenus:0 }) })
jQuery.event.special.hover.delay = 100;
jQuery.event.special.hover.speed = 100;
--
Jonathan Vanherpe - Tallieu & Tallieu nv - jonat...@tnt.be
Re: [jQuery] superfish joomla
Try removing the window.load function, it makes no sense to bind the
different menu functions to different page load events
jQuery.noConflict();
jQuery(function($){ // this is document ready
$("ul.sf-menu").superfish({hoverClass:'sfHover',
pathClass:'active', pathLevels:0, delay:800, animation:
{opacity:'show'}, speed:'def', autoArrows:0, dropShadows:1})
jQuery("ul.sf-menu").superfish_width_mod({ vertical:0,
menuWidth:'100%', equalWidth:
0, resizeSeps:0, resizeSubMenus:0 })
jQuery.event.special.hover.delay = 100;
jQuery.event.special.hover.speed = 100;
});// end document ready
Eddie wrote:
Hello all at jquery group, superfish menu in joomla works fantastic
but it gives an error in IE8 and my client hates it! the "done, but
with errors" this is the errordoes anyone know how to fix it!!
Best,
Chris
Message: Object doesn't support this property or method
Line: 48
Char: 35
Code: 0
URI: http://www.rallybrc.co.uk/
this is the code around line 48:
jQuery.noConflict();
jQuery(function($){ $("ul.sf-menu").superfish({hoverClass:'sfHover',
pathClass:'active', pathLevels:0, delay:800, animation:
{opacity:'show'}, speed:'def', autoArrows:0, dropShadows:1}) });
jQuery(window).load( function() { jQuery("ul.sf-
menu").superfish_width_mod({ vertical:0, menuWidth:'100%', equalWidth:
0, resizeSeps:0, resizeSubMenus:0 }) })
jQuery.event.special.hover.delay = 100;
jQuery.event.special.hover.speed = 100;
[jQuery] superfish joomla
Hello all at jquery group, superfish menu in joomla works fantastic
but it gives an error in IE8 and my client hates it! the "done, but
with errors" this is the errordoes anyone know how to fix it!!
Best,
Chris
Message: Object doesn't support this property or method
Line: 48
Char: 35
Code: 0
URI: http://www.rallybrc.co.uk/
this is the code around line 48:
jQuery.noConflict();
jQuery(function($){ $("ul.sf-menu").superfish({hoverClass:'sfHover',
pathClass:'active', pathLevels:0, delay:800, animation:
{opacity:'show'}, speed:'def', autoArrows:0, dropShadows:1}) });
jQuery(window).load( function() { jQuery("ul.sf-
menu").superfish_width_mod({ vertical:0, menuWidth:'100%', equalWidth:
0, resizeSeps:0, resizeSubMenus:0 }) })
jQuery.event.special.hover.delay = 100;
jQuery.event.special.hover.speed = 100;
Re: [jQuery] Superfish text color with parent - Really need help, thanks
On Tue, Feb 9, 2010 at 9:15 PM, Gary Herbstman wrote: > So ".sf-menu li.sfHover > a" > > Applies that style to any A element that is a child of li.sfHover that > is a descendent of sf-menu. Right. > What in superfish is happening? Is the code setting the attribute > sfHover to the item when you traverse its children? Just about - it looked like superfish was adding the sfHover class to each item as it was hovered over and its menu expanded. You can use the Firefox addon Firebug to watch the classes and styles change. Nathan
RE: [jQuery] Superfish text color with parent - Really need help, thanks
So ".sf-menu li.sfHover > a" Applies that style to any A element that is a child of li.sfHover that is a descendent of sf-menu. What in superfish is happening? Is the code setting the attribute sfHover to the item when you traverse its children? -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of Nathan Klatt Sent: Tuesday, February 09, 2010 8:02 PM To: jquery-en@googlegroups.com Subject: Re: [jQuery] Superfish text color with parent - Really need help, thanks On Tue, Feb 9, 2010 at 5:45 PM, Gary Herbstman wrote: > Cool, That did the trick, THANKS! You're welcome. > I would love to understand this better. What exactly is this doing? Well, what's happening is the cascade. Where there are style clashes, whatever rule is the most specific/has the highest specificity will be applied. Read through this first link - or even just the table at the top - with an eye for the rule you had and what I added and I think you'll get it. http://www.w3.org/TR/CSS21/selector.html http://www.w3.org/TR/CSS21/cascade.html Nathan
Re: [jQuery] Superfish text color with parent - Really need help, thanks
On Tue, Feb 9, 2010 at 5:45 PM, Gary Herbstman wrote: > Cool, That did the trick, THANKS! You're welcome. > I would love to understand this better. What exactly is this doing? Well, what's happening is the cascade. Where there are style clashes, whatever rule is the most specific/has the highest specificity will be applied. Read through this first link - or even just the table at the top - with an eye for the rule you had and what I added and I think you'll get it. http://www.w3.org/TR/CSS21/selector.html http://www.w3.org/TR/CSS21/cascade.html Nathan
RE: [jQuery] Superfish text color with parent - Really need help, thanks
Cool, That did the trick, THANKS! I would love to understand this better. What exactly is this doing? -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of Nathan Klatt Sent: Tuesday, February 09, 2010 16:25 To: jquery-en@googlegroups.com Subject: Re: [jQuery] Superfish text color with parent - Really need help, thanks On Tue, Feb 9, 2010 at 2:23 PM, garyh wrote: > I am new to superfish and generally have the menu working except for > one problem. When navigating to a sub menu the parent is properly > keeping it's background color but the text color is reverting to its > normal color. There is a link to the site below to see an example. > > http://dev.beckermd.com/ Hey Gary, Not having easier access to your code I'm not sure if this is the best fix for your issue but adding the specifier ".sf-menu li.sfHover > a" to line 93 of your superfish.css file (currently has .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active) seems to do the trick. Nathan
[jQuery] Superfish accesskeys
I need some help to use accesskeys of superfish, to press something and open a bar of the menu...
Re: [jQuery] Superfish text color with parent - Really need help, thanks
On Tue, Feb 9, 2010 at 2:23 PM, garyh wrote: > I am new to superfish and generally have the menu working except for > one problem. When navigating to a sub menu the parent is properly > keeping it's background color but the text color is reverting to its > normal color. There is a link to the site below to see an example. > > http://dev.beckermd.com/ Hey Gary, Not having easier access to your code I'm not sure if this is the best fix for your issue but adding the specifier ".sf-menu li.sfHover > a" to line 93 of your superfish.css file (currently has .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active) seems to do the trick. Nathan
[jQuery] Superfish text color with parent - Really need help, thanks
I am new to superfish and generally have the menu working except for
one problem. When navigating to a sub menu the parent is properly
keeping it's background color but the text color is reverting to its
normal color. There is a link to the site below to see an example.
http://dev.beckermd.com/
Herre is the associated css
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu
a:hover, .sf-menu a:active
{
background: #AB8890 URL(../images/menu_btn_hover_2.gif) repeat-x
scroll 0 0;
outline: 0;
color: #FF;
}
This site seems to implement it properly but I cannot tell where my
issue is.
http://jquerystuff.net/random/superfish/
Re: [jQuery] Superfish - Different colors for each menu column
if you need a different background for each class hover likely have to
build a series like following
.sf-menu li.green:hover, .sf-menu li.green.sfHover,
.sf-menu li.green a:focus, .sf-menu li.green a:hover, .sf-menu li.green a:active {
background: #CFDEFF;
outline: 0;
}
PTwatch wrote:
I'm trying to come up with an approach to assign a different color scheme for
each main group (column).
ie:
# Menu1
#a Menu2
#aa Menu2-subitem1
#aa Menu2-subitem2
and
Superfish.css is:
.
.
.
.sf-menu li {
background: #BDD2FF;
}
.sf-menu li.green {
background: #00AA00;
}
.sf-menu li.red {
background: #AA;
}
.sf-menu li li {
background: #AABDE6;
}
.sf-menu li li.green {
background: #00AA00;
}
.sf-menu li li li {
background: #9AAEDB;
}
BUT HOW DO I use class of green or red here?
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #CFDEFF;
outline: 0;
}
Any help is appreciated
Re: [jQuery] Superfish - Only works on home page, not site Pages
are you using abslolute or relative url's for source files? if relative probably have to switch to absolute initialsbr wrote: I'm not sure what's wrong. I'm building a site in Wordpress. I followed the directions on the Superfish site and things look good on the home page but then the HTML just shows up on the site Pages. Any help? Suggestions? Thanks!
[jQuery] Superfish - Different colors for each menu column
I'm trying to come up with an approach to assign a different color scheme for
each main group (column).
ie:
# Menu1
#a Menu2
#aa Menu2-subitem1
#aa Menu2-subitem2
and
Superfish.css is:
.
.
.
.sf-menu li {
background: #BDD2FF;
}
.sf-menu li.green {
background: #00AA00;
}
.sf-menu li.red {
background: #AA;
}
.sf-menu li li {
background: #AABDE6;
}
.sf-menu li li.green {
background: #00AA00;
}
.sf-menu li li li {
background: #9AAEDB;
}
BUT HOW DO I use class of green or red here?
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #CFDEFF;
outline:0;
}
Any help is appreciated
--
View this message in context:
http://old.nabble.com/Superfish---Different-colors-for-each-menu-column-tp27252875s27240p27252875.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Superfish - Only works on home page, not site Pages
I'm not sure what's wrong. I'm building a site in Wordpress. I followed the directions on the Superfish site and things look good on the home page but then the HTML just shows up on the site Pages. Any help? Suggestions? Thanks!
[jQuery] Superfish - "drop up" rather than down
HI, I'm trying to implement a superfish navbar but I need the menus to slide up rather than down on mouseover. Has anyone done this before...any tips? thanks.
[jQuery] Superfish - Horizontal and vertical superfish menus on the same page
Hi! can someone please tell me how to change the css so that a horizontal and a vertical superfish menus can coexist on the same page without interfering? I will use a Joomla extension module for this. Best regards, Pier
[jQuery] Superfish
I'm a beginner developing drupal on mysql. Looking for the easiest way to setup drop down menus, since NICE MENUS seems to disapear for all user's asside from the master user. Is Superfish for me?
[jQuery] Superfish jquery.noconflict and ajax problem
Having a big issue here on my joomla website. I'm trying to integrate a video component called Jvideodirect. The main listings portion of Jvideo is run by ajax and has a tab system. You can see the page in question here: http://www.globallinkup.net/video.html When you click on any of the page items with the dot above them (e.g., Featured, Recent, Popular, etc.), only the video list should change; the window should remain the same with the template intact. See demo (http://demo.jvideodirect.com/) On my site, however, a new page open up with the template broken. The Jvideo staff says it's an issue with the Superfish js files. And they're right; as soon as I disable them, the video component works as it's designed to. From what I can tell, the Superfish files are in jquery.noconflict mode. Can someone please help? I'm at a loss here.
[jQuery] Superfish - Arrows don't display on dropdown
I'm really excited to use this bu the arrows aren't displaying on my
menu. Here's the code I've got in the ...
$(document).ready(function(){
$("ul.sf-menu").supersubs({
minWidth:12,
maxWidth:27,
extraWidth: 1,
autoArrows: true,
}).superfish();
});
Here's what I've got in the body...
http://localhost:/claykirkland/";>home
http://localhost:/claykirkland/bio/";>bio
musical
personal
http://localhost:/claykirkland/events/";>events
http://localhost:/claykirkland/music/";>music
http://localhost:/claykirkland/photos/";>photos
http://localhost:/claykirkland/bio/";>shop
checkout
menu
item
In the css I show that the images at...
http://localhost:/claykirkland/superfish/images/
I'm building this using MAMP and Wordpress on my computer. I don't get
it. Everything else works great.
Help!
[jQuery] SuperFish - Auto width of main menu when vertical
Using a vertical menu and supersubs so that the submenus all have the correct width. The only thing missing is I need the main vertical menu to size itself to the correct width too! How can we make supersubs also correctly autosize the main items on the vertical menu?
[jQuery] Superfish - Function request: Supporting JQuery UI Theme
Hi, I am really missing JQuery UI theme support in superfish. Could you consider to implement it in next version? Have a great day! Wei
Re: [jQuery] Superfish: 2nd dropdown positioning
link doesn't work mcpilot wrote: I have Superfish installed on a website and have a 3-tier dropdown. li/ li/li. The 3rd tier is not positioned correctly, it's behind the second tier. (http://208.84.152.20/~loveland1) Lookiung for the CSS line to tweak to move that out. Pat
[jQuery] Superfish: 2nd dropdown positioning
I have Superfish installed on a website and have a 3-tier dropdown. li/ li/li. The 3rd tier is not positioned correctly, it's behind the second tier. (http://208.84.152.20/~loveland1) Lookiung for the CSS line to tweak to move that out. Pat
Re: [jQuery] Superfish Move sub items
The sub menu ul's are absolute positioned at {left:-999} when not
visible, then at {left:0} when visible.
To adjust position you need to modify the {left:0}
NetReach Australia wrote:
Hi,
I'm using Superfish menu system on my website and I am attempting to
move the sub items across, but when I put a margin-left on it, it
moves both the sub items and the sub sub items. How can I have only
the sub items move?
Re: [jQuery] Superfish - any way to change the color?
modify the superfish.css to accomodate design zeebaah wrote: Hello. Ive just got the Superfish mod for my site but the blue color dosnt look good with the design on my page and makes it impossible to read the text in the menu, any way to change the color of the menu to red like the old menu at (http://medielinjen.pgu.dk/joomla) youll be able to see how the menu look at the menu point (Arrangementslisten - http://medielinjen.pgu.dk/joomla/index.php?option=com_content&view=article&id=122&Itemid=63) Best regards Zeebaah
[jQuery] Superfish - any way to change the color?
Hello. Ive just got the Superfish mod for my site but the blue color dosnt look good with the design on my page and makes it impossible to read the text in the menu, any way to change the color of the menu to red like the old menu at (http://medielinjen.pgu.dk/joomla) youll be able to see how the menu look at the menu point (Arrangementslisten - http://medielinjen.pgu.dk/joomla/index.php?option=com_content&view=article&id=122&Itemid=63) Best regards Zeebaah
[jQuery] Superfish Move sub items
Hi, I'm using Superfish menu system on my website and I am attempting to move the sub items across, but when I put a margin-left on it, it moves both the sub items and the sub sub items. How can I have only the sub items move?
[jQuery] Superfish IE6 dies with opacity CSS attribute
I have experimented in a variety of ways, and when I use the opacity
CSS attribute, it kills the next level of the menu in IE6, FF as
always no prob.
Thus, when I had the CSS opacity code to , does not appear.
If I add it to , then the second level ( ) does
not appear. The menu's next level does not slide down, or out...
E.g. I am adding:
.sf-menu li li {
filter: alpha(opacity=80);
}
to the Custom CSS field in the Joomla mod_superfishmenu module.
I am using jQuery 1.2.6 and loading all SuperFish JS after mootools.js
I have also tried add it directly to superfish.css.
Any ideas or confirmation this problem exists for others out there??
I would love to add the animation, but can't get beyond opacity.
Thx! Great script!
[jQuery] Superfish
Alright, so I have a Superfish menu with a rotating flash banner rotator. When I highlight over my menu item that has sub items, it goes behind the flash instead over top of it. Is there a way to correct this issue?
Re: [jQuery] superfish navbar submenu
a link would help. There are likely some simple css solutions to your problem Anne wrote: Hi all, I am brand new to this. I have downloaded the sample files. I added the navbar css to the example.html file. Everything works. My problem is that the submenu is visible when I first load the page before I have hovered over anything. Before I get into this any further, is there a way to fix that? Thanks for your help. Anne.
[jQuery] Superfish - Working locally but not working live
Very confused. Working on a Wordpress site/theme and integrating superfish for the main (pages) navigation. Everything is working on locally (running XAMPP on an XP box), but on the live site, child pages are not appearing as dropdowns. I can see in the source that the children are being written into the page, but they are not visible. Currently staging at: http://mobileepiphany.com.previewdns.com/ - there should be two children beneath ABOUT. Once again, this IS WORKING on my localhost: ABOUT has two children and the menu adds a » arrow to indicate that it's a dropdown. Any insight/help/pointers would be greatly appreciated.
[jQuery] Superfish separator
Hi, Only found superfish today, and man oh man do I love it! It's fantastic, and so customisable. My only problem I am having, is getting a separator to show between the menu items! I have tried editing mod_superfishmenu.php and in the xml file and just can't get it to show up. Tried stuff with the CSS as well, and for love nor money (not that I've tried money) can I get them to show! ANY help would be appreciated, even if someone just told me which file to look in!! Thanks again for the awesome project! Regards, eddybaby
Re: [jQuery] SUPERFISH - submenus not
site isn't loading jquery , or superfish css and script files. Suggest removing one version of jQuery and only loading one. Check the paths to all these files. If they are avaialbel at the correct path you should be able to open them in a browser. Example: http://www.assured-it.com/modules/mod_superfishmenu/tmpl/js/jquery.js Doesn't exist at this URL assur3 wrote: Joel, Thanks for a great module. Everything seems to work well except I can't get the submenus to "hide" with the Suckerfish effects. All submenus are displayed with no mouseover. I must be doing something terribly stupid because no one else seems to have this problem! Forgive my dumb question, but I've tried various settings, checked out my template.css file, etc. but everything seems kosher. My site is www.assured-it.com. The template I'm using is the new Dominion template from Rockettheme with the Gantry architecture. In case you need administrator, you can use the "brock" login with "susukuu" as the password. Any advice you can give me what I'm doing wrong? Thanks. Brock Hotaling
[jQuery] Superfish 1.4.8 accessibility enhancement
Superfish is a jQuery plugin for progressive enhancement of suckerfish- style HTML/CSS drop-down menus. It can be found at http://users.tpg.com.au/j_birch/plugins/superfish/ The original Superfish plugin used jQuery's hide() method, which sets an inline css attribute of display: none on the hidden menus. This has the unintended effect of making screen readers skip over the submenus. Since screen readers cannot easily trigger the hover event, this effectively blocks them from accessing any of the sub menu items. This modification changes the css technique used to hide the menus visually while leaving them available for screen readers. You can grab the updated code here http://jsbin.com/useku (Apologies if this is the wrong place for this posting - the author of the original Superfish plugin mentioned this list as the place for support for the plugin. Thanks!) Jason Denizac
[jQuery] superfish menu problem
Can we keep different color for different menu items . If yes Can you please tell me how to do it.
[jQuery] SUPERFISH - submenus not
Joel, Thanks for a great module. Everything seems to work well except I can't get the submenus to "hide" with the Suckerfish effects. All submenus are displayed with no mouseover. I must be doing something terribly stupid because no one else seems to have this problem! Forgive my dumb question, but I've tried various settings, checked out my template.css file, etc. but everything seems kosher. My site is www.assured-it.com. The template I'm using is the new Dominion template from Rockettheme with the Gantry architecture. In case you need administrator, you can use the "brock" login with "susukuu" as the password. Any advice you can give me what I'm doing wrong? Thanks. Brock Hotaling
[jQuery] SUPERFISH - version of jQuery
Joel, I forgot that on my site I installed SC jQuery, because that's the only version I found for Joomla. Is that OK, or do I need a different version?
[jQuery] superfish navbar submenu
Hi all, I am brand new to this. I have downloaded the sample files. I added the navbar css to the example.html file. Everything works. My problem is that the submenu is visible when I first load the page before I have hovered over anything. Before I get into this any further, is there a way to fix that? Thanks for your help. Anne.
[jQuery] superfish
is it possible to link superfish menu with virtuemart? regards
[jQuery] Superfish Nav-bar Joomla issue
I'm using the superfish module for joomla 1.5 all options except Nav- bar seem to work fine i have a fix menu area width 705px the 1st and 3rd levels are fine however the second level does not fill the entire 705px and instead folds into a 3rd line any ideas on how to get it to fill out the width?
[jQuery] Superfish showing problems in IE7
Hello there, I am using Superfish for some Joomla websites. I face problems on the following sites an hope that you can help me out with it: http://stophersentumoren.woosh.nl: 1. When hovering on a list item that has children, the item appears to become smaller (the chaniging background color moves to left a little bit and does not cotain teh full arrow-image that should be in it). 2. The menu gives problems showing the left column of the website (the header-text disappears as well as the text of the first news item) http://www.atosrtv.nl 1. The child-items are being overrun by their neighbouring parents 2. The menu-items ahow underneath teh main content div I really hope that you can help me out with this... Regards, Frank The Netherlands
Re: [jQuery] Superfish - Which files to edit (Simple question) ?
joomla extension will take care of inserting the head code needed as
well as provide various options in the admin for setting up menu.
Follow the extension instructions. Superfish website isn't really set
up for CMS extension installs, like Joomla, however the css tricks will
likely be useful
MiguelGarcia wrote:
Hello to all...
I was looking to user comments at joomla extentions for Superfish and
it seams to be very interesting Suckerfish solution.
Before start with, I will need to put a question:
When I go to http://users.tpg.com.au/j_birch/plugins/superfish/#examples
, looking at basic style tab, in the box named "The Code" I can see:
1-
//link to the CSS files for this menu type
2-
// link to the _javascript_ files (hoverIntent is optional)
3-
// initialise Superfish
$(document).ready(function(){
$("ul.sf-menu").superfish();
});
My questions are very simple ones:
a)
Into which files must I put this code ( from points 1 , 2 and 3) ?
template css? index.php ? any other ???
b)
after this, if I create sub menu items in my top menu (thourhg joomla
administrator), will they show up when I put the mouse over them or
will I need to code something else?
If yes, what ?
Lots of thanks in advance,
Miguel Garcia
[jQuery] Superfish - Which files to edit (Simple question) ?
Hello to all...
I was looking to user comments at joomla extentions for Superfish and
it seams to be very interesting Suckerfish solution.
Before start with, I will need to put a question:
When I go to http://users.tpg.com.au/j_birch/plugins/superfish/#examples
, looking at basic style tab, in the box named "The Code" I can see:
1-
//link to the CSS files for this menu type
2-
// link to the JavaScript files (hoverIntent is optional)
3-
// initialise Superfish
$(document).ready(function(){
$("ul.sf-menu").superfish();
});
My questions are very simple ones:
a)
Into which files must I put this code ( from points 1 , 2 and 3) ?
template css? index.php ? any other ???
b)
after this, if I create sub menu items in my top menu (thourhg joomla
administrator), will they show up when I put the mouse over them or
will I need to code something else?
If yes, what ?
Lots of thanks in advance,
Miguel Garcia
Re: [jQuery] superfish: disable arrows in first list
simple solution is use css to hide them, or use jquery to remove them Thies wrote: Hi, is it possible to "disable" the arrows at superfish only at the first list, so that the arrow will only be shown in the sublists? Thanx a lot Frank, Germany
[jQuery] superfish: disable arrows in first list
Hi, is it possible to "disable" the arrows at superfish only at the first list, so that the arrow will only be shown in the sublists? Thanx a lot Frank, Germany
Re: [jQuery] superfish menu issues
can't tell what the problem is when you use default styling. Would be much easier to help if the problem was visible, not theoretical watchbill wrote: I searched and tried implementing some suggestions regarding the desire for transparent first level navigation so it will show the sites nav bar gradient image. I am using a php include for the navigation so if i need to make changes or additions to the sites navigation I can do it in one place. My site utilizes a css stylesheet for the overall site layout so I'm adding the sf-menu class tag and then calling the php include navtop1.php. I put up a test page at http://isltcforme.com/indexa.php My issue is I would like to know how to make the superfish menu look more like my site. I reverted back to the original superfish.css and sf-nav.css since the changes didn't show the desired changes in ie7 or firefox 3.5.6 what am i doing wrong or what is the fix?
[jQuery] superfish menu issues
I searched and tried implementing some suggestions regarding the desire for transparent first level navigation so it will show the sites nav bar gradient image. I am using a php include for the navigation so if i need to make changes or additions to the sites navigation I can do it in one place. My site utilizes a css stylesheet for the overall site layout so I'm adding the sf-menu class tag and then calling the php include navtop1.php. I put up a test page at http://isltcforme.com/indexa.php My issue is I would like to know how to make the superfish menu look more like my site. I reverted back to the original superfish.css and sf-nav.css since the changes didn't show the desired changes in ie7 or firefox 3.5.6 what am i doing wrong or what is the fix?
[jQuery] [Superfish] onHide event fires more than it should
Hello.
Just started using the Superfish plugin - wonderful job.
I'm trying to use the "onHide" event but have noticed that the event
is fired more frequently than necessary:
$("ul.sf-menu").supersubs({
minWidth:12, // minimum width of sub-menus
in em units
maxWidth:55, // maximum width of sub-menus
in em units
extraWidth: 1 // extra width can ensure lines
dont sometimes turn over
// due to slight rounding
differences and font-family
}).superfish({
onHide: function(){alert("hide")}
}).find("ul").bgIframe({opacity:false}); // call
supersubs first, then superfish, so that subs are
// not display:none when measuring.
Call before initialising
// containing tabs for same
reason.
The event appears to fire when the page is initialised, before the
menu is displayed, when the menu is clicked, and when the menu is
hidden.
Is this expected behaviour?
Re: [jQuery] Superfish - current sublevel visible
question is clear ..solution however would take some custom coding of the 2 main hide/show functions within plugin if you manage to create a solution please post it here, others have had same request tominou50 wrote: Hello, I'd like to know if it's possible that the current sublevel ul is always visible except when i rollover other main items and when i roll out other main items the current sublevel ul go back to visible status... am i clear ??? Many Thanks Thomas
[jQuery] Superfish - current sublevel visible
Hello, I'd like to know if it's possible that the current sublevel ul is always visible except when i rollover other main items and when i roll out other main items the current sublevel ul go back to visible status... am i clear ??? Many Thanks Thomas
Re: [jQuery] Superfish and Wordpress
you have a bunch of issues going on. First take the $(document).ready
superfish constructor out of the internal functions of the plugin.
Calling the plugin itself from within the plugin code is asking for
problems( and it is throwing an error in Firebug)
since you have multiple script libraries you'll likely need to use
jQuery.noConflict
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
remove multiple loads of same script in head ( example Hoverintent.js),
this is asking for problems
the selector you use to construct superfish isn't referencing the menu
".sf-menu" within a selector refers to element(s) with class name
"sf-menu" and you don't have any
you can use any selector that applies to the main menu ul as long as it
will reference that ul. Script won't work if you don't tell it where to
do the magic
http://docs.jquery.com/Selectors
Rob wrote:
I am having trouble getting my wordpress theme to use the Superfish in
the nav menu. My problem is I have subcategories that go 3 tabs deep
and currently it is very tough to navigate through the drop down menu
so I wanted to get Superfish to work since I have used it with other
non-Wordpress sites in the past.
a link to the site I am working on is http://robgivans.com/hssportszone/
I have called these files.
//link to the CSS files for this menu type
// link to the _javascript_ files (hoverIntent is optional)
Then right above my Navbar I have called the script file for super
fish, this is exactly how it is in my file.
$(document).ready(function(){
$("ul.sf-menu").supersubs({
minWidth:12, // minimum width of sub-menus in em
units
maxWidth:27, // maximum width of sub-menus in em
units
extraWidth: 1 // extra width can ensure lines don't
sometimes turn over
// due to slight rounding differences
and font-family
}).superfish(); // call supersubs first, then superfish, so
that subs are
// not display:none when measuring. Call
before initialising
// containing tabs for same reason.
});
Home
I have changed the DIV Navbar to sf-menu but it makes no difference.
If you have any idea what I could be doing wrong please let me know, I
have been messing with this way too long, maybe I am missing something
stupid. Thanks.
[jQuery] Superfish - How to integrate template into CSS?
Hi, I'm having big CSS issues on how to integrate my existing 'graphical' rounded corners on the front end of my site. I plan on having the orignal rounded top menu and then the drop down sections can just be rectangles.. my site: www.newtoneentertainment.com.au/index.php (still in draft) and the CSS of the template http://www.newtoneentertainment.com.au/templates/theme176/css/template.css Any idea on how I can make the rounded corners and backgrounds be like the template.. I'm a bit lost. Thanks :)
[jQuery] Superfish and Wordpress
I am having trouble getting my wordpress theme to use the Superfish in
the nav menu. My problem is I have subcategories that go 3 tabs deep
and currently it is very tough to navigate through the drop down menu
so I wanted to get Superfish to work since I have used it with other
non-Wordpress sites in the past.
a link to the site I am working on is http://robgivans.com/hssportszone/
I have called these files.
//link to the CSS files for this menu type
// link to the JavaScript files (hoverIntent is optional)
Then right above my Navbar I have called the script file for super
fish, this is exactly how it is in my file.
$(document).ready(function(){
$("ul.sf-menu").supersubs({
minWidth:12, // minimum width of sub-menus in em
units
maxWidth:27, // maximum width of sub-menus in em
units
extraWidth: 1 // extra width can ensure lines don't
sometimes turn over
// due to slight rounding differences
and font-family
}).superfish(); // call supersubs first, then superfish, so
that subs are
// not display:none when measuring. Call
before initialising
// containing tabs for same reason.
});
Home
I have changed the DIV Navbar to sf-menu but it makes no difference.
If you have any idea what I could be doing wrong please let me know, I
have been messing with this way too long, maybe I am missing something
stupid. Thanks.
[jQuery] Superfish - Background Color on Sub-Menus
I'm using a Superfish menu for the top menu at the following site:
http://theratrike.com
The first-level menu has an image behind it and the default background
color for the list items was transparent, which made it look nice.
However, when you hovered over a first-level item to expose the sub-
menu, the background for the sub-menu items was also transparent.
Since the sub-menu drops down, the other elements of the page show
through the sub-menu items and make them hard to read.
So, I added a background color to the .sf-menu as follows:
.sf-menu a {
border-left:1px solid #fff;
border-top: 1px solid #fff;
padding:.1em .1em;
background: #f5f5f5;
text-decoration:none;
}
That solves the problem for the sub-menu items, but now the background
color is also covering the image behind the first-level menu items. Is
it possible to have the first-level items with a transparent
background and the sub-menu items with a solid background? If so, how
do I accomplish that?
Thanks.
[jQuery] Superfish License
Hi, I was hoping to use your code in a commercial Wordpress theme I intend to sell in an online marketplace. Is that OK? I can't find a license, so I assume its OK to use commercially, but I wanted to check with you. I'd be glad to put a link to your site in the code, and even place a small donation. Thanks for the great code! Shaun
Re: [jQuery] Superfish dropdown shows only inside containing li
have you tried disabling the superfish.js and let menu operate in css
only mode? not sure how anyone can help without a link
Eelco wrote:
Hi,
I am using superfish in a Joomla template, and it works fine in all
browsers including IE6 and IE8, not in IE7 however. I do not have any
positioned elements, its just that it seems as if the containing li's,
have overflow:hidden, which they don't have. I can see that it works
in IE7 because I have applied small negative margins, so a small piece
of the dropdown actually appears inside the containing
I would provide you with a link, however I prefer to do so privately
if needed.
My code:
Visie
»
Strategie
CSS:
#menu ul {
list-style-type: none;
padding-left:15px;
}
#menu li {
display:block;
float:left;
padding:2px 0;
height:23px;
}
/* Opacity, exclude IE6 */
html>body #menu ul li {
filter:alpha(opacity=70);
opacity: 0.7;
}
/* Firefox children inherit transparency, IE children don't */
html>body #menu ul li li, x:-moz-any-link {
filter:alpha(opacity=100);
opacity: 1;
}
html>body #menu ul li#current li {
filter:alpha(opacity=70);
opacity: 0.7;
}
#menu li#current {
filter:alpha(opacity=100);
opacity:1;
font-weight:bold;
}
#menu ul li ul {
width:150px;
}
#menu ul li li {
padding-left:10px;
}
/* This output is overriden for all except IE6 */
#menu ul li li {
width:150px;
}
html>body #menu ul li li {
width:inherit;
}
/* IE6 Hack */
#menu ul li { width:42px; }
html>body #menu ul li {
width:auto;
}
html>body .separator {
margin-right:13px;
}
#menu ul li ul {
padding: 0;
margin-top: -10px;
margin-left: -17px;
}
#menu a {
text-decoration:none;
color: white;
font-size:10pt;
}
span.separator {
display:block;
margin-top:-2px;
margin-left:18px;
height: 27px;
border-left:1px solid white;
}
Last but not least, Superfish CSS: (I have only disabled two padding
styles)
/*** 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)
*/
list-style: none;
}
.sf-menu ul li {
width: 100%;
list-style: none;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
height: 23px;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul, .sf-menu li#parent: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, .sf-menu li#parent:hover 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: 1px solid #fff;*/
/*border-top: 1px solid #CFDEFF;*/
height: 23px;
xpadding: 0 1em; /* ET: DISABLED, IE6 DID NOT LINE OUT PROPERLY
14-12-2009 */
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6
applies text colour*/
color: #13a;
}
.sf-menu li {
/*background: #BDD2FF;*/
}
.sf-menu li li {
background: #2ea2da;
filter: alpha(opacity=70);
opacity: 0.7;
}
.sf-menu li li li {
background: #9AAEDB;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
/*background: #CFDEFF;*/
outline: 0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
xpadding-right: 2.25em; /* ET: DISABLED, IE6 DID NOT LINE OUT
PROPERLY 14-12-2009 */
min-width: 1px; /* trigger IE7 hasLayout so spans position
accurately */
}
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('../images/arrows-ff.png') no-repeat -10px
-100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;
background-position: 0 -100px; /* use translucent arrow for modern
browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern
browsers*/
}
/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hove
Re: [jQuery] Superfish, menu out of screen
this thread should help http://groups.google.com/group/jquery-en/browse_thread/thread/255652615420722c/093dd27ff7f2e7b3?lnk=gst&q=superfish+onbeforeshow#093dd27ff7f2e7b3 jonas wrote: Hi! Is is possible to check if a new UL is rendered outside the browser window? When using Superfish with default settings, UL's can get rendered outside the browser window if we have manu child levels, which just enables the browser scroll. We would for example like the UL to be rendered to the left, instead of on the right. Any thoughts? Regards Jonas
[jQuery] Superfish, menu out of screen
Hi! Is is possible to check if a new UL is rendered outside the browser window? When using Superfish with default settings, UL's can get rendered outside the browser window if we have manu child levels, which just enables the browser scroll. We would for example like the UL to be rendered to the left, instead of on the right. Any thoughts? Regards Jonas
[jQuery] Superfish dropdown shows only inside containing li
Hi,
I am using superfish in a Joomla template, and it works fine in all
browsers including IE6 and IE8, not in IE7 however. I do not have any
positioned elements, its just that it seems as if the containing li's,
have overflow:hidden, which they don't have. I can see that it works
in IE7 because I have applied small negative margins, so a small piece
of the dropdown actually appears inside the containing
I would provide you with a link, however I prefer to do so privately
if needed.
My code:
Visie
»
Strategie
CSS:
#menu ul {
list-style-type: none;
padding-left:15px;
}
#menu li {
display:block;
float:left;
padding:2px 0;
height:23px;
}
/* Opacity, exclude IE6 */
html>body #menu ul li {
filter:alpha(opacity=70);
opacity: 0.7;
}
/* Firefox children inherit transparency, IE children don't */
html>body #menu ul li li, x:-moz-any-link {
filter:alpha(opacity=100);
opacity: 1;
}
html>body #menu ul li#current li {
filter:alpha(opacity=70);
opacity: 0.7;
}
#menu li#current {
filter:alpha(opacity=100);
opacity:1;
font-weight:bold;
}
#menu ul li ul {
width:150px;
}
#menu ul li li {
padding-left:10px;
}
/* This output is overriden for all except IE6 */
#menu ul li li {
width:150px;
}
html>body #menu ul li li {
width:inherit;
}
/* IE6 Hack */
#menu ul li { width:42px; }
html>body #menu ul li {
width:auto;
}
html>body .separator {
margin-right:13px;
}
#menu ul li ul {
padding: 0;
margin-top: -10px;
margin-left: -17px;
}
#menu a {
text-decoration:none;
color: white;
font-size:10pt;
}
span.separator {
display:block;
margin-top:-2px;
margin-left:18px;
height: 27px;
border-left:1px solid white;
}
Last but not least, Superfish CSS: (I have only disabled two padding
styles)
/*** 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)
*/
list-style: none;
}
.sf-menu ul li {
width: 100%;
list-style: none;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
height: 23px;
}
.sf-menu a {
display:block;
position: relative;
}
.sf-menu li:hover ul, .sf-menu li#parent: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, .sf-menu li#parent:hover 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: 1px solid #fff;*/
/*border-top: 1px solid #CFDEFF;*/
height: 23px;
xpadding: 0 1em; /* ET: DISABLED, IE6 DID NOT LINE OUT
PROPERLY
14-12-2009 */
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6
applies text colour*/
color: #13a;
}
.sf-menu li {
/*background: #BDD2FF;*/
}
.sf-menu li li {
background: #2ea2da;
filter: alpha(opacity=70);
opacity:0.7;
}
.sf-menu li li li {
background: #9AAEDB;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
/*background: #CFDEFF;*/
outline:0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
xpadding-right: 2.25em; /* ET: DISABLED, IE6 DID NOT LINE OUT
PROPERLY 14-12-2009 */
min-width: 1px; /* trigger IE7 hasLayout so spans position
accurately */
}
.sf-sub-indicator {
position: absolute;
display:block;
right: .75em;
top:1.05em; /* IE6 only */
width: 10px;
Re: [jQuery] superfish transparent PNG problem IE (8) when dropdown opens
there is nothing in script or css that does anything with images. Example doesn't have images in menu. troop wrote: Hi Everyone! I encountered a really strange behavior of the superfish menu. It works like a charm an FF etc. but on IE 8 (couldn't test it with a lower one yet) the already transparent background of the content DIV gets a gradient transparency when the dropdown gets visible... i couldnt find the part where the PNG alpha chanel is manipulated in superfish, but would be fine with just turning this functionality off, since its not needed anyway... you can look at a example at http://goleon.de/wordp/ just hover over one of the menuentries and youll see what i mean... any help is highly appreciated. Thx, Troop
[jQuery] Superfish - let the navigation fade in AND fade out
I was searching for a plugin that makes me abel to make a dropdown
navigation. I found Superfish and was really happy. But now i realized
that then menuepoints fade in but just pop away if the mouse left
them. I want that the menupoints fade out if the mouse leave them like
on this page
http://demo.joomlaextensions.co.in/index.php?option=com_content&view=article&id=61&Itemid=82
So i started to recode the code of Superfish, but i can´t get it
working.
Heres a small code snippet (the only things i´ve changed)
sf.defaults = {
hoverClass : 'sfHover',
pathClass: 'overideThisToUse',
pathLevels : 1,
delay: 800,
animationShow: {opacity:'show'},
animationHide: {opacity:'hide'},
speed: '10',
autoArrows : true,
dropShadows : true,
disableHI: false, // true disables
hoverIntent detection
onInit : function(){}, // callback functions
onBeforeShow : function(){},
onShow : function(){},
onBeforeHide : function(){},
onHide : function(){}
};
$.fn.extend({
hideSuperfishUl : function(){
var o = sf.op,
not = (o.retainPath===true) ? o.$path : '';
o.retainPath = false;
var $ul =
$(['li.',o.hoverClass].join(''),this).add(this).not
(not).removeClass(o.hoverClass)
.find('>ul').hide().css('visibility','visible');
sf.IE7fix.call($ul);
o.onBeforeHide.call($ul);
$ul.animate(o.animationHide,o.speed,function(){
sf.IE7fix.call
($ul); o.onHide.call($ul); });
//alert("hide !!!");
return this;
},
hideSuperfishUlStartup : function(){
var o = sf.op,
not = (o.retainPath===true) ? o.$path : '';
o.retainPath = false;
var $ul =
$(['li.',o.hoverClass].join(''),this).add(this).not
(not).removeClass(o.hoverClass)
.find('>ul').hide().css('visibility','visible');
o.onHide.call($ul);
//alert("hide !!! startup");
return this;
},
showSuperfishUl : function(){
var o = sf.op,
sh = sf.c.shadowClass+'-off',
$ul = this.addClass(o.hoverClass)
.find('>ul:hidden').css('visibility','visible');
sf.IE7fix.call($ul);
o.onBeforeShow.call($ul);
$ul.animate(o.animationShow,o.speed,function(){
sf.IE7fix.call
($ul); o.onShow.call($ul); });
//alert("show");
return this;
}
});
})(jQuery);
this is out of the superfish.js.
Can Please someone help me to get this working ?
[jQuery] Superfish
I have a superfish menu for joomla and now I have a little problem
configuring the colour options in the css for the menu.
The URL for the demo site is here:
[url]http://lmi.hymans.se/joomla[/url]
What I only want to accomplish is to get the a:hover on the main menu
row to be white #FFF not black #000 as it become now when mouse is
over.
I have the following css statements for this to apply:
#horiz-menu UL LI.active UL LI.active LI.active A, #horiz-menu UL
LI.active.parent UL LI A:hover, #horiz-menu UL LI.active.parent UL
LI .separator:hover, #horiz-menu LI:hover .separator, #horiz-menu
LI:hover LI .separator:hover, #horiz-menu UL LI.active UL
LI.active .separator, #horiz-menu UL LI.active UL LI.active
LI.active .separator, #horiz-menu UL LI.active.parent UL
LI .separator:hover
{
color: #FFF;
}
#horiz-menu LI.sfHover A, #horiz-menu LI.sfHover .separator
{
color: #000;
}
I have been stuck with this problem for quite a while now and would be
more than pleased to get help solving it.
[jQuery] superfish transparent PNG problem IE (8) when dropdown opens
Hi Everyone! I encountered a really strange behavior of the superfish menu. It works like a charm an FF etc. but on IE 8 (couldn't test it with a lower one yet) the already transparent background of the content DIV gets a gradient transparency when the dropdown gets visible... i couldnt find the part where the PNG alpha chanel is manipulated in superfish, but would be fine with just turning this functionality off, since its not needed anyway... you can look at a example at http://goleon.de/wordp/ just hover over one of the menuentries and youll see what i mean... any help is highly appreciated. Thx, Troop
Re: [jQuery] Superfish Joomla module: all subs with the same top-value
this can be accomplished with the onBeforeShow option. "This" within onBeforeShow refers to the UL about to be shown. Using jQuery $.offset() function to locate the offset of the UL within the menu you can then use $.css() to make adjustments. joge wrote: hello, I am using the superfish module for Joomla! Now I want to align all sub and sub-sub- and so on-menus on the same vertical position, so they all appear directly underneath the main menu. How can I do that? The top-values in the css are absolute to their parent, so entereing a fix value there shouldn't do it... thanks, Joerg
Re: [jQuery] Superfish - Question about how submenu can be displayed
No simple solution. With some work you can setup an auto scrolling div inside a dropdown. Markup would use one LI and custom styled div container that you would put your links into and adapt a scroll system to. There are quite a few auto scrollers, once you get one working in a stand alone container system, then insert it into menu jacleee wrote: Hi ! thanks for this menu, its great I am having trouble finding a way to adjust the sub-menus eg. when the submenu list gets pretty long, the list will sometime go off the window size limit in which I would have to scroll downwards to see the rest of the submenu list. Is there a way so that the submenu can adjust itself so it wont require scrolling? hope you know what I mean. Thank you in advance.
[jQuery] Superfish - Question about how submenu can be displayed
Hi ! thanks for this menu, its great I am having trouble finding a way to adjust the sub-menus eg. when the submenu list gets pretty long, the list will sometime go off the window size limit in which I would have to scroll downwards to see the rest of the submenu list. Is there a way so that the submenu can adjust itself so it wont require scrolling? hope you know what I mean. Thank you in advance.
[jQuery] Superfish sub-menus not working in IE
Hi. I just installed Superfish Dropdown Menu for Joomla 1.5 today from extensions.joomla.org and have a couple of questions. First, the version on extensions.joomla.org is 1.2. Is this the best version to be using or is there something more recent? If so, how do I get it? Second, I configured my menu with a Menu Style of Accordian List and Animation as Fade In. It works great in FireFox and Chrome. However, in Internet Explorer (version 7), the sub-menu doesn't appear when I hover over the parent menu item. What do I need to do to fix this? Thanks.
[jQuery] Superfish Joomla module: all subs with the same top-value
hello, I am using the superfish module for Joomla! Now I want to align all sub and sub-sub- and so on-menus on the same vertical position, so they all appear directly underneath the main menu. How can I do that? The top-values in the css are absolute to their parent, so entereing a fix value there shouldn't do it... thanks, Joerg
[jQuery] Superfish - sfHover on li a href link?
Hello,
I am using the great Superfish jQuery menu. The only issue I have is
with the sfHover class not being attached to li when the hovered li
contains a link ("a" tag).
I guess this isn't a problem for most of the users for which the A
block overflows exactly the LI but my A is contained within the LI and
doesn't fully overflow it (I use some padding within the LI). On IE8
and FF, this isn't a problem, when the LI is hovered, it is recognized
and the right background is applied. But on IE6, it recognizes only
the A hover so only the A block has its background applied and the
rest of the LI remains with the non hovered background.
Checking with Firebug, I saw that the sfHover class wasn't attached to
the li when there was an A into the LI.
Here is my CSS code :
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active,
.sf-menu li a:hover, .sf-menu li li a:hover
{
background:#CFDEFF;
color: #fff;
}
Re: [jQuery] superfish - nav-bar style menu conflict with mootools
Possibly a js conflict with mooTools, have you tried jQuery noConflict? http://docs.jquery.com/Using_jQuery_with_Other_Libraries It sounds more like a css problem but without a link is hard to guess sop wrote: Hi came across a situation where i am using the nav-bar style menu in conjunction with "Slideshow 2" with mootools.(http:// www.electricprism.com/aeron/slideshow/). I noticed that the "current" style isn't behaving properly, and also rolling over to ul li for another main header, the ul li overlap each other. Appreciate your insights.
Re: [jQuery] Problem with Jquery Superfish in IE7
did you try this fix from link on superfish site?
http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
Zanfe wrote:
Hi all,
only in IE7 the submenu appear under my page's content.
I use bgframe plugin.
Here my code:
$("ul.sf-menu").superfish({
speed: 'fast',
autoArrows: false // disable generation of arrow mark-up
}).find('ul').bgIframe({opacity:false});
Do you have any ideas?
Thank you very much.
Bye
Z
[jQuery] Problem with Jquery Superfish in IE7
Hi all,
only in IE7 the submenu appear under my page's content.
I use bgframe plugin.
Here my code:
$("ul.sf-menu").superfish({
speed: 'fast',
autoArrows: false // disable generation of arrow mark-up
}).find('ul').bgIframe({opacity:false});
Do you have any ideas?
Thank you very much.
Bye
Z
[jQuery] Superfish z-index
Since top navigation drop menus tend to need to go above other page content (usually in divs), it would be a good idea to alter your css to include a large z-index for the sub menu items so it works out of the box (particularly in regards to i.e.6).
[jQuery] superfish in a div
Hello, I need advise please, I put the ul's of the superfish in a div, yet somehow that div need to be style with a certain height to make this div containing ul superfishpositioned nicely on the top of other div, I am a beginner in css as well, is this a css issue? thanks a lot in advance regards Akil
[jQuery] superfish - nav-bar style menu conflict with mootools
Hi came across a situation where i am using the nav-bar style menu in conjunction with "Slideshow 2" with mootools.(http:// www.electricprism.com/aeron/slideshow/). I noticed that the "current" style isn't behaving properly, and also rolling over to ul li for another main header, the ul li overlap each other. Appreciate your insights.
Re: [jQuery] Superfish - content out of position
This isn't a jQuery issue.
This is a CSS issue.
Add the following:
table.blog {float:left;}
#footer {clear:both;}
Regards
Maurício
-Mensagem Original-
De: luciano991
Para: jQuery (English)
Enviada em: quinta-feira, 10 de dezembro de 2009 16:20
Assunto: [jQuery] Superfish - content out of position
Hello,
I am wondering why my superfish menu is pushing my content out of
postion on this page:
http://www.vtweb.com/joomla/perennialsantiques/
Thanks,
luciano
[jQuery] Superfish - content out of position
Hello, I am wondering why my superfish menu is pushing my content out of postion on this page: http://www.vtweb.com/joomla/perennialsantiques/ Thanks, luciano
Re: [jQuery] Superfish question
no reason it won't, not sure what to spell out other than follow the markup used in examples, make sure to include css file(s) and script file for plugin vertical version has a vertical css file in addition to standard superfish.css LTimmers wrote: Need to know if this jQuery will work for a site I'm working on. Link... http://www.millnerheritage.com I need a vertical drop down menu. I'm very green so I pretty much need it spelled out for me. Maybe even in crayon. Thanks, Liza
[jQuery] Superfish question
Need to know if this jQuery will work for a site I'm working on. Link... http://www.millnerheritage.com I need a vertical drop down menu. I'm very green so I pretty much need it spelled out for me. Maybe even in crayon. Thanks, Liza
Re: [jQuery] Superfish - leave current path open?
open and hide are controlled by 2 functions. You would need to rewrite the function hideSuperfishUl() which is at bottom of the js file t.hinze wrote: I am using Superfish and I think this menu is a nice think. But now I have a problem: I want to say Superfish "Please let the current Path open and dont close it at leave the menu/item." How can I do this? Regards, T.Hinze
[jQuery] Superfish - leave current path open?
I am using Superfish and I think this menu is a nice think. But now I have a problem: I want to say Superfish "Please let the current Path open and dont close it at leave the menu/item." How can I do this? Regards, T.Hinze
[jQuery] Superfish with Image Tabs
I don't have much experience with CSS. I am using Superfish for a tabbed navigation. I need to use images for my tabs because of design. I need to keep an "on" image while the submenu is open. How can this be done?
[jQuery] Superfish
http://www.designerschemes.com/ i am having problems with the dropshadow. it does not match the drop down container. any ideas? thanks
Re: [jQuery] [Superfish] Left side dropdown menu
the subs are absolute positioned ,
to have them open on left side you can change:
.sf-menu li:hover ul,.sf-menu li.sfHover ul {
left: 0;
}
to:
.sf-menu li:hover ul,.sf-menu li.sfHover ul {
right: 0;
}
another convenience of the API is being able to use the onBeforeShow
option.
Have used it before to make adjustments to only certain sub elements
this way:
$(".sf-menu").superfish({
onBeforeShow: function() {
$(".last_menu").css("left",-130); // in this case
shifts the last sub menu to avoid extending beyond main container
}
});
Sam wrote:
Hi,
I have 3 level menu.
I want the sub menus to be open in left direction instead of right.
Because the menu is in top right corner of the website, and when
submenu are displayed.
They goes outside the website window and browser shows the scroll bar,
which doesnt look nice.
I hope, u guys understand what i m trying to say.
Please take a look at the screenshot to get the exact idea.
http://i48.tinypic.com/2sa1dv9.jpg
Thanks
[jQuery] [Superfish] Left side dropdown menu
Hi, I have 3 level menu. I want the sub menus to be open in left direction instead of right. Because the menu is in top right corner of the website, and when submenu are displayed. They goes outside the website window and browser shows the scroll bar, which doesnt look nice. I hope, u guys understand what i m trying to say. Please take a look at the screenshot to get the exact idea. http://i48.tinypic.com/2sa1dv9.jpg Thanks
Re: [jQuery] Superfish: width of top level links - great with js off - too wide with js on
autoarrows: true
this appends the link with a span with an arrow image to show links
with subs and is adding addiitonal width, set to false
Dasher wrote:
Hello,
I am setting up my first superfish menu and having an issue with the
width of the top level link tabs.
When _javascript_ is off, the width of the top level links look exactly
how I want them - with flexible width to accomodate the link text and
7px padding either side.
When _javascript_ is on, extra width seems to be added to the top level
links - I am not sure what is causing it. It does get it right for the
active state (which is wierd because there is no width for that in the
css either).
Here is a visual:
http://www.gocreate.com.au/superfish-menu-spacing.jpg
So what I am wanting to do is stop jquery / superfish adding extra
width to the menu so that it looks the same with js on or off.
The only widths mentioned in the css are as follows but changing these
to "auto" does not have any effect on the width of the links:
.sf-menu ul { position: absolute; top: -999em; width: 12em; }
.sf-menu ul li { width: 100%; }
My _javascript_ knowledge is very limited (I am a css'er) - with a bit
of googling and the more user friendly nature of jquery, I found some
tricks that I could try but as yet have been unable to solve it.
My base code is as follows:
$("ul.sf-menu").supersubs({
minWidth:8,
maxWidth:13,
extraWidth: 1
}).superfish();
$('ul.sf-menu').superfish({
delay: 1000,
animation: {opacity:'show',height:'show'},
speed: 100,
autoArrows: true,
dropShadows: true
});
$('ul.sf-menu > li > a span').remove(); // remove arrows from
top level links
The same thing happens with or without using the supersubs plugin.
Adding this does reduce the width of each link but it makes all top
level links the same width - so that's not suitable:
$(".sf-menu li").css("width","100px");
Adding any of these variations do not seem to do anything (the idea
being to reduce any width setting that jquery may 'secretly' be
adding):
$('ul.sf-menu li').css('width', '');
or
$("ul.sf-menu li").css("width","");
or
$('ul.sf-menu li')[0].style.width = '';
or
$('ul.sf-menu li').style.removeAttribute("width", false);
Then I thought maybe I could add a class to the top level links with
jquery and set width:auto in the css for the class but that does not
seem to solve it either:
$("ul.sf-menu li").addClass("jq-wfix");
So now I am scratching my head...
Any ideas?
Thanks in advance.
Re: [jQuery] SuperFish Menu
I looked and I don't see any superfish css or script. Alvin wrote: I used Superfish on other website (www.dapuri.com) and it works well. When I try to integrate it to this website, it doesn't work. Please click the link below and take a look (this is a testing page, ignore the standard menu on the left) http://www.avplannersinc.com/index.php/privacy-a-policy As you can see, only the title "Superfish menu" is shown, while the menu (MAIN MENU & its SUBMENU) is not shown. I try to disable the Standard menu, disable the banner, etc but DIDN"T work. Any advice? Alvin Ooi
[jQuery] Superfish: drop down slide down / slide up effect - how to?
Hello,
I have just discovered superfish - it is awesome - the jquery
interaction is great.
Is it possible to have the superfish drop down items slide down and
slide up like the menu on this page?
http://spicebrains.com/multi-level-drop-down-menu/#examples
I really love that effect and have seen it on a number of sites before
and always thought it looked cool.
My current menu seems to show and hide the drop down items and uses
the following code.
$('ul.sf-menu').superfish({
delay: 1000,
animation: {opacity:'show',height:'show'},
speed: 100,
autoArrows: true,
dropShadows: true
});
Thanks in advance.
[jQuery] Superfish: width of top level links - great with js off - too wide with js on
Hello,
I am setting up my first superfish menu and having an issue with the
width of the top level link tabs.
When javascript is off, the width of the top level links look exactly
how I want them - with flexible width to accomodate the link text and
7px padding either side.
When javascript is on, extra width seems to be added to the top level
links - I am not sure what is causing it. It does get it right for the
active state (which is wierd because there is no width for that in the
css either).
Here is a visual:
http://www.gocreate.com.au/superfish-menu-spacing.jpg
So what I am wanting to do is stop jquery / superfish adding extra
width to the menu so that it looks the same with js on or off.
The only widths mentioned in the css are as follows but changing these
to "auto" does not have any effect on the width of the links:
.sf-menu ul { position: absolute; top: -999em; width: 12em; }
.sf-menu ul li { width: 100%; }
My javascript knowledge is very limited (I am a css'er) - with a bit
of googling and the more user friendly nature of jquery, I found some
tricks that I could try but as yet have been unable to solve it.
My base code is as follows:
$("ul.sf-menu").supersubs({
minWidth:8,
maxWidth:13,
extraWidth: 1
}).superfish();
$('ul.sf-menu').superfish({
delay: 1000,
animation: {opacity:'show',height:'show'},
speed: 100,
autoArrows: true,
dropShadows: true
});
$('ul.sf-menu > li > a span').remove();
// remove arrows from
top level links
The same thing happens with or without using the supersubs plugin.
Adding this does reduce the width of each link but it makes all top
level links the same width - so that's not suitable:
$(".sf-menu li").css("width","100px");
Adding any of these variations do not seem to do anything (the idea
being to reduce any width setting that jquery may 'secretly' be
adding):
$('ul.sf-menu li').css('width', '');
or
$("ul.sf-menu li").css("width","");
or
$('ul.sf-menu li')[0].style.width = '';
or
$('ul.sf-menu li').style.removeAttribute("width", false);
Then I thought maybe I could add a class to the top level links with
jquery and set width:auto in the css for the class but that does not
seem to solve it either:
$("ul.sf-menu li").addClass("jq-wfix");
So now I am scratching my head...
Any ideas?
Thanks in advance.
[jQuery] SuperFish Menu
I used Superfish on other website (www.dapuri.com) and it works well. When I try to integrate it to this website, it doesn't work. Please click the link below and take a look (this is a testing page, ignore the standard menu on the left) http://www.avplannersinc.com/index.php/privacy-a-policy As you can see, only the title "Superfish menu" is shown, while the menu (MAIN MENU & its SUBMENU) is not shown. I try to disable the Standard menu, disable the banner, etc but DIDN"T work. Any advice? Alvin Ooi
[jQuery] superfish accordion/vertical mode: How to make a node/menu stay open?
I used the following plugin for joomla:
http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/drop-a-tab-menus/6731
This module simply combines superfish with the main menu and automates
the setup configuration. I configured it so it appears vertically
(accordion).
It looks very nice and works fine. Except for one small detail. If
somebody clicks on a sub-menu and the page changes to that item. Then
the whole menu "collapses again" ("accordion closes"). If you hover
along the menu path you can see that the current item is correctly
highlighted, however when you move the mouse away the accordion closes
Is there a way so that the accordion stays open with current item
highlighted?
Thank you very much again for your time and help in advance!
Re: [jQuery] superfish
a simple css rule you can add is
.sf-menu li.sfHover > a {color:}
superfish adds the sfHover class to active LI's ( parent and children)
. Using ">" only affects immediate child links of the sfHover class.
IE 6 doesn't support this I believe
jq wrote:
does anyone know how to make the text link color of a superfish menu
remain highlighted when navigating to its submenus?
I have a menu where you see the link text only (not the background).
I can only get the list item background to remain onhover, but not the
enclosed link color.
Maybe this is a css question: can I change the color of a link inside
a list item by hovering over the list item but not the link.
any pointers would be helpful
thanks
jq
Re: [jQuery] Superfish vertical/arrow question
likely a width setting on "LI" or "A" tags, likely from old css as superfish default css doesn't set widths. If text was just fitting before then you are now adding a new element that doesn't fit without wrapping to next line Can see a lot if you provide link, easy to see what's happening with a DOM inspector MozreplGuy wrote: Hi all, I successfully included superfish into a joomla site (still on localhost). I use it in vertical mode. It works fine. But there is one thing that doesn't look very nice. Every menu with a sub menu has a sub-indicator '>>' (character 187, enabled by autoarrow flag). The indicator itself is fine. However the indicator doesn't appear on the same line as the menu text. For example it looks like: Menu1 But I would like it to like: Menu1 >> Does anybody have an idea how I could achieve that. I looked at the code (e.g. superfish), but my skill level doesn't allow me to find a solution :-) I would appreciate any help. Thanks, Mozrepl
Re: [jQuery] Superfish How-to?
there's a Joomla plugin that will install superfish css, script, a substitute for supersubs and also i believe hover intent. The biggest issue that comes up on this board regarding superfish is from Joomla installs. The install works fine, but the existing menu css can conflict with superfish css. It doesn't usually cause any dramatic failure, it just makes tracing css rules difficult for many as one element may be governed by a superfish css rule, and another by existing template menu css If you have any familiarity with Firebug or other DOM inspector's it's easy to see hierarchy. personally i find commenting out old menu easiest , however often these rules have the backgrounds you need to match template flashwood59 wrote: Hi, I would like to try superfish in a joomla template. I am new to this list. I need somebody to guide me through the procedures to get it working. a. Where do you create or copy files to in the site structure, root or template folder? b. When using hoverIntent, where do those files go? c. What changes are necessary in the index.php file? d. Which CSS files affect the styling and operation of superfish plugin? e. Is it necessary to install anything via the administrator backend. I have been using joomla for about a year, I am comfortable working with CSS and html. Sincerely, Jeff
[jQuery] superfish
does anyone know how to make the text link color of a superfish menu remain highlighted when navigating to its submenus? I have a menu where you see the link text only (not the background). I can only get the list item background to remain onhover, but not the enclosed link color. Maybe this is a css question: can I change the color of a link inside a list item by hovering over the list item but not the link. any pointers would be helpful thanks jq
[jQuery] Superfish How-to?
Hi, I would like to try superfish in a joomla template. I am new to this list. I need somebody to guide me through the procedures to get it working. a. Where do you create or copy files to in the site structure, root or template folder? b. When using hoverIntent, where do those files go? c. What changes are necessary in the index.php file? d. Which CSS files affect the styling and operation of superfish plugin? e. Is it necessary to install anything via the administrator backend. I have been using joomla for about a year, I am comfortable working with CSS and html. Sincerely, Jeff
[jQuery] Superfish vertical/arrow question
Hi all, I successfully included superfish into a joomla site (still on localhost). I use it in vertical mode. It works fine. But there is one thing that doesn't look very nice. Every menu with a sub menu has a sub-indicator '>>' (character 187, enabled by autoarrow flag). The indicator itself is fine. However the indicator doesn't appear on the same line as the menu text. For example it looks like: Menu1 >> But I would like it to like: Menu1 >> Does anybody have an idea how I could achieve that. I looked at the code (e.g. superfish), but my skill level doesn't allow me to find a solution :-) I would appreciate any help. Thanks, Mozrepl
[jQuery] Superfish rollover images menu
Hello all,
i am trying to setup the superfish menu and using rollover images
(actually changing background images throught the css file).
for some reason after tweaking the original css file to display the
menu the way i like it, IE refuses to show the menu images. if shows
only the ":hover" state images.
i have been fighting with this for 3 days now. and no use,
can anyone help me out?
i attach here, just in case my modified code.
Items named "item#" refer to the different menu items i have (only on
the 1st level...)
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
padding:0;
list-style: none;
margin: 0px;/*background-image: url(../images/menu_bg.gif);
background-repeat: repeat-x;
background-position: bottom;*/
}
.sf-menu {
line-height:1;
}
.sf-menu ul {
/*position: absolute;
top:-999em;
width: 10em; *//* left offset of submenus need to
match (see below)
*/
} /*{Eliad: this whole class was canceles because i wrote individual
classes for each sub menu in my section} */
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display:block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
/*left: 0;*/ /* --> was cancelled to allow left
positioning of sub-
menus*/
top:3.1em;/*2.5em; match top ul list item height */
z-index:98;
}
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: 6px;
/*border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6d6e71; */
}
.sf-menu a, .sf-menu li ul a {
border-left:0px solid #fff; /*ick - might wanna convert that 2nd
statement to an independent class*/
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: #00;
font-weight: 900;
font-size: 13pt;
}
.sf-menu li {
/*background: #FF;*/
}
.sf-menu li li {
background: #3AA600;
text-align: left;
line-height: 1.5;
}
.sf-menu li li li {
background: #3AA600;
text-align: left;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover {
background: #FF;
outline:0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position
accurately */
}
.sf-sub-indicator {
position: absolute;
display:block;
right: .75em;
top:1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent:-999em;
overflow: hidden;
background: url('../images/arrows-ff.png') no-repeat
-10px
-100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top:.8em;
background-position: 0 -100px; /* use translucent arrow for modern
browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern
browsers*/
}
/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /*
Re: [jQuery] Superfish jQuery menu plugin RTL support
change the LI's to float right instead of left Vlad Shapiro wrote: Ahoy! I'm trying to adjust Superfish nav-bar style menu for RTL'ed Hebrew website, Example: http://users.tpg.com.au/j_birch/plugins/superfish/#sample4 but no success so far, maybe someone already have this solved? Any help will be most appreciated! Best regards, Vlad.
