[jQuery] Re: My Superfish disappears for no reason

[Joel Birch]

On 10/4/07, Olivier Percebois-Garve <[EMAIL PROTECTED]> wrote:
> The first one highlights the item currently selected. I works pretty well,
> and could be improved to handle types sort of url.
>
>     $('.nav li a').each(function(){
>         href = $(this).attr('href').split('/');
>         href =
> $(this).attr('href').replace('http://'+document.location.hostname,
> '');
>         path = document.location.pathname;
>         if (path.charAt(path.length-1) == '/') path = path+' index.html';
>         if (href == path){
>             $(this).parent().addClass('selected');
>
> $(this).parent().parent().parent().children('a').addClass('selected');
>             $(this).addClass('selected'); /
>         }
>     });

Olivier, good to here your menu is working now.

Regarding your new code, I think your first idea is interesting and
could have some use in certain circumstances. Personally, my
preference would be to always try to have the nav path applied
server-side whilst generating the mark-up so that the indicator is
there when JS is unavailable. When that is not possible your idea is
good alternative. I noticed various ways to improve your code and was
inspired by the challenge so I created a plugin out of it for you to
use. It's called applyNavPath. I did change what elements the
'current' class gets applied to though in order to suit the Superfish
philosophy. The class is added to all parent li elements of the anchor
with the current url in its href attribute, in addition to the anchor
itself. This provides more control over the styling and means that the
resulting HTML will be compatible with Superfish's pathClass option.
If you only want to style the one final anchor, simply use a.current {
/* style it */ } rather than .current {} which would style the li
elements too.

Also, there is an optional object you can pass into the plugin
allowing you to change the name of the class you want to use and also
what file suffix to add to the string 'index'.

The plugin code:

(function($){
        $.fn.applyNavPath = function(o){
                o = $.extend({
                        currentClass : 'current',
                        suffix : 'html'
                }, o || {});
                
                var urlWithFile = function(url) {
                        return (url.charAt(url.length-1) == '/') ? 
url+'index.'+o.suffix : url;
                };
                
                $('a',this).each(function() {
                        var $$ = $(this),
                                href = 
urlWithFile($(this).attr('href').replace('http://'+document.location.hostname,''));
                                path = urlWithFile(document.location.pathname);
                        if (href == path) {
                                
$$.parents('li').add($$).addClass(o.currentClass);
                        }
                });     
                
                return this;
        };
})(jQuery);

With this written as a plugin it is chainable and you could initialise
Superfish like this, for example:

$('.nav').applyNavPath().superfish();

Or with more options, and also using the optional pathClass feature of
Superfish:

$('.nav').applyNavPath({
    currentClass : 'selected',
    suffix : 'php'
}).superfish({
    animation : {opacity:'show',height:'show'},
    delay : 1200,
    pathClass : 'selected'
});

I hope this comes in handy Olivier, and credit for the tricky stuff
goes to you, of course. I just made it work as a plugin.

I didn't have time to look at your second idea. Maybe I'll have a look
when I get chance.

Cheers
Joel Birch.