You are here: Home / Dog Blog / Archives

Sons of Suckerfish

Friday 21 May, 2004 (10:59AM GMT)

Seven new articles have been added to HTML Dog.

Not only is there a brand spanking new version of Suckerfish Dropdowns with improved Suckerfish :hover JavaScript, there are a few siblings that have popped out too.

The articles explain how the effects of the :hover, :active, :focus and even the CSS3 :target dynamic pseudo-classes can be mimicked in Internet Explorer for Windows (versions 5.0 and up) with the tiniest piece of JavaScript, making them a real, viable practical option.

This collection just kind of 'sprang up' when Dan and myself were putting together the improved Suckerfish Dropdowns ("Hey... what if we do this? Oo, and we could do this as well."). I think we might have got a little carried away, but I think it's been worth it.

Comments

Comment 1

The comments on the Dog Blog now employ the Suckerfish :target method - if you select any of the comment numbers or simply go to http://www.htmldog.com/ptg/archives/000051.php#comment1 , you'll see it in action.

This won't work unless your browser supports the :target pseudo-class (such as Safari 1.2 or Mozilla) or utilises the Suckerfish mimic (namely IE). So Opera, for example, won't get the benefits (I'm sure it's only a matter of time before the CSS3 pseudo-class is implemented in a later version though). Users of such browsers shouldn't lose out that much - as long as it isn't depended on for something critical.

So said Patrick on Friday 21 May, 2004 at 11:02AM GMT.

Comment 2

Sorry, I don't really have a comment, I just wanted to try out this target thing. Very nice.

So said Chris on Friday 21 May, 2004 at 12:15PM GMT.

Comment 3

Any possibility to collect them all into a nice downloadable package? Maybe ZIP?

So said Lim Chee Aun on Friday 21 May, 2004 at 4:37PM GMT.

Comment 4

I like it. I was using HTC so that I could use hover. But I didn't realise that that didn't work in IE5. And more code too.

So said JK on Friday 21 May, 2004 at 8:30PM GMT.

Comment 5

It doesn't seem to work with IE/Mac 5.2. I know I have IE/Mac readers, so I need this support. Any idea if there is a way to get Son of Suckerfish to work there? Suckerfish itself does.

Thanks,
JimB.

So said Jim Burrows on Sunday 23 May, 2004 at 5:15PM GMT.

Comment 6

Jim, Dan picked up on this and left a comment over on the Dropdowns discussion, although it's obviously an issue for all Suckerfish methods:

http://www.htmldog.com/ptg/archives/000050.php#comment17

So said Patrick on Sunday 23 May, 2004 at 5:19PM GMT.

Comment 7

I'm having trouble implementing the suckerfish dropdowns when used over a positioned div. In other words, if the dropdown menu drops down over a positioned div you can not access the dropdown list with your mouse. Instead the dropdown just disappears. I just found this site. I have been using the tutorial from alistapart. I have not tried it with any new versions. Is this issue solved in the new version? Any suggestions would help enormously. Thanks

So said marshn on Tuesday 25 May, 2004 at 12:38AM GMT.

Comment 8

marshn - apply a higher z-index to the dropdown ul's.

So said Dan Webb on Tuesday 25 May, 2004 at 6:12PM GMT.

Comment 9

suckerfish :target sucks - it doesn't work in Opera, when it could if you didn't use window.attachEvent

So said Dante on Wednesday 26 May, 2004 at 1:58AM GMT.

Comment 10

Of course you could make it work in opera by changing the code a bit but it's operation is non-essential and if we changed the way it worked just for that one it would ruin the focus of the article. If you want it to work in Opera stop moaning and change the code.

So said Dan Webb on Wednesday 26 May, 2004 at 10:45AM GMT.

Comment 11

Re: Javascript vs the HTC. The HTC can be hidden in IE conditional comments so the validator won't see it. I've checked using IE 5.00.2920.0000 (Win2k) and IE 5.00.2614.3500 (Win98). Both worked. Lastly, the HTC is general purpose and can be used for much more than just the menus.

So said Andrew Gregory on Saturday 29 May, 2004 at 5:28AM GMT.

Comment 12

Andrew, IE conditional comments are a bit of a hack, reliant on proprietary code and I have to say that I'm not a big fan, but OK. As for the generality, that's partly what these Suckerfish aricles are about - explaining that they can be used for much more than dropdowns.

So said Patrick on Saturday 29 May, 2004 at 8:54AM GMT.

Comment 13

In response to comment #8, applying the higher z-index works in Mozilla, but doesn't appear to have an effect in IE. The dropdowns still appear behind the positioned content.

So said Len on Tuesday 1 June, 2004 at 5:14PM GMT.

Comment 14

To get dropdown above the positioned div in IE change the z-index of the positioned div to a lower value (like -1). Worked on the page I'm building.

I'm looking for a way to have the submenus appear above the menu rather than below. I don't understand completely what is happening with the positioning that being used right now (newbie) so I haven't come up with a way to do it. Any suggestions?

So said Ian on Wednesday 2 June, 2004 at 10:31PM GMT.

Comment 15

A z-index of -1 works with IE, but then breaks Mozilla. Mozilla positions the -1 z-index behind the "body", effectively making it disappear totally.

So said Len on Friday 4 June, 2004 at 1:53PM GMT.

Comment 16

