...

View Full Version : jQuery lavalamp with pages and category menu (wp 3.03)



agepilar
12-15-2010, 07:38 PM
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.
<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.
<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.
<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:

(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
12-16-2010, 09:54 AM
Can you give a link to your page - it'd be easier to see the problem.

agepilar
12-26-2010, 10:37 PM
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
12-27-2010, 02:02 PM
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
12-27-2010, 09:09 PM
jeeeeha unbelievable it works!! thank you so much!! you made my day ;)

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum