Question

Here is my code.
Everything works ok, so if I click outside of the textbox it goes back to the default size, but if I click on the submit button it goes back to the normal size too and doesn’t submit the datas. Can someone help me to fix that?

Answer 1

first your code not work because on blur function will fire before click event on button
so i change into this

HTML

<form method="post" action="" onsubmit="return false;">
  <div id="vsetko">
      <textarea  id="scontent"></textarea>
      <div id="sbutton_block" style="display:none;">
          <input type="submit" id="sbutton" value=" Share " />
      </div>
  </div>
</form>​​​​

CSS

#scontent {
  overflow: auto;
  width:722px;
  height:30px;
  border:solid 2px #006699;
  font-size:14px;
}

#sbutton{
  background-color:#006699;
  color:#ffffff;
  font-size:13px;
  font-weight:bold;
  padding:4px;
  margin-bottom: 5px;
}

JQUERY

$(document).ready(function(){

  $("#scontent").focus(function(){
    $(this).animate({"height": "85px",}, "fast" );
    $("#sbutton_block").slideDown("fast");
    return false;
  });

  $("html").click(function(event){
    if ($(event.target).attr("id") != "scontent") {
      $("#scontent").animate({"height": "30px",}, "fast" );
      $("#sbutton_block").slideUp("fast");
      return false;
    }
  });

  $("#scontent").keypress(function(){
    var MaxLen = 250;
    return ($(this).val().length <= MaxLen);
  });

  $("#sbutton").click(function(){
    // do your stuff
    return false;
  });

});

so whole html click event will replace focus event, then you can do save data
I’ve test on my laptop it’s working fine

edit :
i was modify html click function to check what element to skip