I realized that as well when I tried it in Mozilla again. Instead of changing the z-index of the positioned div, I ended up changing the z-index of the unordered list (ie. #nav li ul) to 2 or something else that is higher. This works in both browsers. Sorry about the mixup.

So said Ian on Friday 4 June, 2004 at 11:30PM GMT.

Comment 17

I am no expert, in fact quite the opposite, but have had pop out menus working solidly with Opera and Mozilla for a few months now at http://www.mouldingname.info/home.html.

I have no clue about Javascript and would like to know if the 12 line js can be applied to my site. In the 12 lines there is "this.className" three times. I suspect I replace this with something, but EXACTLY what? Also do I need something in the head to enable the javascript?

Sorry to be clueless about Javascript but I've had a look at a book and it just does my head in. I am not the programming type I guess!

So said Peter on Sunday 6 June, 2004 at 3:02PM GMT.

Comment 18

In response to comments 9 and 10 about Opera; it seems to work if you duplicate the style rules, i.e. use
h2.sftarget { color: red; }
h2:target { color:red; }

NOT
h2:target, h2.sftarget { color: red; }

That's working in Opera 7.50

So said Ash Searle on Friday 18 June, 2004 at 11:43AM GMT.

Comment 19

Hey guys.

Nice work.

One question: any easy, cross-browser way of making the hiding of the menu timed?

setTimeout("this.className=this.className.replace(new RegExp(' sfhover\\b'), '');",500);

won't work because the first argument only takes a string.. so the "this" object reference doesn't work.

Any ideas?

So said Brad on Wednesday 30 June, 2004 at 3:01AM GMT.

Comment 20

IE7 alerady supports IE5.0 for some while now (http://dean.edwards.name/IE7/history/), and one can strip the size down to some 20 kB if he wishes.

So said Fatalis on Friday 2 July, 2004 at 11:50AM GMT.

Comment 21

I have the menu working really nice in IE, however, in Mozilla/Firebird, all levels of the menu stay open. Any thoughts?

So said Michael on Thursday 22 July, 2004 at 12:23AM GMT.

Comment 22

You think correctly, it costed that. It costed greater:)

So said Joe on Thursday 22 July, 2004 at 11:38PM GMT.

Comment 23

Dropdowns creation is really an exciting stuff

So said abc on Sunday 25 July, 2004 at 8:47PM GMT.

Comment 24

I love the suckerfish concept! You guys rock! The only complaint that I get is that if the user accidentally mouses out of one of the lower levels, the whole list disappears and they have to start over. I tried to implement a timer that would give users a second to get back on if their mouse wandered, but then the elements don't get hidden properly. Any plans to offer such functionality? I worked on it for 2 days straight and finally gave up.

So said Steve Davis on Wednesday 28 July, 2004 at 10:22PM GMT.

Comment 25

Just a follow-up to my previous posting. I figured out how to do what I wanted. It works great! It requires that I NOT use onmouseover and onmouseout and instead use onmouseenter and onmouseleave, but it works great nonetheless. Thanks for getting me started!

So said Steve Davis on Thursday 29 July, 2004 at 10:50PM GMT.

Comment 26

Hi - if you look at your "prettier" example (http://www.htmldog.com/articles/suckerfish/dropdowns/example/) in Safari, you'll see that all the menu items are layered over each other. Any clues how to fix this phenomenon?

So said mark on Monday 2 August, 2004 at 6:15PM GMT.

Comment 27

Observing great form and answering my own question, I've found that width of "#nav li ul" must be greater than "#nav li" for this all to work right in safari. 0.01 of an em is enough, though someone will probably now tell me that breaks things in a more mainstream browser.

So said mark on Tuesday 3 August, 2004 at 7:27PM GMT.

Comment 28

You have done a great job. I love to add Suckerfish Dropdowns to my websites.

I really looking forward to see more of your future work.

hope you also could solve the Netscape 6.0 failure also.

So said Dan Ced on Wednesday 4 August, 2004 at 2:10PM GMT.

Comment 29

I'm having a problem with my Suckerfish Dropdowns flickering when the mouse rolls over them. Any suggestions??

Thanks!

http://www.camp-emmagay.com/gcltest/test.htm

So said Ethan on Friday 6 August, 2004 at 2:22AM GMT.

Comment 30

Ethan, they don't flicker for me, you'll have to specify what browser you are using. I use Firefox 0.9.1 and there is no flicker.

So said tati on Sunday 8 August, 2004 at 11:36PM GMT.

Comment 31

These are very interesting articles which I truly enjoyed. I really think you could have all under one roof and make them downloadable in a zip or rar file. They are worth becoming widespread!

So said Mark, web designer on Tuesday 10 August, 2004 at 12:02PM GMT.

Comment 32

I really want to say that this is just a great job you have done with Suckerfish Dropdowns.
Hope to see more great stuff from you in the future :)

So said danne on Wednesday 11 August, 2004 at 1:44AM GMT.

Comment 33

really cool, I was already impressed about the means and powers of CSS, and your articles just complete my view! Good work, thank U!!!

So said Vale on Tuesday 17 August, 2004 at 3:33PM GMT.

Comment 34

I seem to be having problems with IE/Win. When I slice the JS out of the page and put it into an external JS file, I get serious problems.

If I use the original Suckerfish JS (from the ALA site), the drop-down menu doesn't even work, even though it worked fine with the JS embedded in the page. The spelling of the file is correct, and the path is correct.

If I use the JS featured on this site, I get a JavaScript error in IE: "document.getElementByID(...) is null or not an object". Once again, if it is inside the page itself, it works just fine; but put it into an external JS file, and it f**ks up.

I want to keep a clean separation of content from code. Could anyone pass on to me any ideas why identical code would work inline but not externally?

So said René Kabis on Thursday 26 August, 2004 at 1:29AM GMT.

Comment 35

Rene,

I was having the exact problem you are encountering. For me I determined it was when I was calling a non-existent id. So to correct the problem I changed this chunk of code in the function suckerfish:

window.attachEvent("onload", function() {
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
type(sfEls);
});

to this:
if (document.getElementById(parentId)) {
window.attachEvent("onload", function() {
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
type(sfEls);
});
}

Just checking to see if that id was indeed present before trying anything. Hope that helps. By they way the Suckerfish code is a great piece of work. Thanks it's been a tremedous help.

So said Matt Voss on Thursday 26 August, 2004 at 4:35PM GMT.

Comment 36

Thank you for the Suckerfish! lol

I am having one issue with IE. The dropdown doesn't drop straight down. It drops down and to the right.

Any suggestions to fix this would be greatly appreciated.

So said Shawna on Thursday 9 September, 2004 at 8:14PM GMT.

Comment 37

I'm getting an interesting effect in IE5 - when you hover over a link to activate the menu, you find you are chasing the content down the page. So far my attempts to get suckerfish dropdowns of various flavours working have all failed in IE5. This is a shame as my company still has around 350 users on IE5 :-(

Any ideas what might be causing this?

So said Tony B on Monday 13 September, 2004 at 2:46PM GMT.

Comment 38

First I’d like to say thankyou to Patrick and Dan for this very useful piece of code, great work guys.

Unfortunately I am having some problems though; hopefully someone with a little more experience may be able to shed some light on this matter.

I have been trying to set-up a website for a very fussy client who insists on frames but not frames, little to no JavaScript (but I am willing to bend this rule a little) and a multi tiered dropdown menu. So far I have managed to incorporate a bit of my own design with a bit knowledge from Bobby van der Sluis’s article on ALA for positioning the footer (and header), which seems to work in Mozilla Firefox 0.9, IE 5.0, 5.5 and 6, Opera 7, NN 7. (No idea how Mac’s handle it as of yet.)

The problem is quite simple but the answer has so far proven to be rather illusive. The suckerfish is positioned in the header and the header is set to position fixed, this all works well when the dropdown has only one level. However when I add a second or third tier it breaks badly in any browser that can actually understand the fixed position property. I can allow all browsers to use the same code snippet as IE for positioning the header and footer, but this disables the wheel mouse in Gecko browsers. (Very annoying.)

My question. Is it possible to put the suckerfish inside an element that is fixed, or would my time be better spent modifying a brick wall with my head?

If there is no sure answer I will try to put the offending page together for an evaluation, time permitting. If the answer is a definite “no” then I assume I will need to find another way of doing it. (Though I don’t like my chances.)

Any help or ideas are more than welcome, I haven’t slept for a week.
Thanks in advance.

So said Nathan on Tuesday 14 September, 2004 at 4:16AM GMT.

Comment 39

--I am having one issue with IE. The dropdown doesn't drop straight down. It drops down and to the right.--

I had a similar problem with mine. For me, it was a problem in the CSS for the div. I had my text alignment set to center which IE goofed up on the drop downs.

So said Ian on Tuesday 14 September, 2004 at 6:06PM GMT.

Comment 40

Hi again.

After yet another sleepless night it would seem I have (hopefully) solved my earlier problem of using the Suckerfish inside a fixed element. It suddenly occurred to me that I had overlooked a simple context change that now that I have taken a little time to think about it seems perfectly logical.

The offending rule here was:

#nav li ul {
position: absolute;
}

