0

I'm very new to JavaScript let alone JQuery, Although I've been picking it up slowly I have come across a problem with a hover effect. I'm am using a plugin called lavalamp and its been giving me problems for a while regarding a multi-dimensional menu. I have tried .noLava without success so I decided to try and hide the tracking LI element once the sub UL layer was hovered (because the moment a dub layer was hovered the tracking LI would follow in unnatural places).

$(" #top_menu ul li ul").hover(function(){
        $('li.backLava').hide(300) 
    },
    function(){
        $('li.backLava').show(100) 
    }
);

This code works once I hover the sub menus, yet the problems is that when i goto another sub menu then back to the first sub menu, the tracking LI will show again. also when i hover out the sub menu to the page, it sometimes wont show back. Although trying to do this menu has been a good experience while gaining skills in JS and JQuery. Its now starting to become beyond a joke, I have skills in PHP, CSS, HTML, C# etc. Yet JS just doesn't seem like it does whats being asked sometimes..

So any help will greatly be appreciated thanks.

Karl Nicoll
  • 16,090
  • 3
  • 51
  • 65
Edhen
  • 345
  • 4
  • 15
  • 2
    A demo page would be a good addition here. The code shown here doesn't really help much! Also a link to the plugin would be useful. – Rich Bradshaw Feb 26 '11 at 21:58
  • May I suggest the wonders that are [JS Fiddle](http://jsfiddle.net/) and [JS Bin](http://jsbin.com/)? They're great for live demos, since they're collaborative and we can see the html, css and JavaScript that make up the demo. – David Thomas Feb 26 '11 at 22:06
  • Hi David , its long time .since i have seen you in stackoverflow as i was out for some time,how are you doing?? – kobe Feb 26 '11 at 22:08
  • ok thanks for the replies and i decided to upload it to my Webhost instead. You can see it in action at [link](http://www.td3network.com/example/index.php) You will find if you only select the first layer the back up it will work as it should... but after that theres no go, the main JS file is [link](http://www.td3network.com/example/templates/td3_smokey_metallic/js/template.js) and the lavalamp plugin is [link](http://plugins.jquery.com/project/lavalamp2) – Edhen Feb 26 '11 at 22:45

1 Answers1

0

The problem you're seeing resides in the JQuery selector you're using in your hover functions. When you use "li.backLava" on the "unhover" function, you're telling any list item elements with the class "backLava" to show again, which is why the tracking LI appears again when a sub-menu hides.

To get it to work as you want, we just need to refine your code to hide only the parent tracking LI element. So instead of just using "li.backLava", use something that's a bit more specific:

$("#top_menu ul li ul").hover(
    function(){

        //Find this sub-menu's parent list, and hide the tracking LI.
        $($(this).parents("ul")[0]).children("li.backLava").hide();
    },
    function(){

        //Find this sub-menu's parent list, and show the tracking LI again.
        $($(this).parents("ul")[0]).children("li.backLava").show();
    }
);

NOTE: This code isn't tested, but it should work, or work with some minor adjustment.

EDIT I've updated the code now that I've seen your demo and what you want. The updated code should do what you want.

Karl Nicoll
  • 16,090
  • 3
  • 51
  • 65
  • thanks for your reply and alot of it does make sense. Mind you i have manipulated this code left right and centre and that just happened to be whehn i decided i give up lol... I also gathered it was a selector problem, but i shall try your method soon. – Edhen Feb 26 '11 at 22:54
  • actually after looking at your code more and trying your bottom method it just occured to me that the plug-in is actually creating a li.backlava element in the first UL layer and not the subs (if that makes sense) wat that li element does is tracks the hover of a menu item then follows it. [link](http://www.td3network.com/example/index.php) check that as seeing it might be better than trying to explain it... the problem lies once the user hovers over a sub menu.. where that li element started to display in wierd places in the window – Edhen Feb 26 '11 at 23:00
  • Yeah I see what you mean. I'll look into it and see if I can update my answer again. – Karl Nicoll Feb 26 '11 at 23:08
  • Wow finally.. thanks alot! thats the type of Javascripting that i need to get my head around, although it works there is only a tiny hiccup when i go back from sub the main layer where the tracker will just pop up not under the menu item... but that is tolerable and im happy with the out come... Thanks Again – Edhen Feb 26 '11 at 23:14
  • after still playing with it, it still feels a bit sloppy when i quickly hover it or mouseout on a sub menu. sometimes the tracker wont appear again... EDIT: could tere be a function to say like... If nothing in the menu class is hovered to revert back to normal? like a backup function – Edhen Feb 26 '11 at 23:24
  • Try removing the "300" and "100" from the show and hide functions. That way the tracking LI will go away instantly. – Karl Nicoll Feb 26 '11 at 23:28
  • Tried that but i dont think tats the problem. I "think" it has something to do with the 3rd menu layer... if you go back to that link then hover joomla license >> more about joomla >> FAQ then just move the mouse straight down away from the menu without hovering the parent.. it just disappears completely and doesnt return.. This i wat i mean it keeps doing my head in, kinda wishing i didn't experiment with Javascript sometimes lol – Edhen Feb 26 '11 at 23:38
  • I've updated my code again, the tracker should always return now. I shouldn't have included the "parent()" function in the code. – Karl Nicoll Feb 26 '11 at 23:40
  • Actually its working fine now after changing both hide and show to () with no speed. Kinda disappointing that this little adjustment has alot off impact in result. – Edhen Feb 26 '11 at 23:52
  • Glad it's working OK. I've had a look at the "hiccup", and I think that might be something unrelated to what we did here, since even if I remove our code, it still breaks. The "sluggishness" that you mention is because when a JQuery animation runs, it has to run to completion (i.e. if you move your cursor off a menu item, the animation of showing the menu still has to finish before it hides again). Unfortunately there's not a lot you can do about that, and the only way to avoid that problem is to speed up the fade effect. – Karl Nicoll Feb 26 '11 at 23:57
  • yh and i think some sacrifices is worth functionality in the end. but I must say thanks for pointing me in the right direction, without your solutions i would off gave up. Now to find my next experimental project for JQuery to do my head in more lol. These practice's better pay off lol... – Edhen Feb 27 '11 at 00:03