Moved from Jquery 1.2.6 to 1.4.1 > Script errors :(

Question

Hi,

Ive been playing with some jQuery script that was originally written using 1.2.6. I want to use his try this script along side some other jquery stuff whilst moving upto the latest 1.4.1, however i get an error.

The code is:

    GlobalHeader={
    globalNav:function(){
        var recipeLbl="recipes-and-cooking";
        var navTimer=null;
        var bodyId=document.body.id;
        bodyId=(bodyId=='shows'||bodyId=='chefs')?bodyId:recipeLbl;
        var initializeMenu="#sub-nav-"+bodyId+" li";
        hideAll();

        initMenu(initializeMenu);

        function initMenu(initializeMenu){
            var menu=initializeMenu;
            $(menu).find('h3:first span').click(function(){hideAll();});
            $(menu+"[@class ^= 'nav-']").each(function(i){$(this).hover(
                function(e){
                    hideAll();
                    var $this=$(this);
                    var offsetVal="auto";
                    var divs=$(this).nextAll();
                    var width=0;

                    jQuery.each(divs,function(){width=width+parseInt($(this).width());});
                    if($this.hasClass("nav-e")){
                        offsetVal=(($(this).parents().filter('ul').width()-$(this).find('div.drop').width())-width);
                    }
                    else
                    {
                        if((jQuery.browser.msie)&&(jQuery.browser.version==6)){
                            offsetVal=($(this).parents().filter('ul').width()-width)-parseInt($(this).width())-7;
                        }
                        else
                        {
                            offsetVal="auto";
                        }
                    }
                    $('body').bind("click",function(e){bodyClick(e);});
                    navTimer=setTimeout(function(){
                        $this.find('div.drop').css({
                            left:offsetVal,top:"28px",background:"none",display:"block"
                        });
                    navTimer=null;},375);
                },
        function(e){
        clearTimeout(navTimer);
        navTimer=null;
        var closeDiv=$(this);
        if(jQuery.browser.msie){$(this).find('div.drop').css({background:"b2b2b2"});}
        navTimer=setTimeout(function(){
            closeDiv.find('div.drop').css({top:"28px",display:"none",display:"none"});
            navTimer=null;}
        ,100);}
    );}
    )
;}
function bodyClick(e){var $clicked=$(e.target);if($clicked.parents().is('.drop')){return false;}else{hideAll();$('body').unbind();}}
function hideAll(){clearTimeout(navTimer);navTimer=null;$("#sub-nav li[@class ^= 'nav-'] div.drop").each(function(){$(this).css({display:"none"});});}
}};

However, it errors at this line $(menu+"[@class ^= 'nav-']").each(function(i){$(this).hover( saying undefined is null. jQuery 1.4.1 also errors complaining of a "thrown but not caught" error.

Can anyone spot the fix?

Many thanks in advance

Answer 1

The @ was removed from attribute selectors in jQuery 1.3+, it should now just be:

$(menu+"[class^='nav-']")

You can view a full list of the current attribute selectors for jQuery 1.4+ (or whatever the current version is...this answer will grow old :) here: http://api.jquery.com/category/selectors/attribute-selectors/

Your hideAll() function at the bottom will need the same treatment:

$("#sub-nav li[class^='nav-'] div.drop")

One last note, the latest as of this answer is jQuery 1.4.2, might as well get all the latest bug fixes and methods it includes, you can always find the latest version here: http://docs.jquery.com/Downloading_jQuery#Download_jQuery