Alert when div height changes

Question

Hey everyone,

I've been searching all day for this but i can't figure it out myself..

I have a shopping cart that you can add items to. The shoppin cart is in a drop down so you have to click it in order to view it. Therefore, everytime you add an item to the cart i want to display "+1", "+2" and so on, somewhere and when u click on the drop down it would disappear so it can start over counting. So, i thought that when the div's height changes it could display +1.

But, i don't know enough javascript to do this....

My html:

    <div id="button">Button</div>

    <div id="chartdropupcontainer">
   <div id="chart">
  <button>test</button>
  <script type="text/javascript">
  $("button").click(function () {
    $("#testp").hide();
  });    

  $("#chart").bind("resize", function(){ 
   alert("test"); 
  });


  </script>



    <p id="testp"></p>
 </div>
</div>

My Css:

* {
 padding: 0;
 margin: 0;
 font-family: Helvetica;
 color: white;
}

#chartdropupcontainer {
 width: 200px;
 background-color: red;
 position: fixed;
 bottom: 0;
 right: 0;
 margin-right: 20px;
 padding: 0 5px 0 5px;
 margin-bottom: 47px;
 z-index: 998;
}
#chartdropupcontainer h1 {
 margin: 5px;
 color: black;
 cursor: pointer;
}
#chart {
 width: 100%;
 background-color: black;
 height: 400px;
 overflow: auto;

}
#button {
 background-color: blue;
 cursor: pointer;
 padding: 10px;
 width: 190px;
 position: fixed;
 bottom: 0;
 right: 0;
 margin-right: 20px;
 z-index: 999;
}

My javascript:

$(document).ready(function() {
    $("#button").click(function () {
      $("#chartdropupcontainer").slideToggle("slow");
    });
});

And here is a link to an online version: http://www.rutgerinc.nl/niels/

Edit: sorry, bit inpolite! Could anyone please help me with this?

Answer 1

First off, the resize event is when you resize a window so that's why your event is never firing. http://api.jquery.com/resize/

I think you need to alter the bit of code where the item gets added to the basket. Isn't there more javascript somewhere to add things to the basket in the first place?

An event-driven approach like BGerrissen suggests would be perfect because you can fire one or more independent functions when the user adds something to the cart.

As you are using jQuery, custom events are quite easy. You use trigger to fire the event and then bind to listen for it. http://api.jquery.com/trigger/