The solution:

#nav li ul {
position: fixed;
}

This however will kill IE as usual so be sure to hide the fixed rule from IE allowing it to use absolute positioning.

Well I hope this is right and makes sense? I still need to test further but so far so good, with any luck this may help others who come across similar problems. Now I should be able to sleep again.

So said Nathan Kelly on Wednesday 15 September, 2004 at 2:32AM GMT.

Comment 41

Hey Ian! (post #42)
Thank you for the tip! I have a nice set of dropdowns in IE now. Hallelujah! :0)

So said Shawna on Friday 17 September, 2004 at 6:22PM GMT.

Comment 42

To echo Shawna, yep that post solved a problem for me too.

So said Tony B on Saturday 18 September, 2004 at 4:34PM GMT.

Comment 43

It sould be:

var sfEls = document.getElementById("nav").getElementsByTagName("li");

not

var sfEls = document.getElementById("nav").getElementsByTagName("LI");

for xhtml Dom validation

Ref:
http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-5353782642

thanks to [Dave]K: unernet irc #html

So said Boyd Pearson on Monday 27 September, 2004 at 12:02AM GMT.

Comment 44

Having problems with cross-browser suckerfish spanning? Sometimes you gotta bite the bullet and say to hell with 100% css design. Just table that bad boy thusly:

<div class="suckerfish">
<table id="nav"><tr><td>
<ul>
<li><a href="index.html">Company</a>

<ul>
<li><a href="#">Who we are</a></li>
<li><a href="#">What we do</a></li>
<li><a href="#">Our experience</a></li>
<li><a href="#">Meet Jake</a></li>
<li><a href="#">Meet Pooter</a></li>

</ul>
</li>
</ul>
</td>
<td>
<ul>
<li><a href="#">Products</a>
<ul>

<li><a href="#">Website Stuff</a></li>
<li><a href="#">Custom Stuff</a></li>
<li><a href="#">Consultation</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
</div>

You might want to get rid of the floats in your css. But I don't think you need to.

So said Lucas on Wednesday 6 October, 2004 at 10:23PM GMT.

Comment 45

I'm using the javascript from suckerfish drop downs to fix the hover pseudo classes in IE, on this page:

http://testmh.clients.nixmc.com/crane/template_home.html

Everything looks great in Firefox, Mozilla, Opera, but in IE, when I roll over the nav buttons, I get a 2pixel space appear below them which pushes them down the page/. I've been pulling my hair out all day on this one, have re-written the CSS several times in an effort to fix it, and no-matter what I do, the space still appears. It's something to do with using this line in my CSS (comments included).

#navitems li.first
{
/* Required to fix the double margin float bug in IE, but also seems to break the
hover effects by adding 2 pixels space underneath. WTF? */
display:inline;
}

Would be greatful if someone could work out what is going on as it's stumped the pants off me.

So said Matthew Hill on Friday 8 October, 2004 at 3:33PM GMT.

Comment 46

Thank you for the tip! I have a nice set of dropdowns in IE now.

So said juntao on Thursday 21 October, 2004 at 6:59AM GMT.

Comment 47

very cool, I was already impressed about the means and powers of CSS! Good work, thank U!!!

So said medical on Thursday 21 October, 2004 at 7:01AM GMT.

Comment 48

i'm liking this thing, and i got it to work, but i was getting the 'down and to the right' in IE, but as far as i can tell, i don't have any div aligns in my thing that are screwing it up. and to top it off, if i preview the file from my computer, the dropdowns go straight down, but after i upload it to the internet, it goes down and to the right. looks great in firefox though. here is the problem file, anybody?

http://twh.telefragged.com/aikido/index2.htm

So said whitey on Wednesday 10 November, 2004 at 1:17AM GMT.

Comment 49

bah nevermind, in the #li:hovernav ul tag, where it puts the box at left:auto, drop a top: auto tag in their too and it works. i'm not sure why it works, but that's the glory of internet explorer.

go firefox.

So said whitey on Wednesday 10 November, 2004 at 1:28AM GMT.

Comment 50

Could someone post the simpleton's guide to using suckerfish hover to make some text pop up when hovering over an image?

I am a CSS nubie who managed to used suckerfish dropdowns to create a menu system, but can't seem to puzzle this one out.

thanks,

Brian

So said Brian Goodman on Thursday 11 November, 2004 at 7:07AM GMT.

Comment 51

A smaller and more efficient suckerfish shoal:

function suckerfish(func, tag, parentId) {
    if (window.attachEvent) window.attachEvent("onload", function() {
        var elements = parentId == null ? document.getElementsByTagName(tag)
            : document.getElementById(parentId).getElementsByTagName(tag);
        for (var i = 0; i <lt; elements.length; ++i) func(elements[i]);
    });
}
function makeClassToggler(startEvent, stopEvent, classToToggle) {
    var re = new RegExp(" " + classToToggle + "\\b"); re.compile(re.source);
    var start = function() { this.className += " " + classToToggle;}
    var stop = function() { this.className = this.className.replace(re, "");}
    return function(e) { e[startEvent] = start; e[stopEvent] = stop; }
}
var sfHover = makeClassToggler("onmouseover", "onmouseout", "sfhover");
var sfFocus = makeClassToggler("onfocus", "onblur", "sffocus");
var sfActive = makeClassToggler("onmousedown", "onmouseup", "sfactive");

Notes:

~ The current code has two new closures being created for every element, this code only creates two closures for each type of suckerfish.
~ The current code creates a new regexp object each time mouseout fires, this code creates one and precompiles it.
~ The duplicated code in sfHover/sfActive/sfFocus has been collapsed down to one function.
~ The target suckerfish is really an entirely different beast and should not be implemented with this technique. A replacement for it follows in my next post.

So said Blake Coverett on Monday 15 November, 2004 at 10:47PM GMT.

Comment 52

function enableTargetPseudoClass() {
    if (window.attachEvent) {
        window.attachEvent("onload", function() {
            var showTarget = function(yes) {
                if (location.hash.length) {
                    var e = document.getElementById(location.hash.substring(1));
                    if (e) e.className = yes ? e.className + " sftarget"
                        : e.className.replace(/ sftarget\b/, "");
                }
            }
            document.body.attachEvent("onclick", function() {
                showTarget(false);
                window.setTimeout(function() { showTarget(true); }, 0);
            });
            document.body.click()
        });
    }
}

Notes:

~ Unlike the other types of suckerfish, with the :target pseudo class we already know the ID of the element that we are interested in, so there's no reason to do any .getElementsByTag() and loop through them. In fact, there's no reason to limit it to a particular tag at all.
~ The current code mistakenly adds the sftarget class in the current when an shift+click/open in new window makes that the wrong target.
~ Rather than hooking all the links, many or most of which will not be links to the current page, it is sufficient to wire-up body.onclick and let the clicks bubble there.
~ Less code.

