Question

I am editing a site that the menu is using a JavaScript. I managed to have it working but the hover state is just showing in the wrong place.

Here is the link. If you click on “Gallery” it’s the Media that gets highlighted so on the last 3 menu items. Help please.

Here is the JavaScript code:

$(document).ready(function(){
$('#menu .container').each(function(i){
    if(i==0)
    {
        var m = 1;  
    }
    else
    {
        var m = 2;
    }
    $(this).css('width',((m-1)*$(this).parent('li').height() + $(this).parent('li').width())).css('height',$(this).parent('li').height()).css('margin-left',-(m-1)*$(this).parent('li').height()).css('cursor','pointer');

    if(cur_page!=i)
    {
        $(this).find('.slide').html('<img src="' + tpl_base + '/images/menu-slide-' + (i+1) + '.png" />').css('top',$(this).parent('li').height()).css('left',-/*m**/($(this).parent('li').height()));
    }
    else
    {
        $(this).find('.slide').html('<img src="' + tpl_base + '/images/menu-slide-' + (i+1) + '.png" />').css('top','0px').css('left','0px');
    }

    $(this).find('.text').html('<img src="' + tpl_base + '/images/menu-title-' + (i+1) + '.png" />').css('margin-left',(m-1)*$(this).parent('li').height());

    switch(i)
    {
        case 0: var a = url_base + '/bio';
            break;
        case 1: var a = url_base + '/blog';
            break;
        case 2: var a = url_base + '/gallery';
            break;
        case 3: var a = url_base + '/media';
            break;
        case 4: var a = url_base + '/contact';
            break;
        default: var a = url_base;
    }

    $(this).click(function(){
        window.location = a;                       
    });


    var t = $(this).parent('li').height();
    if(cur_page!=i)
    {
        $(this).hover(function(){
            $(this).find('.slide').stop().animate({top:'0px',left:/*-(t*(m-1))*/0 + 'px'}, 200)                    
        },function(){
            $(this).find('.slide').stop().animate({top:t + 'px',left:-(t/**m*/) + 'px'}, 400)                      
        });
    }
});
});

Answer 1

The highlighting of the menu items appears to be done based on the variable cur_page which is being set incorrectly at some point in the code; here are the values as they sit now:

Home : cur_page = -1
Bio : cur_page = 0
Blog : cur_page = 1
Gallery : cur_page = 3 // Incorrect
Media : cur_page = 4 // Incorrect

I would check that this is being set correctly; good luck!

EDIT:

In the header of the Gallery page is this:

<script> 
    var url_base = "http://www.ryansemple.com";
    var tpl_base = "http://www.ryansemple.com/wp-content/themes/semple2010";
    var cur_page = -1;
    cur_page = 3;
</script>

Change it to this:

<script> 
    var url_base = "http://www.ryansemple.com";
    var tpl_base = "http://www.ryansemple.com/wp-content/themes/semple2010";
    var cur_page = 2;
</script>    

A similar fix should take care of the remaining pages.