Dynamic height in 'cart'

Question

Dynamic height in 'cart'

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have a div that serves as a product cart, it stays fixed at the top of the screen where only subtotal of all the chosen products appears and clicking on div , it does a slide down and show all products.

I made the effect of slide with animation in css , and I leave div fixed on top with negative top, according to the size of the div, for example, top: -370px . >

The problem is that the size of div is dynamic, increases as products are added, so even with the negative top, the div does not 'hide' all products. I have tried to go changing the top property as the add product buttons are clicked, which works fine, however I do not know how to change the top of the animation that makes it go down and up the div.

Does anyone know if you can change this property or if there is a better way to do this?

To make it easier to understand: link

javascript jquery

asked by anonymous 02.10.2017 / 15:53

2 answers

1

Would not you rather rethink your logic to get easier? So the code is doing a lot of unnecessary calculation, see an example:

Create a div to encompass the products and the subtotal and add the css to be at the top, the html structure will look like this:

<div class="engloba-tudo">

   <div class="produtos">
     // Sua lista de produtos
   </div>
   <div class="subtotal ">
     // Subtotal dos produtos
   </div>

</div>

Now you just have to leave your div products with display:none; and as I saw you are using Jquery you can use the slideToggle() function that already saves a lot of code to show the products:

$(".subtotal").click(function() {
   $(".produtos").slideToggle(300);
})

Example in JSFiddle . But it's just an idea, because as I also made a cart with animation I know how annoying it is to maintain or change big code, besides having a greater chance of crashes;

02.10.2017 / 17:16

jQuery error not visible when I migrate code Illegal attempt to map a non collection as a @OneToMany, @ManyToMany or @CollectionOfElements

score 0 · Accepted Answer

I did not quite understand what you meant, but I think that's what you want.

var subtotal = $('.subtotal').height();

$('.subtotal-menu').click(function(event) {
				$('.subtotal').addClass('slideDown').removeClass('slideUp');
				$('.subtotal-menu').hide();
				$('.close-subtotal').show();
});

$('.close-subtotal').click(function(event) {
				$('.subtotal').addClass('slideUp').removeClass('slideDown');
				$('.subtotal-menu').show();
				$('.close-subtotal').hide();
});

$('button').click(function() {
			$('.produtos').append('<p>Produto X</p><hr>');
      subtotal = $('.subtotal').height();
      $('.subtotal').css('top', '-'+subtotal+'px')
      alert(subtotal)
});

.subtotal {
  position: relative;
  width: 200px;
  top: -170px;
  margin: 0 auto;
}

span {
  position: absolute;
  top: 0;
}

@keyframes slideDown {
  
  to {
    top: 0;
  }
}

.slideDown {
    animation-name: slideDown;
    animation-duration: .5s;
    animation-fill-mode: both;
}

@keyframes slideUp {
  from {
    top: 0;
  }
  
}

.slideUp {
    animation-name: slideUp;
    animation-duration: .5s;
    nimation-fill-mode: both;
}

<script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous"></script>

<div class="subtotal">
  <div class="produtos">
    <p>Produto 1</p>
    <hr>
    <p>Produto 2</p>
    <hr>
    <p>Produto 3</p>
  </div>
    <hr>
    <p>Subtotal: x</p>
  
 
</div>
 <span class="subtotal-menu" style="cursor: pointer;">O</span>
 <span class="close-subtotal" style="display: none; cursor: pointer;">X</span>
 
 <button>add Produto</button>