So said Blake Coverett on Monday 15 November, 2004 at 10:58PM GMT.

Comment 53

On rereading my last two posts, I think they sound curt - my apologies. While I feel the code above is a useful improvement, it's only because Patrick and Dan came up with such a slick idea in the first place that I was able to rework it a little.

regards,
-Blake

So said Blake Coverett on Monday 15 November, 2004 at 11:02PM GMT.

Comment 54

Awesome drop downs, I have used them a couple times already.

Two problems I can't get around thus far.
1: In Both IE and Firefox for Windows I get little 1 pixel spaces between my menu items, where in firefox under Linux I do not. And it's not every item, maybe very 2nd or third item.
2: Is there a way to have each menu using a different width. Maybe adhere to the longest text in the tag. I have one menu with a long string of text and to keep it all on one line, now all my menus are that long length.

You can see examples of both of my problems here: http://www.ruffdogs.com

Thanks and great work!
MrCl3an

So said MrCl3an on Monday 15 November, 2004 at 11:51PM GMT.

Comment 55

G'day

one other problem in IE and Mozilla is that when you have a flash movie just below the buttons. It will order the drop down menu back behind it so you won't see the links on the menu.

So said Matt Woods on Thursday 25 November, 2004 at 4:48AM GMT.

Comment 56

regarding the :focus ...

how do i stop it applying a background colour to radio buttons when clicked? this all looks terriffic on text fields and text areas, but it looks awful on radio buttons.

So said sunup on Friday 26 November, 2004 at 3:30AM GMT.

Comment 57

cardinal sin: posted a question then figured it out myself.

sorry :\

So said on Friday 26 November, 2004 at 5:50AM GMT.

Comment 58

an application for the :active pseudoclass

First, what is a click and when does it occur?
A click occurs after the mousebutton has been pushed; ie after the button is released.
:active occurs before the click, on mousebutton down.

Let's say you create an anchor element &lta&gt with a background image. When you push down the website visitor gets an alternate image and when he releases the mousebutton again the click occurs and he gets taken to the page that the anchor linked to.
Pretty neat buttons could be created this way.
Imagine buttons that have three possible views : normal, when hovering, when clicking.

Maybe you should use my button idea as a mean to display the SuckerFish examples more clearly.

So said Stef Nighthawk on Tuesday 7 December, 2004 at 12:31PM GMT.

Comment 59

I'm trying to use suckerfish shoal to implement a background switch to a div class when the mouse hovers over the div. No matter how many combinations I try I can't seem to get the hover to work in IE. Could somebody please shed some light on this subject for me? This is how I am trying to implement the code currently:

CSS:

/* normal div class */
.content_notes_edit {
border: #FFFFFF 1px solid ;
padding: 2px 20px 5px 5px;
margin-left: 15px;
}

/* div class with hover */
.content_notes_edit:hover, .content_notes_edit.sfhover {
background: #F7F7F7 url(images/edit_20_bl.gif) no-repeat top right ;
border: #D1D1D1 1px solid ;
padding: 2px 20px 5px 5px;
margin-left: 15px;
}

Suckerfish shoal script:
/* I've tried many variations of this but can't quite get it to work */
suckerfish(sfHover, "CLASS", "content_notes_edit");

HTML:

Please light up when the mouse hovers over here!.

Thanks alot for helping out a newb!

So said sox_nathan on Sunday 12 December, 2004 at 10:14PM GMT.

Comment 60

Hi all.

