2

I have the next jquery code:

    <script>
    $(document).ready(function() {
        // hides the slickbox as soon as the DOM is ready
        // (a little sooner than page load)
      $('#hidden').hide();

    });

    //<![CDATA[
    function ShowHide(){
        $('#hidden').fadeIn();
        $("#shopping-cart").animate({"height": "toggle"}, { duration: 550 });
    }
    //]]>

    </script>

I use the div#hidden to get a dark background over it (kind of lightbox background) and I'm showing the #shopping-cart div including some elements like table, input, etc. after make a click at a A.cart-buttom

<a href="#" title="" onClick="ShowHide(); return false;" class="cart-buttom">Cart</a>

After the user make a click at the A button, to show the cart, the div#hidden is showed. I'd like to know would I make if the user click outside of the div#shopping-cart or in the A link again the div#hidden is fadeOut.

Now after make a click at the A link start the animation of the div#shopping-cart but the div#hidden doesn't dissapear.

Any help is appreciated.

estorde
  • 35
  • 1
  • 2
  • 5

2 Answers2

6

First, let's remove that click handler from being inline, so your link becomes this:

<a href="#" class="cart-buttom">Cart</a>

Then your jQuery looks like this:

$(function() {
  $('#hidden').hide().click(function(e) {
    e.stopPropagation();
  });      
  $("a.cart-buttom").click(function(e) {
    $('#hidden').animate({ opacity: "toggle" });
    $("#shopping-cart").animate({"height": "toggle"}, { duration: 550 });
    e.stopPropagation();
  });
  $(document).click(function() {
    $('#hidden').fadeOut();
  });
});

You can give it a try here

What we're doing here is taking advantage of event bubbling, using event.stopPropagation() if a click comes from the <a> or #hidden, the event doesn't go anywhere (doesn't bubble up to document, as it normally would). If a click from anywhere else gets to document then it does a .fadeOut() on the element, the same goes for clicking on the "Cart" link again.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • that's a great solution but maybe I didnt explain in a good way the case. Now when the #shopping-cart is "open" and the #hidden div appear.. if you click anywhere over #shopping-cart the #hidden div makes the fadeOut and the #shopping-cart doesnt move. But I want when the user click anywhere except #shopping-cart start both of the events. By the way, the buttom is inside of the div#shopping-cart – estorde Aug 03 '10 at 10:29
  • @estorde - I'm still not 100% clear, take a look at this: http://jsfiddle.net/nick_craver/68gYU/1/ is that what you mean? – Nick Craver Aug 03 '10 at 10:40
  • @Nick: it's not the thing I'd need. I'll try to explain it again. Take a look now at: http://jsfiddle.net/68gYU/19/ At the begging the #shopping cart should appear hidden on the top of the page. Then, when you make a click at a.cart-buttom the #shopping-cart move down, the keep at the same relative position at his "father" #shopping cart and at the same time the div#hidden appears under this. Then when if the user makes a click at the or anywhere in the background (except over #shopping-cart) the elements recover the original position and state. – estorde Aug 03 '10 at 11:46
  • @estorde - Try this: http://jsfiddle.net/nick_craver/68gYU/20/ ...is that getting closer? – Nick Craver Aug 03 '10 at 12:03
  • we are getting close: take a look:http://jsfiddle.net/68gYU/37/ click somewhere except "cart" link or over div#shopping cart. The div and the link will move up. This one should be the initial position. Now if you click at the "Cart" link, the div#shopping cart, with the "cart" link come down and appear the div#hidden. This is the action that should be start any time the user click at the "Cart" buttom. Once the div#hidden is showed and the div#shopping cart and the "Cart" link is down, any click at the "Cart" link or anywhere except div#shopping cart should restart the initial position. :) – estorde Aug 03 '10 at 13:25
  • It's almost perfect. Once you click at the "Cart" link the action is perfect, and the action to come to the initial state is perfect if you click anywhere except div#shopping-cart... but (always there is a but, sorry) I'd like when the user also click at the "Cart" link the action works... I know this link is include inside the #shopping-cart, but if in that step doesnt work seems like a bug... do you have an email? I could send you the file and maybe you could check the action directly. – estorde Aug 03 '10 at 13:57
  • do you guess you could take a last look a your code?? in any case.. thank you so much – estorde Aug 04 '10 at 13:47
2

If you want to toggle fading on click of the link, you can use toggle(),

$("a.cart-buttom").toggle(function(){
  $('#hidden').fadeIn(); 
}, function() {
  $('#hidden').fadeOut(); 
})
Marimuthu Madasamy
  • 13,126
  • 4
  • 30
  • 52