Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    lavalamp with pages and category menu (wp 3.03)

    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",
                
    speed900
                
    click: function(eventmenuItem) {
                    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) {
        
    = $.extend({ fx"linear"speed500click: function(){} }, || {});

        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, [ethis]);
            });

            
    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({
                    
    widthel.offsetWidth,
                    
    leftel.offsetLeft
                
    }, o.speedo.fx);
            };

        });
    };
    })(
    jQuery); 
    i added also a lavalamp.css to design

    i can`t figure out where the error is, thanks for your help!!
    Last edited by agepilar; 12-15-2010 at 08:54 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Can you give a link to your page - it'd be easier to see the problem.

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Your lavalamp is looking for items with class .current, not as you've posted. This in turn is set by this jQuery:

    Code:
    $('.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:

    Code:
    $('.current-menu-item').addClass('current');
    The category link does have this class and hence the lavalamp should work correctly.

  • Users who have thanked SB65 for this post:

    agepilar (12-27-2010)

  • #5
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    jeeeeha unbelievable it works!! thank you so much!! you made my day

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •