Question

im trying to create a shopping cart widget. idea is that theres a box that shows how many items u have in your cart and when u click it it expands and shows detailed wiev of cart contents.

i managed to make it open nicley, but problem occures when i want to close it back. this should happen with mouseout event but i cant make it work properly.

here is the html:

<div id="cart-wrapper" class="clearfix">
  <div id="cart">
    Cart 0 item(s) <img src="images/arrow-down.png" alt="cart">
  </div>
  <div id="cart-open">
    <ul>
      <li>Morbi</li>
      <li>Praesen</li>
      <li>Phasellus</li>
      <li>Pellentesque</li>
    </ul>
  </div>
</div>

so #cart-open is the one that is hidden/shown when needed. and by default has display:none applied

heres js:

$(function() {
   $('#cart').live('click', function(event) {
        $('#cart-open').css('display', 'block');
        $(this).css('border-bottom', 'none');
    });

   $('#cart-wrapper').live('mouseout', function (event) {
       $('#cart-open').css('display', 'none');
       $('#cart').css('border-bottom', '1px solid  #F0F0F0');
   })
});

so the problem is that when i click on the #cart box it opens nicely and shows #cart-open, but when i move mouse the mouseout event is triggered on the old size of #cart-wrapper which was the begging size of the #cart. is it possible to re validate the size of the wrapper after it size has been changed by its child?
Or maybe there is another way to accomplish the job. the idea is simple: hide that #cart open when i move mouse out of either #cart or #cart-open.

Answer 1

Have you tried “mouseleave” instead?

Try this:

$(function() {
    $("#cart-open").hide();
    $("#cart").live("click", function() {
        $("#cart-open").show();
        $(this).css("border-bottom", "none");
    });

    $("#cart-wrapper").live("mouseleave", function() {
        $("#cart-open").hide();
        $("#cart").css("border-bottom", "1px solid #F0F0F0");
    })
});

I have tested this only on FireFox, but it worked. I have also added an example here if you want to play http://jsfiddle.net/cWRWD/2/

Hope that helps.