jQuery lavalamp with pages and category menu (wp 3.03)

[agepilar]

hi @ all!
i was searching for 3 days and now i`m totally out of ideas so i hope you guys can help me.

i tried to add the lavalamp menu to wordpress 3.03 with the "wp_nav_menu" and everything works fine but:

i added a category to the main menu and my problem is that the hover picture always jumps back to first menu item (the behaviour of the pages is correct, the picture goes to the last selected page and stay there if i select this page)

this is how i tried to integrated the menu in the boldy theme:

in the header i did this:
1.

PHP Code:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.lavalamp.js"></script>

2.

PHP Code:

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('.current_page_item').addClass('current');
        $('.lavaLampBottomStyle').lavaLamp({
            fx: "easeOutBack",
            speed: 900, 
            click: function(event, menuItem) {
                return true;
            }
        });
    });
</script> 


3.

PHP Code:

<ul class="lavaLampBottomStyle" id="wp_nav_menu">
            <?php if ( function_exists( 'wp_nav_menu' ) ){
                    wp_nav_menu( array( 'theme_location' => 'main-menu', 'container_id' => 'mainMenu', 'container_class' => 'ddsmoothmenu', 'fallback_cb'=>'primarymenu') );
                }else{
                    primarymenu();
            }?>  
           </ul>

my jquery.lavalamp.js is like this:

PHP Code:

(function($) {
$.fn.lavaLamp = function(o) {
    o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});

    return this.each(function() {
        var me = $(this), noop = function(){},
            $back = $('<li class="back"></li>').appendTo(me),
            $li = $("li", this), curr=(($("li.current-cat-parent",this)[0]||
            $("li.current-cat",this)[0])||
            $("li.current_page_item",this)[0])||
            $($li[0]).addClass("current_page_item")[0];

        $li.not(".back").mouseover(function() {
            move(this);
        }, noop);

        $(this).hover(noop, function() {
            move(curr);
        });

        $li.click(function(e) {
            setCurr(this);
            return o.click.apply(this, [e, this]);
        });

        setCurr(curr);

        function setCurr(el) {
            $back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
            curr = el;
        };

        function move(el) {
            $back.each(function() {
                $(this).dequeue(); }
            ).animate({
                width: el.offsetWidth,
                left: el.offsetLeft
            }, o.speed, o.fx);
        };

    });
};
})(jQuery); 


i added also a lavalamp.css to design

i can`t figure out where the error is, thanks for your help!!

[SB65]

Can you give a link to your page - it'd be easier to see the problem.

[agepilar]

yes of course, sry for the late response

http://www.advertising-music.de/advertising-music

i added two times "werbemusik" to the navigation (just to show you the difference) - the second is a page and the 4th the category

any idea would be appreciated, can`t figure it out

[SB65]

Your lavalamp is looking for items with class .current, not as you've posted. This in turn is set by this jQuery:

$('.current_page_item').addClass('current');

However, the Werbemusik category is not a page and does not have the class current_page_item. Have a try instead replacing this code with:

$('.current-menu-item').addClass('current');

The category link does have this class and hence the lavalamp should work correctly.

[agepilar]

jeeeeha unbelievable it works!! thank you so much!! you made my day

... and so simple if you know it ^^