0

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)                      
        });
    }
});
});
2
  • And if you click on Media Contact gets highlighted.. Check your html code, you have wrong classes on the menu items container. Media actially has 'gallery' class, etc.
    – dfsq
    Nov 15, 2011 at 14:03
  • I have change the classes but still no luck....
    – kwek-kwek
    Nov 15, 2011 at 14:08

2 Answers 2

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.

0
0

What is cur_page? I assuming that it's current page index and you have difference in calculation. Probably your index starts with 0 but cur_page starts from 1.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.