0

SCENARIO: Have 2 links inside a list of ul, li: MY INFO and LOG IN One link must show a box (with fadeIn animation ) with a form inside when used HOVER on the link. Other link shows a button inside a box (with fadeIn animation) when you HOVER on the link.

The form must fadeOut when user MOUSEOUT of the link "LOG IN" OR mouseout of the form. The box with button, must fadeOut when user MOUSEOUT of the link "MY INFO" OR mouseout the box.

PROBLEM (same for both): The form disapears when MOUSEOUT link MY INFO. The button inside the div disapears when MOUSEOUT link LOG IN.

NOTE: 1/The form MUST BE VISIBLE WHEN MOUSE IS ON THE LINK OR ON THE FORM 2/The box with button MUST BE VISIBLE WHEN MOUSE IS ON THE LINK OR ON BOX with button

REFERENCE: check www.conforama.fr on the very-top of the screen, link is "Compte" with an icon, it has a class: "with-hover-menu" . When you mouseover it, the form appears. When you mouseout the link OR the form, the form disapears. I need the same but with fadeIn.

Right now you can look at the code below in this jsfiddle: http://jsfiddle.net/75HYL/19/ but it doesnt work at all. I don't know how to achieve this. Would like to understand and learn...!!

<ul class="links">
    <li class="classA"><a><span>My info</span></a></li>
    <li class="classB"><a><span>Log in</span></a></li>
</ul>

<div id="userInfo">USER MUST BE ABLE TO CLICK THE BUTTON BELOW, SO THIS BOX MUST STAY VISIBLE<br/>
    <input type ="button" value="OKAY"/>
    <div id="login" >
        <div class="form">
            <form>
                <input type="textfield" value="enter your email"></input>
                <input type="checkbox"><option>remember me? </option><input>
                <input type="button" value="Click me"/>
            </form>
        </div>
    </div>
</div>
<style>
    .links li { display:inline-block;cursor:pointer; }
    .links li { padding:0 4px 0 1px; }
    .links li.classA {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;}
    .links li.classB {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;}
    .links li.classA span {}
    .links li.classB span {}
    .links li.classA:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;}
    .links li.classB:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;}
    .links li.classA a {color:#fff;text-transform:uppercase;background:#00aaff;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;}
    .links li.classB a {color:#00aaff;text-transform:uppercase;background:orange;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;}
    #login {display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;}
    #userInfo{display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;}
</style>

<script>
    $("li.classA").hover(function() {
        $("#userInfo").fadeIn('fast').css('display', 'block');
    });
    $("#login, .classA").mouseleave(function() {
        $("#userInfo").fadeOut('fast').css('display', 'none');
    });

    $("li.classB").hover(function() {
        $("#login").fadeIn('fast').css('display', 'block');
    });
    $("#login, .classA").mouseleave(function() {
        $("#login").fadeOut('fast').css('display', 'none');
    });
</script>
Filburt
  • 17,626
  • 12
  • 64
  • 115
mlclm
  • 725
  • 6
  • 16
  • 38

5 Answers5

1

A bit like this? Cleaned up a few syntax errors and change logic a bit

AbstractChaos
  • 4,211
  • 1
  • 19
  • 28
  • nice, but I see 2 errors here: 1) if you move mouse from MY INFO, then to the right on LOG IN, the 2 boxes show up one below the other. 2) if you mouseover "LOG IN" box shows okay, then you move your mouse out the link "LOG IN", box is still here. It should fadeOut. – mlclm Jun 11 '12 at 11:55
1

This is what you want?

http://jsfiddle.net/WcUFe/3/

I've only altered the js, to be easier to see the differences. For an easier life the cssand/or html should be altered, and all the code could be put in a separate plugin, that will control the whole show.

Basically i use a timer to allow the user ~100ms to move the mouse from the LI element to the displayed container.... all the rest is cruft to maintain the state and to make sure we never have the 2 containers visible at any moment.

Quamis
  • 10,924
  • 12
  • 50
  • 66
  • Nice thanks I never thought of the 100ms trick, that is ALMOST it , but in your script, if user leaves the link "LOG IN" or "MY INFO", the box stays visible. For example mouse on "MY INFO" box shows, then move mouse to the right, box is still there. it should fadeOut , just like when mouse leaves the box. – mlclm Jun 11 '12 at 11:53
  • http://jsfiddle.net/WcUFe/2/ the mouseLeave events were attached to the wrong elements:) they should be attached to the LI elements, and to the containers...:) i copy/pasted and attached twice to the container, and once to the LI.. – Quamis Jun 11 '12 at 12:24
  • This seem to do the trick. Thanks! Will look and study your code. Thank you for help :) – mlclm Jun 11 '12 at 12:38
  • hmm it's almost perfect, but there is a strange behavior when you move mouse from link MY INFO directly to link LOG IN...Or from link LOG in to MY INFO : the box fadeIn and immediately fadeOut. Do you know how to solve this? – mlclm Jun 11 '12 at 13:30
  • YES perfect. Thanks Quamis this is so helpful ! Now I know. – mlclm Jun 11 '12 at 15:09
0

Well your problem is that the mouse currently HAS to leave your links to get to the boxes. Therefore the boxes MUST dissapear for the functionality to work as you have stated above.

A few solutions come to mind (I'm not great with jQuery so there might be better options); 1 is to add a bool and some logic to say if the box has opened and then only listen for mouseout events on the box (rather than the link and the box). And another is to debounce the events so that there's a bit of a time delay before you listen for the mouseout event of the link.

  • looks like @AbstractChaos has cleared this up now, as I suspected there is a better option to my suggestions!

Hope this helps.

james lewis
  • 2,486
  • 3
  • 24
  • 30
0

or 

$("li.classA").hover(function() {
    $("#login").css('display', 'none');
    $("#userInfo").fadeIn('fast');
});
$("#userInfo").mouseleave(function() {
    $("#userInfo").fadeOut('fast');
});


$("li.classB").hover(function() {
    $("#userInfo").css('display', 'none');
    $("#login").fadeIn('fast');
});
$("#login").mouseleave(function() {
    $("#login").fadeOut('fast');
});
Alex Ball
  • 4,404
  • 2
  • 17
  • 23
0

Try this: http://jsfiddle.net/QR49h/

I moved the divs to be hidden/shown to inside the <li> elements:

<ul class="links">
    <li class="classA"><a><span>My info</span></a>
        <div id="userInfo">USER MUST BE ABLE TO CLICK THE BUTTON BELOW, SO THIS BOX MUST STAY VISIBLE
            <br/>
            <input type="button" value="OKAY" />
        </div>
    </li>
    <li class="classB"><a><span>Log in</span></a>
        <div id="login">
            <div class="form">
                <form>
                    <input type="textfield" value="enter your email" />
                    <input type="checkbox" />
                    <option>remember me?</option>
                        <input />
                    <input type="button" value="Click me" />
                </form>
            </div>
        </div>
    </li>
</ul>

I also fixed a bug in the js (ClassA vs ClassB) and fiddled the css slightly so the second <li> item can keep it's position when the first is expanded. Oh and fixed some element closing issues in the form div.

Starscream1984
  • 3,072
  • 1
  • 19
  • 27