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.

Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

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 <a> buttom is inside of the div#shopping-cart
@estorde - I'm still not 100% clear, take a look at this: jsfiddle.net/nick_craver/68gYU/1 is that what you mean?
@Nick: it's not the thing I'd need. I'll try to explain it again. Take a look now at: 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 <a> 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 <a.cart-buttom> or anywhere in the background (except over #shopping-cart) the elements recover the original position and state.
@estorde - Try this: jsfiddle.net/nick_craver/68gYU/20 ...is that getting closer?
we are getting close: take a look: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. :)
|
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(); })
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.