I'm also using this menu, but i'm encountering some problems on IE (offcourse)
The submenu items are now placed next to the main items.
But I want the sub items (the second UL + LI's) to be placed above the main items.

So I just give the absolute positioned UL (subitems) less pixels on the left, so that it overlays the first UL.
No problem...works great. Except the main item that comes after the subitems is placed above the subitems.
I used a z-index on UL for subitems.

This works in every browser except in IE. I can't seem to fix it. The mainitem which is nest in line after the subitems is placed aboved subitems.

Pleade help...

So said Paul Kruijt on Wednesday 15 December, 2004 at 2:21PM GMT.

Comment 61

I changed the code for my own use. Thought I'd post it back just incase anyone else wanted it.

sfHover = function() {
//Changed to index directly into the NodeList rather caching it. Seems to speed things up.
for (var i=0; (sfEls = document.getElementById("nav").getElementsByTagName("LI")[i]); i++) {
//Changed to onmouseenter rather than onmouseover. IE 5.5 related. It speeds up
// the response of deep menus A function can be written to accomidate below IE 5.5
// see below
sfEls.onmouseenter=function() {
this.className+=" sfhover";
}
//Changed to onmouseleave rather than onmouseout. IE 5.5 related. It speeds up
// the response of deep menus A function can be written to accomidate below IE 5.5
// see below
sfEls.onmouseleave=function() {
//Got rid of new RegExp
this.className=this.className.replace="";
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


Function for MouseOver and MouseOut
function Over(el) {
if (!el.contains(event.fromElement))
// MouseEnter
}

function Out(el) {
if (!el.contains(event.toElement))
// MouseLeave
}

Why do you need this? When a user moves the mouse over each item, onmouseover and onmouseout events fire numerous times on the containing elements. When styles change in response to these events the elements "appearance" changes unnecessarily. Many, Many times. This becomes more noticeable the larger the menu becomes in the form of a lag in response.

Enjoy,
Scott.

So said Scott C. Hughes on Saturday 8 January, 2005 at 12:02AM GMT.

Comment 62

Anyone working with old Macs? The dropdowns go berserk on them. I'm willing to accept a crude hack to fix this.... any ideas?

So said Nick on Tuesday 25 January, 2005 at 8:17PM GMT.

Comment 63

Did anyone manage to make the items to use alternate background colors (i.e. switch between two colors). This could be helpful and make the dropdowns more readable.

So said Antonio on Tuesday 25 January, 2005 at 10:08PM GMT.

Comment 64

sfTarget doesn't seem to work in IE6/Win for me.

This line appears to be wrong:

sfEls[i].className+=" " + cls;

There's nothing defined for 'cls' -- where is this coming from?

I changed it to what I think it should be:

sfEls[i].className+=" sftarget";

but it still doesn't work. Any thoughts?

So said Matt on Thursday 27 January, 2005 at 2:51PM GMT.

Comment 65

Ah, ignore that last message, I was being an idiot....

So said Matt on Thursday 27 January, 2005 at 2:55PM GMT.

Comment 66

OK, so I was both being an idiot (had forgot to change the H2 to my own tag, SPAN in this case), but there is still a problem in the code:

sfEls[i].className+=" " + cls;

should be:

sfEls[i].className+=" ";

or you will receive errors as 'cls' is neither defined nor indeed required.

So said on Thursday 27 January, 2005 at 3:00PM GMT.

Comment 67

in reply to #66

I've encountered this issue too with :target
but

cls should be "sftarget"
so that line becomes

sfEls[i].className+=" sftarget"

if you just delete the cls instead of replacing it, the .sftarget style would not be applied to the # mentioned in the URL.

So said Stef Nighthawk on Tuesday 22 February, 2005 at 2:14PM GMT.

Comment 68

Anyone get this to work with width: auto (in other words, not the exact same wdith for all) for the main top-level nav items, or nav li.

So said Fred on Thursday 24 February, 2005 at 3:56PM GMT.

Comment 69

I'm having trouble controlling the width of the nav ul li elements in Internet Explorer. No matter what I change they're always wider than in Firefox and it spills over onto another line.

So said indi on Wednesday 2 March, 2005 at 4:27PM GMT.

Comment 70

I'm using a modified version of the SoS two-level dropdowns, and have managed to work through most of the cross-platform browser and interoperabilitiy problems relatively easily. Unfortunately, I'm stumped with a display issue in IE6 on Windows XP. Take the following page for example:

http://www.usd.edu/feedback/feedback.cfm

When you hover over the Academics menu, it drops down over most of the elements on the page; however, the form selects/dropdowns appear on top of the menu. Any idea how I can remedy this?

So said Eric on Monday 7 March, 2005 at 10:54PM GMT.

Comment 71

Hi, I can't seem to print my suckerfish drop downs as they appear on screen. The unordered list prints when I do, Any suggestions?

So said Andy on Wednesday 16 March, 2005 at 7:09PM GMT.

Comment 72

Suckerfish is great. You guys should write for Microsoft. With over 10,000 developers and IE is all they can come up with. Sad.

So said Peter on Tuesday 22 March, 2005 at 1:18PM GMT.

Comment 73

onmouseout doesn't work in IE 6. I have the suckerfish hover mimic javascript working in all browsers except IE 6. The onmouseout event doesn't work. The dropdown menus (level 2) menus stay displayed after the onmouseout event. Not sure what to do here.

So said Tim on Monday 4 April, 2005 at 3:44PM GMT.

Comment 74

Suckerfish works perfectly for me. The one problem I see is a layout problem. Since the top level lists float that means if the browser resizes the lists start to stack under each other. Here's where it gets sorta hard. I decided on to keep this from happening. I split each set of top/sub links up and placed them into their own table cell. That fixed the the top links from stacking.

It worked perfectly in Firefox. I had mulitple however IE does't understand it when multiple elements have the same ID. So is there a way of creating this with classes?

- Tony

So said Tony Bianco on Wednesday 13 April, 2005 at 12:12AM GMT.

Comment 75

Excellent drop-down solution. I'm no javascript expert, so I have a question. Is there an easy way to get these drop-downs to work with OnClick instead of onMouseover and onMouseout? I have put a search form (enter keyword and press Go) in one of the lists. As I mouseover the Search menu option, the search form displays. Then, when I switch from my mouse to my keyboard to enter a keyword, my mouse sometimes slips off the menu option and I lose the content of the list and therefore the ability to enter the search criteria in the form. Or maybe I am trying to get more out of this code than it is meant to provide? Thanks.

So said Julie on Thursday 14 April, 2005 at 2:38PM GMT.

Comment 76

To all you CSS buffs. I have just discovered that the box model hack of....

voice-family: "\"}\"";
voice-family: inherit;

This unfortunately adds more lines of code and a lot more work for such a little, little, little, fix. What this means is that all the files that have this box model hack with measurements for padding, border, and width totals will break in IE 6.

Signed the "CSS BUFF" Tony!

So said Tony Bianco on Thursday 14 April, 2005 at 9:18PM GMT.

Comment 77

Crap my comment number 76 didn't come thru all the way... See Sitepoint for the full article. It's too good to miss. Basicaly you need to use conditional comments to hide a different version of the stylesheet. The posting is in the CSS Sitepoint forums; title: "DEATH OF THE BOX MODEL HACK"

- Tony

So said Tony Bianco on Thursday 14 April, 2005 at 9:28PM GMT.

Comment 78

onmouseout doesn't work in IE 5 or 6??

So said eNicola.com on Friday 15 April, 2005 at 8:48PM GMT.

Comment 79

I've written up a document explaining how to get around the menus falling behind form SELECTs in IE.

So said Tim Thomas on Monday 18 April, 2005 at 9:03PM GMT.

Comment 80

Has anyone solved the flicker problem??

The problem occurs in IE when a user has his temporary internet file settings set to "check for new page evey time page loads". in IE, go to tools > options > settings : check the the first button and see what I see every time I look at a CSS dropdown with images.

Apparantly a lot of IE users have this option selected. I did, and didn't even know it. If someone could find a workaround I would be eternally greatful.

So said on Thursday 5 May, 2005 at 7:16PM GMT.

Comment 81

Has anyone solved the flicker problem??

The problem occurs in IE when a user has his temporary internet file settings set to "check for new page evey time page loads". in IE, go to tools > options > settings : check the the first button and see what I see every time I look at a CSS dropdown with images.

Apparantly a lot of IE users have this option selected. I did, and didn't even know it. If someone could find a workaround I would be eternally greatful.

So said steve on Thursday 5 May, 2005 at 7:16PM GMT.

Comment 82

The dropdowns are great and a lifesaver BUT...

It appears that in IE 6.0 they aren't activated until the whole page has loaded; which if the page has pictures, may take some time. Until then the menus are visible but the dropdowns don't work. See http://www.cardbox.com/index.htm for an example.

This is evidently because of the functionality that's tied onto onLoad in IE. (Mozilla Firefox works fine).

Has anyone found a way to work round this?

So said Martin Kochanski on Monday 9 May, 2005 at 8:57AM GMT.

Comment 83

Must be a way of preloading a script... use google!

"JavaScript preloader"... maybe.

So said Fen on Thursday 12 May, 2005 at 5:13PM GMT.

Comment 84

Tony:
A equivalent of Tantek's (nasty) voice-family hack is (here for font-size: small; ):
* html class/id/tag { font-size: x-small; f\ont-size: small; }
It also gets around the "having to add an extra rule for Opera" annoyance

The use of conditional comments can be helpful, but I'd much rather use the browser bugs to my advantage than double up too much.
See http://centricle.com/ref/css/filters/ for a table of hacks. Judicious use of various comment hacks can produce wonders such as:
/* All browsers */
tag { property: value; }

/* NN4 only */
/*/*//*/
tag { property: value; }
/* */

/* Not NN4 (twice, just for grins, but more granular control for specific media may be required) */
/*/*/@media all{
tag { property: value; }
}/* */

/* IE only */
* html tag { p\roperty: MacIE value; /* \*/ property: WinIE<6 value; p\roperty: WinIE6 value; */ }


So said Phil on Thursday 26 May, 2005 at 3:22PM GMT.

Comment 85

Just wanted to drop a message saying I love this technique. I use it on my site and it was very easy to implement. The reason I love it is because the dropdown is always going to be Relative to it's parent on the X Axis. Usually we use YPDropDownMenus and we have to reposition the menus horizontally. This always gives us problems when IE has a scrollbar and other browsers do not so our dropdowns are like 20 pixels off for other browsers. Thanks for posting this article.

So said Chet on Tuesday 31 May, 2005 at 2:37PM GMT.

Comment 86

I'm trying to make theSuckerfish drop-down menus properly accessible, but getting Bobby errors about event handlers… I need to replace the onmouseover and onmouseout events with onfocus and onblur for different input devices. The function stops working though.

Can anyone help me out?

So said Bungle on Tuesday 31 May, 2005 at 3:36PM GMT.

Comment 87

I am feeling a bit loopy with trying to get this to work for me on IE6.

If anyone doesn't mind peaking--http://www.cthotspots.com/test/hotspots3.html

I know other parts of the code are badly written--most of this is integrated off of their old site, and unfortanetly budget concerns didn't allow for the redesign or code changes i would like to make.

Styles and script are in page for easy checking.

Many thanks to anyone who takes the time to look at this--it's truly appreciated.

So said David Streever on Thursday 23 June, 2005 at 11:38PM GMT.

Comment 88

I'd like to use the :target method to go from a link in one frame to highlight text in the middle of another frame. Can anybody tell me how to split up the code between the two pages to make this work?

So said Avi Craimer on Tuesday 5 July, 2005 at 5:10PM GMT.

Comment 89

I really like this method of creating drop down menus and am working on implementing it on a site I am working on right now. My only quesiton is that I am using an image as teh main trigger and can not figure out how to stop it from having a rollover color applied to it as well. Does anyone know how to stop the rollover color from being applied to an image?

So said Chad on Friday 8 July, 2005 at 3:50PM GMT.

Comment 90

Hi all,

I found a way to get rid of an additional script and some necessary browser-sniffing: Attach the focus/blur events via Dynamic Properties. Here's an outline of how it works:

.whatever {
background: #808080;
}
.whatever:focus, .whateverfocus {
background: #eaeaea;
}

.whatever {
behavior: expression(
this.onfocus = function() { this.className += ' whateverfocus'; },
this.onblur = function() { this.className =
this.className.replace('whateverfocus', ''); });
}

Here's a blog entry of mine about all this:
http://stilbuero.de/blog/2005/07/whateverhover-fast-and-easy.html

So said Klaus Hartl on Tuesday 12 July, 2005 at 1:11PM GMT.

Comment 91

I am trying to use this for the first time on a new site that I am developing. I like the way it works. My problem is that it works great in IE but not in Netscape. Maybe there is something that I need to change. I changed alot of the size attributes to px instead of em. I don't know if that matters.

Check it out at http://iccgie.winstemp.com/aboutus_history.asp

I have tried this is IE6 (perfect) and Netscape 7 (dodgy).

So said Nick Elliott on Monday 25 July, 2005 at 8:55AM GMT.

Comment 92

Hi all!

1) I'm trying to make a summary of variations in this code to make it works in Mac but I'm lost!
So, someone can help me (and not only me I supose) posting a "state of the art" of this variations?

2) I have a technical/teorical question. Why this code dosen't work in Firefox an Geko browser?
I mean it's cuted for IE/win and in Geko and opera browser it's used normaly css pseudo-class :hover. But if I want to use only javascript sfhover class also in those browser I see in Firefox (for example) that sub-menu items stay freezed (open) after mouse pointer has leaved (onmouseout) the item I want to "open" (show the sub-items).
I'm not a javascript expert, so which how you have so much patience to explain me?

Thank you very much!

So said Paolo Candelari on Tuesday 26 July, 2005 at 6:30PM GMT.

Comment 93

I have faithfully copied the suckerfish shoal code into my Web pages for both menu and hover functions. Everything works perfectly except in IE. Although the pages work correctly in IE, I get the following error notification:

Error: 'document.getElementbyId(...)' is null or not an object
Code: 4

I am using suckerfish in three places on the page:

suckerfish(sfHover, "LI", "nav");
suckerfish(sfHover, "LI", "contentpop");
suckerfish(sfHover, "LI", "footpop");

It is a nuisance for me with IE 6.0 with the error notification symbol in the bottom left of the page, but a showstopper for older versions that stop the page load to show the error message.

Any suggestions for rectifiying this?

Thanks,

Brian

So said Brian Goodman on Thursday 28 July, 2005 at 9:14PM GMT.

Comment 94

This looks great. I am having a wee problem with the focus. My code is:

suckerfish(sfFocus, "INPUT");
suckerfish(sfFocus, "TEXTAREA");
suckerfish(sfFocus, "SELECT");

My field is
Fixed < input name="RentperAnnum" value="1" size=10 onblur="this.value=formatCurrency(this.value)"> per annum plus GST being ....

What is happening is that the the focus changes as expected but when I tab out of the field my onblur is not firing to format the field content. I suspect this is being clobbered by
sfEls[i].onblur=function() { this.className=this.className.replace(new RegExp(" sffocus\\b"), ""); }

Any ideas how to work aroung this.

Sorry if this ia a simple question but I am not an expert on JavaScript or Regular Expressions.

So said Kezza on Monday 8 August, 2005 at 8:33AM GMT.

Comment 95

Problem: I'm using shoal to drive "faux tooltips" (unhides a span on :hover, see www.communitymx.com) on a set of calendar links set in a table.

FF likes a:hover with a z-index of 10 and no z-index declared for either body or a.

The problem in IE is the tooltip hover spans appear under adjacent a links. They should be on top.

I've tried various combinations of z-index with body, a and a:hover but nothing fixes IE. The adjacent a always stays on top. grr.

HELP!

So said Barry on Thursday 11 August, 2005 at 8:14PM GMT.

Comment 96

Hi me again. I found a faux tooltip that doesn't even require shoal to work in IE. It's pure CSS. Check it:

http://www.psacake.com/web/jl.asp

I'll figure out why it works later. Suckerfish still rules my menubar.

tks.

So said Barry on Thursday 11 August, 2005 at 8:33PM GMT.

Comment 97

Any way to make variable drop downs space out better? I have used succerfish hoping for something like this:

menu1 menu2 menu_3_is_long
sub_menu_3
longer_sub_menu_3
really_longer_sub_menu_3

It appears that the "menu1", "menu2" and "menu3" would be driven by the css pseudoclass spacing of and

If anyone knows how to do the above in css (it appears that the first line needs different spacing rules than the drop down, but since we are subclassing the same element...)
Hmm, perhaps we needs to pseudoclass something else?

So said blake on Friday 26 August, 2005 at 6:39PM GMT.

Comment 98

Love the suckerfish shoal. I seem to have one problem and it is probably a quick fix.

I want to use sfHover on buttons, but not on text boxes. Since both buttons and textboxes both are INPUT tags... they both do the same action when setting: "suckerfish (sfHover, "INPUT" );

Putting parent id's is not really an option either because the forms are fairly extensive (texboxes and buttons) and it would look like soup very quickly.

I tried using classes on the buttons and using: suckerfish (sfHover, "INPUT", "class" ); but that also didn't work. (assuming because it is not a parent element)

So my question is:
Is there any way to isolate texbox and/or submit buttons using the suckerfish shoal?

Thanks

So said Dave Gregory on Tuesday 30 August, 2005 at 12:23AM GMT.

Comment 99

Oh and just to clarify.. when I say it's a quick fix.. I mean that it is probably something I am just not understanding or figuring out. ;)

Thanks again!

So said Dave Gregory on Tuesday 30 August, 2005 at 12:24AM GMT.

Comment 100

I'm having a problem similar to Dave (post 98 & 99).. just in a table. I'm using it to light up a cell when you hover over it (change background color).
But it's only some cells I want to light up. I've isolated the cells with classes (class="normal", class="selected" etc.) and the other CSS stuff like borders and background are working fine on the different classes.
But how do I isolate them in the "suckerfish"? I've tried many ways.. but can't seem to figure it out.

So said Jakob Larsen on Wednesday 31 August, 2005 at 9:31PM GMT.

Comment 101

Hi. Your CSS work is so good, thank you so very much.

If you'd link to see the way I've bastardized the suckerfish drop down I've made a web page at :
http://www.ekstasis.net/index3.php

I've read some comments on IE / Mac - it doesn't work, but who cares?, it works fine in Safari. A list a part does and has some helpful info on IE Mac:
http://www.alistapart.com/articles/ie5mac


I haven't yet investigated Nick's comment:

...

See http://centricle.com/ref/css/filters/ for a table of hacks. Judicious use of various comment hacks can produce wonders such as:
/* All browsers */
tag { property: value; }

/* NN4 only */
/*/*//*/
tag { property: value; }
/* */

/* Not NN4 (twice, just for grins, but more granular control for specific media may be required) */
/*/*/@media all{
tag { property: value; }
}/* */

/* IE only */
* html tag { p\roperty: MacIE value; /* \*/ property: WinIE<6 value; p\roperty: WinIE6 value; */ }

So said mat on Wednesday 14 September, 2005 at 3:59PM GMT.

Comment 102

I'm making a menubar for a website I'm working on. I've basically taken most of the code from this page and implemented it into my own site.

I took the code and made two menubars actually. One at the top of the page, and one down from it after a table of dynamic content. Without getting too much into it, it basically works in Firefox, but not fully in IE 6, on Windows XP.

One of the menubar renders fully (the bottom) while the top one doesn't highlight at all in IE. Everything renders just fine in Firefox as you could imagine.

I made a separate style sheet for each menu, and a different javascript for each menubar as well. I still can't get IE to highlight the top menubar though.

Any ideas or suggestions?

So said Danny on Thursday 15 September, 2005 at 3:57PM GMT.

Comment 103

Guess what? Yet another newbie asking questions about something he doesn't fully understand!
I've made a styled version of the menu at this address: http://www.geocities.com/koolkevinskorner/son.html and it works flawlessly. The accompanying CSS and Javascript files are at these addresses: http://www.geocities.com/koolkevinskorner/style.css; http://www.geocities.com/koolkevinskorner/menu.js.

The problem is when I try to integrate the menu into my web page at this address: http://www.geocities.com/koolkevinskorner/3columns.html. When I scroll over a list item the menu appears fine, but then disappears if I try to scroll over a drop-down list item.
The accompanying CSS and Javascript files are at these addresses: http://www.geocities.com/koolkevinskorner/3columns.css; http://www.geocities.com/koolkevinskorner/test.js. Unfortunately, Geocities don't host .vbs files so here's the code in all it's glory. The page suffers from the same problem without the vbscript file so it probably makes no difference; it's just for a clock on the page.

timerID = null
timerRunning = false

sub stopTimer
if timerRunning then
clearTimeout timerID
timerRunning = false
end if
end sub

sub startTimer
stopTimer
runClock
end sub

sub runClock
Dim rgdow,rgmoy
rgdow = Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
rgmoy = Array("January","February","March","April","May","June","July","August","September","October","November","December")

t_time = Now()
alltime.innerText = t_time
dow.innerText = rgdow(weekday(t_time)-1)
moy.innerText = rgmoy(month(t_time)-1)
dom.innerText = day(t_time)
yr.innerText = year(t_time)
TimerID = setTimeout("runClock",1000,"vbscript")
timerRunning = true
end sub

Any help would be greatly appreciated. Thanks, guys.

So said kev on Thursday 29 September, 2005 at 12:34PM GMT.

Comment 104

I think i need better answer on the question why this is better than the HTC method?

So said Andreas on Friday 30 September, 2005 at 2:50PM GMT.

Comment 105

I thought I'd successfully implemented suckerfish on a site I was working on and added Google adsense underneath the drop downs. It works great in IE but in Firefox and Netscape the drop down disappears when the cursor touches the area where the link of the underlying adsense lies. See this at www.thechristmassite.ukdining.co.uk/ski.php.
I have tried changing the z-index but nothing seems to change. Adsense is javascript code.
Please can anyone help

So said Nick on Wednesday 12 October, 2005 at 10:09PM GMT.

Comment 106

i am designing a site where i want to implement this method. however, i want the positioning to work as follows:

the user mouses over item1.0.0, showing items 1.1.0, 1.2.0, etc directly below item1.0.0 and moving items 2.0.0, 3.0.0, 4.0.0, etc down to accomodate for the space 1.1.0 et al takes up. then, upon mousing over 1.1.0, i would like a menu of 1.1.1, 1.1.2, etc to show up to the right. any idea on how to do this? i would assume it's just a simple CSS fix, but i could be wrong.

thanks

Jason

So said Jason on Wednesday 26 October, 2005 at 7:15PM GMT.

Comment 107

I like the idea of the suckerfish dropdowns! I wonder if there is a place that would explaine the JavaScript used in the "Son of Suckerfish"?

So said Steve on Wednesday 2 November, 2005 at 5:56PM GMT.

Comment 108

Couldn't it be a good idea to hide the menu with Javascript at first? In that case, browsers that do not support it will show the menu so the site is browseable. With the current version for example, IE with JS disabled won't show the menu, because CSS has hidden it, but cannot bring it back.

So said Bart Feenstra on Tuesday 8 November, 2005 at 3:03PM GMT.

Comment 109

I applied the son of suckerfish menu to this page, but I got a question that is CSS related. Can some one tell me why is my navbar not extending all the way until the end of the page.

It does in IE but not in Firefox and Opera (PC) or Safari, Firefox and Opera (Mac).
The bar is supposed to be a solid orange bar, but it stops short.

http://aadezyn.com/TRI/Templates/

If someone know what the solution is, I would really appreciate it.

Thanks in advance.

So said Alex on Wednesday 9 November, 2005 at 12:04AM GMT.

Comment 110

Hi Guys,
Does anyone know how the suckerfish :focus attribute can be applied to a css class (as apposed to an html element)? I've managed to do this fine working in firefox, but applying it to say "input" it obviously applies it too all input tags on the page.
Cheers
Chris

So said Chris on Thursday 24 November, 2005 at 7:35PM GMT.

Comment 111

Hi

Anyone experiencing unsolvable problems wrt disappearing lists (eg over other elements) may want to try placing tables (no cellspacing/cellpadding) around each li tag, (as well as rasing the ul z-index.)

So said Rab on Tuesday 6 December, 2005 at 12:30PM GMT.

Comment 112

Hi,
I'm trying to solve the old problem of IE's select boxes showing through the otherwise perfect suckerfish dropdown menus (because of their z-index misbehaviour)... I've been using a similar approach to:
http://homepage.mac.com/igstudio/design/ulsmenus/vertical-uls-iframe.html
(See http://tanny.ica.com/ica/tko/tkoblog.nsf/dx/Select-tag-overlap-in-IE for a bit of discussion).

This works well, but our menus are pretty massive and loading all those iframes at page load takes ages and is unnecessary. So I'm trying to adapt it to load the iframes on demand and have altered the javascript slightly. I'm slightly baffled as to why the code below doesn't work... does anyone have any ideas? (The second level menu appears but for some reason mouseover events don't fire correctly to load menus below that). Any thoughts appreciated.

So said Martin on Wednesday 28 December, 2005 at 5:08PM GMT.

Comment 113

Nice collection, i'm liking this thing, and i got it to work. Very nice method of creating drop down menus.

So said Alex on Tuesday 31 January, 2006 at 3:21PM GMT.

Comment 114

Shoal is great, but it includes buttons when I apply it to inputs. Any way to make it exclude them?

Thanks!

So said GDawg on Wednesday 15 February, 2006 at 8:55PM GMT.

Comment 115

I love Drop Downs especially the mere 12 lines of JavaScript. I checked out a large number of potential solutions for a client who has an absolute ton of navigation links. Drop downs facilitate easy maintenance. Thanks for writing such great code.

So said Solomon Rothman on Sunday 26 February, 2006 at 8:43AM GMT.

Comment 116

i like the "sons of suckerfish" dropdown menu solution... but one thing that it DOESN'T do well compared to the .htc method is suckefish doesn't highlight the parent when you hover on the 2nd level popup menu.

is there a way to leave focus on the parent at the same time when a user is on a 2nd tier popup menu?

maybe this can be fixed with a simple javascript solution... but i am not blessed with javascript skills!!! :(

So said djray on Thursday 9 March, 2006 at 12:48AM GMT.

Comment 117

Hi,

I am trying to do something that I don't really understand and thought I had cracked it when it worked fine in IE6 but went to view it in FF 1.5 and it did not work.

My attempt can be seen at http://mydigitalhome.com.au. All the css files are available in the source so if anyone has any ideas I would love to hear them.

So said Laurie Lewis on Sunday 19 March, 2006 at 10:53AM GMT.

Comment 118

Sorry,

I had to move the location of the files indicated in Message No: 117.

It can now be found at:- http://www.mydigitalhome.com.au/menu/Menus.html

So said Laurie Lewis on Sunday 19 March, 2006 at 9:45PM GMT.

Comment 119

Quick and Dirty Hack for IE Mac - Not Pretty - but does kinda work
Found a way of making it work for IE Mac, and the 14 people that still use it, runs like a dog, but better than no menu.

PS Great work guys

if (window.attachEvent){

window.attachEvent("onload", sfHover);
} else {
// for IE mac
if (document.all && document.getElementById) window.onload=sfHover;

}

So said Overworked code monkey on Tuesday 28 March, 2006 at 10:45PM GMT.

Comment 120

Hello guys. I'm trying to use suckerfish in order to use the :hover effect for a DIV in IE.
This is the DIV:

#main {
position:absolute;
left:25px;
top:176px;
width:475px;
height:363px;
z-index:4;
overflow: auto;
border: solid;
border-width: thin;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
border-right-color: #FFFFFF;
border-top-color: #FFFFFF;
}

This is the hover effect:
#main:hover, main.sfHover { border-color: #8DC313; background-color: #EBEBEB }

And the javascript:
sfHover = function() {
var sfEls = getElementsByTagName("DIV");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

What have I done wrong :/ ? Please help me.
-Thanks in advance

So said Alex on Sunday 16 April, 2006 at 10:05PM GMT.

Comment 121

Martin,

Check out the z-index. In your javascript make sure that you set the element's z-index higher than the iframe's. I had some trouble with this and finally did the following:

ieMat.style.zIndex="-1"; // iframe.
ieULs[j].style.zIndex="101"; // ul

I had the same problem you're having in that the second level menu would appear but the mouseover events wouldn't fire. This fixed it.

You can see the new version at http://tanny.ica.com/ica/tko/tkoblog.nsf/dx/select-tag-overlap-in-ie-part-ii

BTW, if you have such a large menu structure you might rethink and separate the structure into smaller chunks.

So said Tanny O'Haley on Wednesday 26 April, 2006 at 5:06AM GMT.

Comment 122

Hi guys, i've been building a website and i'm using suckerfish for the :hover fix... but i'm having this odd problem... when the code is in place the site will display fine in IE, firefox, but when i test the site in Safari, nothing of the page displays at all (i'm using the most recent version of safari). Here is a copy of the code i'm using. If anyone can give some suggestions on how to fix this please help.

If you want to get an idea of what i'm doing you can go to www3.sympatico.ca/keroberts/gallery.htm

So said Jamie Roberts on Thursday 6 July, 2006 at 6:03PM GMT.

Comment 123

I am learning so much from you. Several of your scripts have inspired my code and fixed my IE issues.
THANK YOU!! THANK YOU!!

So said Nat on Thursday 31 August, 2006 at 7:27PM GMT.

Comment 124

Has anyone looked at the performance hit for this little hack in IE? I was using it just to highlight rows in a data table (no dropdowns or other effects). Just want to highlight a row when I mouseover. It works fine in IE6, but CPU usage goes WAY up (on IE6 only) when I mouseover (table contains approx 300 rows). Response is also pretty sluggish, compared to Firefox. No noticeable performance hit on Firefox. (Both tested on Windows only so far. 1.4Ghz, 512Mb RAM).

So said Rory on Wednesday 6 September, 2006 at 2:12AM GMT.

Comment 125

is there anyway you guys code comment the css so not as expierenced users could use it... THnaks

So said g on Monday 11 September, 2006 at 8:05PM GMT.

Comment 126

I love the :focus script and would like to use it, but it's causing me some problems. I have a search box that already has some onfocus code. The field has a default value of "Search..." and on focus that is removed. On blur, if the field is empty, it is set back to "Search...". Looks awesome in firefox with the :focus style added. But in IE, suckerfish overwrites my existing onfocus and onblur code. If I try to do .onfocus += yadda yadda, then neither of them work. It just doesn't do anything.

Help!

So said Trint on Friday 15 September, 2006 at 6:19PM GMT.

Comment 127

Hi my name is Kam and i am trying to get my drop down menu to work in firefox and IE7. The drop downs are working fine in IE6 however when i load my page up in firefox all i see is my menu listed on screen. I have spent days trying to fix this problem but as yet have had no luck. I would appreciate it if someone can have a look at my code and give me some suggestions. I have included the url.

Many Thanks
Kam

So said Kam Bhogal on Monday 25 September, 2006 at 3:15PM GMT.

Comment 128

Comments closed thanks to dirty evil little spammers.

So said Patrick on Friday 6 October, 2006 at 3:04PM GMT.

See Also

^ Top

SiteGround: Fast, reliable, recommended hosting.