I'm very impressed Joel.
I'll need some time to study it more. Its a great thing for me to learn to
write better jQuery and js code.
I guess that the following lines :
(function($){
$.fn.applyNavPath = function(o){
o = $.extend({
have something to do with getting the jQuery object, extending it, all this
in a namespaced way.
That is a vocabulary & coding practice that I do not master, but I'm getting
closer.
Thanks a lot. really.
-Olivier
On 10/4/07, Joel Birch <[EMAIL PROTECTED]> wrote:
>
>
> 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.
>
