TextArea 자동 크기 맞춤 & 이미지 사이즈 맞추기와 클릭시 원본 사이즈 보여주기

2009. 9. 13. 21:55

TextArea 자동 크기 맞춤 & 이미지 사이즈 맞추기와 클릭시 원본 사이즈 보여주기

2009. 9. 13. 21:55 in 3. Implementation/VB / Java Script

아래는 샘플 파일

<html>
<head>
  <style type="text/css">
   .NoScroll {
     overflow:hidden;
     }
  </style>
  <script type="text/javascript" language="javascript">
  //<!--
    //////////////////////////////////////////////////////////
      // TextArea 조정학.
    var KEYCODE_BACKSPACE = 8;
    var KEYCODE_DELETE = 46;
    var KEYCODE_ENTER = 13;

    function onFitSizeOfTextArea()
      {
          var textArea = event.srcElement;

          while( textArea.clientHeight > textArea.scrollHeight )
          {
              textArea.rows = textArea.rows - 1;
          }
          while( textArea.clientHeight < textArea.scrollHeight )
          {
              textArea.rows = textArea.rows + 1;
          }

          textArea.className = "NoScroll";
      }

      //////////////////////////////////////////////////////////
      // 이미지 조정하기
    var w, h;
    var max_w = 250; //창의 가로크기, 이미지의 최대 크기가 된다.
    img_src = "download.jpg" //이미지의 주소, img1의 src속성과 같아야 한다.

    function img_resize()
    {
     var i = eval(document.all.img1);
     w = i.width;
     h = i.height;
     if(w > max_w)
     {
      i.width = max_w;
     }
    }

    function resize_popup()
    {
     w_dummy = w + 20; //스크롤바를 위해서 팝업창의 가로길이를 20픽셀 추가한다.
     with( window.open("","madi_image",'height='+h+',width='+w_dummy+',scrollbars=yes,resizable=yes') )
     {
      document.write("<body topmargin=0 rightmargin=0 bottommargin=0 leftmargin=0>","<a href='#' alt='클릭하시면 창이 닫힙니다.'><img src='"+img_src+"' hspace=0 vspace=0 border=0 onclick='window.close();'></a>","</body>");
      focus();
     }
    }
  //-->
  </script>
</head>
<body>
  <textarea cols="50" rows="3" onchange="onFitSizeOfTextArea();" onkeydown="onFitSizeOfTextArea();" >Some long text…</textarea>
  <p />
  <INPUT TYPE="image" SRC="download.jpg" name="img1" onload="img_resize();" onclick="resize_popup();">
</body>
</html>