0

I have the following jquery which opens and close the div "shopping_cart" when hover on "shopping_button"

$('#shopping_button, .shopping_cart').on('mouseenter',function(){
  $(this).css('z-index','300');
  $(this).css('visibility','visible');
 })
$('#shopping_button, .shopping_cart').on('mouseleave',function(){
  $(this).css('z-index','189');
  $(this).css('visibility','hidden');
  $(this).css('opacity','0');
 });

Need help with what I'm trying to achieve is that "shopping_cart" remain open on mouseleave and only close on if click outside the "shopping_cart" div or can add close button inside the "shopping_cart" div to close it.

Thanks guys.

Edited

I added the following to above code

$('html').click(function () {
    $('.shopping_cart').css('visibility','hidden');
});

and it does the job, only close the window when click outside "shopping_cart" div, but now if again hover on "shopping_button" it won't open the "shopping_cart" div, on inspect element it shows

$('#shopping_button, .shopping_cart').on('mouseenter',function(){
  $(this).css('z-index','300');
  $(this).css('visibility','visible'); <---This Remain Hidden
 })

Any Suggestion?

sorted
added this into mouseenter funtion

  $('.shopping_cart').css('visibility','visible');

And vollhhaaaa....:D

Still looking for more clean solution, if anybody have....

Thanks for all the help.

Shehary
  • 9,926
  • 10
  • 42
  • 71
  • Of course `.shopping_cart` remains hidden, because you moved your mouse over `#shopping_button`, and so with `$(this)` in your function you are only setting visibility for that button, not for your shopping cart element. So rewrite your function to specifically set the visibility of the latter. – CBroe Feb 14 '15 at 21:24
  • thanks for pointing me in right direction – Shehary Feb 14 '15 at 21:31

2 Answers2

1

Try to check out this JSFiddle: http://jsfiddle.net/m8nrzL7d/2/

$('#shopping_button').mouseenter(function(){
   $("#shopping_cart").css('display','block');
})
$('#btn-close').click(function(){
   $("#shopping_cart").css('display','none');
})
$('html').click(function() {
   $("#shopping_cart").css('display','none');
});

$('#shopping_cart').click(function(event){
    event.stopPropagation();
});

I've changed a bit your code, but it's simple: I added a button, because it's quicker to be implemented; then I replaced the cart with an ID instead of a class, because in my experience I had troubles event on classes and jquery. I used display: none instead of visibility: none, because I think the cart shouldn't occupy space (or does it have to? See here)

EDIT: I also added the function to close the cart if you click outside! See here for the explaination!

I hope I helped you...

Community
  • 1
  • 1
QUB3X
  • 526
  • 4
  • 18
  • Thanks, i already sorted the problem, accepting your answer because it also provide the solution with close button. – Shehary Feb 14 '15 at 23:26
0

It is much better to use css class for formating element:

.shopping_cart {
z-index: 189;
visibility: hidden;
opacity: 0;
}
.shopping_cart_active{
z-index: 300;
visibility:visible;
}

So you add class shopping_cart_active on hover:

$('#shopping_button, .shopping_cart').on('hover',function(){
$(this).addClass('shopping_cart_active');
});

And when you want outside of it you can use this:

$(html).on('click', function(){
$('.shopping_cart.).removeClass('shopping_cart_active');
})
sirgijan
  • 9
  • 2