[jQuery] Re: controlling li-items with unique IDs and trigger corresponding DIVs

[Sean Ronan (Activepixels)]

Thanks Jannik, that's got me in the right direction.

I now need to allow the mouse to move from the li to the div without it
disappearing (the div is css positioned to the right of the li) and then
keep the div shown whilst over the div, only hiding the div when we move off
the div or onto a different li. 

I've just tried a short timeout delay in the second hover function call
param to give me time to reach the div, but it is hiding after the delay,
event when still on the hover?

I'm trying this

$(document).ready(function() {
        $('#fly li').hover(
        function(){
                $('#' + this.id.replace('link','fly')).show();    
        },
                function(){
                setTimeout("$('div.flyoutpanel').hide()",400);
        }
        );
});
<ul id="fly">
    <li id="link1"><a href="one.htm">Lorem ipsum dolor</a></li>
    <li id="link2"><a href="two.htm">Lorem ipsum dolor</a></li>
    <li id="link3"><a href="three.htm">Lorem ipsum dolor</a></li>
    <li id="link4"><a href="four.htm">Lorem ipsum dolor</a></li>
</ul>
<div id="fly1" class="flyoutpanel">Div 1</div>
<div id="fly2" class="flyoutpanel">Div 2</div>
<div id="fly3" class="flyoutpanel">Div 3</div>
<div id="fly4" class="flyoutpanel">Div 4</div>

Thanks again for your reply.

Regards
Sean
sean ronan
activepixels
office :   01245 399 499
email :  [EMAIL PROTECTED]
web :    activepixels.co.uk
Activepixels is a limited company registered in England and Wales.
Registered number: 5081009.
Registered office: Suite SF8, The Heybridge Business Centre, 110 The
Causeway, Maldon, Essex, CM1 3TY.
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Jannik
Sent: 13 February 2008 08:14
To: jQuery (English)
Subject: [jQuery] Re: controlling li-items with unique IDs and trigger
corresponding DIVs


First off, Klaus Hartl's approach is very gracefull, so I'd go with a
model like that.

This incorporates his code:

$('#menu li').hover(
        function (){
                $('#' + this.id.replace('link', 'div')).show();
        },
        function (){
                $('div.page').hide();
        }
);

<ul id="menu">
    <li id="link1">Lorem ipsum dolor</li>
    <li id="link2">Lorem ipsum dolor</li>
    <li id="link3">Lorem ipsum dolor</li>
    <li id="link4">Lorem ipsum dolor</li>
</ul>
<div id="div1" class="page">Div 1</div>
<div id="div2" class="page">Div 2</div>
<div id="div3" class="page">Div 3</div>
<div id="div4" class="page">Div 4</div>

<snip>