Question

I’m doing a chat for my social network. I’m using the following code and it seems to work while showing chat, but not while hiding it. You can see it on http://live-pin.com at the right bottom corner (the “system” bar).

What am I doing bad?

function toggleChat(obj){
    current_margin = $(obj).css('marginBottom');
    if (current_margin == 0){
            $(obj).animate({marginBottom : "-270px"}).removeClass("active_box").addClass("hidden_box");
    }else{
        $(obj).animate({marginBottom : "0"}).removeClass("hidden_box").addClass("active_box");
    }
}

Also, I’m having troubles because it shows/hides both chats & I don’t want that to happen, and the “NEW MESSAGE” form doesn’t work, just in the last chat created. As an additional detail, the boxes are created dynamically with data retrieved from JSON, so I can’t use click() function or similars.

<?php echo "Thanks! (:"; ?>

Answer 1

Even though you can set the marginBottom to 0 it will internally be 0px, thus current_margin will be 0px which is not 0.
But you may try to parse the value first:

function toggleChat(obj) {
  var currentMargin = parseInt($(obj).css('margin-bottom'));
  if (currentMargin === 0) {
    $(obj).animate({ marginBottom: "-270px" })
          .removeClass("active_box")
          .addClass("hidden_box");
  } else {
    $(obj).animate({marginBottom : "0px"})
          .removeClass("hidden_box")
          .addClass("active_box");
  }
}