Reputation: 347
Am using http://nixbox.com/projects/jquery-lavalamp/demos/original.html lava lamp plugin.
I am trying to change color of my menu item Only when lavalamp effect is affecting it. NOT when selected or NOT css hover. This plugin has a callback function hoverFinish and has a startItem property seen at http://nixbox.com/projects/jquery-lavalamp/demos/urltest/ . I want to use this to pick current higlighted item's id only when lalavalamp finish on it.
Here is a sample with comment on where i want to capture this.
jQuery(window).load(function() {
$('header ul#mainmenu').lavaLamp({
hoverFinish: function() {
//Get current highlighted target tag
}
});
});
Am doing this because, it happened that my hover or selectedlava text color is same as menu background, so when the hover leaves the menu item, its text looks like the background so it "disappears" .
Upvotes: 0
Views: 57
Reputation: 347
I had to come up with a way to do this outside the plugin utilities:
jQuery(window).load(function() {
$('header ul#mainmenu').lavaLamp(); //enable lavalamp plugin on the selected tag
var selectedLava = $('ul#mainmenu li.selectedLava').index();// Get the current lavalamp highlighted element index
//Always have the index of the lavalamp highlighted element
$('ul#mainmenu li a').click( function(){
selectedLava = $(this).parent().index();
});
//Change selectedLava class as desired on hover
$('ul#mainmenu li').hover(
function(){
$('ul#mainmenu li.selectedLava').removeClass('selectedLava');
},
function(){
$("ul#mainmenu li").eq(selectedLava).addClass('selectedLava');
}
);
});
Ths will give you the opportunity to change color as desired on each "lavalamped" element... :) hope this helps someone...
Upvotes: 0