CodeOneOnOne
CodeOneOnOne

Reputation: 347

Lava lamp get current target tag id to change color

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

Answers (1)

CodeOneOnOne
CodeOneOnOne

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

Related Questions