'Lecture/Web Programing'에 해당되는 글 15건

http://apycom.com/
http://www.queness.com/tutorials
http://openex.co.kr/bbs/board.php?bo_table=jqueryPDS&sca=%EB%A9%94%EB%89%B4&page=6

<Script language="JavaScript">
 function memoheight(){
  if (event.keyCode == 13){
   var etcmemo = $("#memo").val();
   var em_index = etcmemo.split('\n');
   var etcmemo_row = (em_index.length * 1) +1;
   memo_l_height = (18 * (etcmemo_row * 1)) + 4;
   memo_r_height = ((memo_l_height * 1) + 4);
   memo_height = (18 * (etcmemo_row * 1));

   $("#etc_memo").attr('style', 'height:'+memo_height+'px;width:95%;border:1px solid #D4DBE4;');
  }

  if (event.keyCode == 8 || event.keyCode == 46){
   var etcmemo = $("#etc_memo").val();
   var em_index = etcmemo.split('\n');
   var etcmemo_row = (em_index.length * 1);
   if (etcmemo_row > 0){
    memo_l_height = (18 * (etcmemo_row * 1)) + 4;
    memo_r_height = ((memo_l_height * 1) + 4);
    memo_height = (18 * (etcmemo_row * 1));

    $("#etc_memo").attr('style', 'height:'+memo_height+'px;width:95%;border:1px solid #D4DBE4;');
   }
  }
 }

</script>

<textarea name="memo" id="memo" style="width:95%;height:20px;border:1px solid #D4DBE4;" onKeyDown="javascript:memoheight();"><%=etc_memo%></textarea>

딱 2줄만 바꾼 업그레이드 버전

<Script language="JavaScript">
 function memoheight(){
  if (event.keyCode == 13){
   var etcmemo = $("#memo").val();
   var em_index = etcmemo.split('\n');
   var etcmemo_row = (em_index.length * 1) +1;
   memo_l_height = (18 * (etcmemo_row * 1)) + 4
   memo_r_height = ((memo_l_height * 1) + 4)
   memo_height = (18 * (etcmemo_row * 1))

   $("#etc_memo").attr('style', 'height:'+memo_height+'px;width:95%;border:1px solid #D4DBE4;');
  }

  if (event.keyCode == 8){
   var etcmemo = $("#etc_memo").val();
   var em_index = etcmemo.split('\n');
   var etcmemo_row = (em_index.length * 1) - 1;
   if (etcmemo_row > 0){
    memo_l_height = (18 * (etcmemo_row * 1)) + 4
    memo_r_height = ((memo_l_height * 1) + 4)
    memo_height = (18 * (etcmemo_row * 1))

    $("#etc_memo").attr('style', 'height:'+memo_height+'px;width:95%;border:1px solid #D4DBE4;');
   }
  }
 }

</script>

<textarea name="memo" id="memo" style="width:95%;height:20px;border:1px solid #D4DBE4;" onKeyDown="javascript:memoheight();"><%=etc_memo%></textarea>

우슨 맨 밑의 textarea 소스를 보시면

onKeyDown에 javascript:memoheight();는 키보드에서 키를 눌렀다 땟을 때 저 스크립트로 가라는 부분입니다.

이제 맨 위의 소스에서 function memoheight()로 들어갔을 테고...

  if (event.keyCode == 13){               < == 이 부분은 엔터키를 의미합니다.

즉, 엔터키를 눌렀다 때면 이 if문을 실행하라는 것입니다.

  if (event.keyCode == 8){                < == 이 부분은 백스페이스를 의미합니다.

즉, 백스페이스를 눌렀다 때면 이 if문을 실행하라는 것입니다.

if문 안에 잇는 내용은 뭐 그냥 단순 계산일 뿐이고

    $("#etc_memo").attr('style', 'height:'+memo_height+'px;width:95%;border:1px solid #D4DBE4;');

위의 소스 부분은 jquery로 style의 내용을 바꾸는 것입니다. 결정적으로 height를 늘려주는 부분입니다.

* 이 소스의 문제점.. 글을 지울 때 백스페이스로 지웠다가는 엄청나게 한줄로 바뀝니다.ㅋㅋㅋㅋ

대신에 글의 끝에서 백스페이스나 엔터키를 누르면 다시 정상적으로 돌아옵니다.ㅋㅋㅋ

한글 표현에 대표적으로 2가지 정도 있습니다. euc-kr, UTF-8

그럼 홈페이지 작업 할 때 어떻게 해야 한글이 안깨지고 보기 좋아질까요???

저는 홈페이지 작업할 때 DB작업이랑 홈페이지 웹페이지 만들때는 보통 UTF-8로 설정을하고

스크립트, 글을 뿌려줄때는 euc-kr을 사용합니다.

euc-kr :

 Session.CodePage  = 949
 Response.CharSet  = "euc-kr"
 Response.AddHeader "Pragma","no-cache"
 Response.AddHeader "cache-control", "no-staff"
 Response.Expires  = -1

UTF-8 : 

 Session.CodePage  = 65001
 Response.CharSet  = "UTF-8"

이렇게 해도 가끔 깨지지만 진짜 확실한 방법은 없는 것 같아요...

그냥 하나로 통일 시켜버리면 차암~~ 좋을텐데요...

익스플로러 11로 업그레이드를 하면 위와 같이 사진 첨부하는 하는 폼 자체가 바뀐다. 가끔 익스플로러 11로 업그레이드를 하고 사진 첨부가 안되는 경우가 있는데 해결 방법을 알아보자.

두번째 사진처럼 만들기 위해서 일단 사진 첨부하는 폼으로 가보면

파일명 : photo_Quick_UploadPopup.html

설명을 드리겠습니다.

첫번째 표시 : 이 부분이 사진 첨부하기 부분이라는 확실한 증거입니다. ( 무슨 영화 대사같네.ㅋㅋㅋ)

두번째 표시 : 결론을 먼저 말하자면 이 부분이 익스플로러 11미만 버전에서 나오는 곳이구요.

세번째 표시 : 이 부분이 익스플로러 11버전에서 나오는 곳입니다.

아주 재밌는 사실은 사진 첨부하기 부분에서 F5를 겁나 누르면 익스플로러 11미만 버전에서 나오는 폼이 잠깐 아주 잠깐동안 보이는 것을 알수 있습니다.

그럼 익스플로러 11 사용자는 두번째 부분은 쌩까고 세번째 부분으로 간다는 얘기인데

아주 간단하게 세번째 표시 부분 div를 삭제 해봤는데요... 그렇다고 두번째 표시 된 부분이 나오지는 않는 걸로 봐서

자바스크립트로 지정된 무언가가 있다는 것을 알 수 있죠..

이제 자바스크립트로 지정된 무언가... 이놈을 찾아서 강제로 pop_content2가 나오게 해버리면 되겠죠.ㅋㅋㅋ

네이버의 이 많은 js파일들을 언제 보고 있나... 하는 순간 문뜩 떠오른 방법..

pop_content를 검색하는 걸로 5초에 한개의 js파일을 보면 1분안에 끝나겠군...

파일명 : QuickPhotoPopup.js ( 같은 폴더 안에 있습니다.)

js파일에 들어가자마자 찾기로 "pop_content" 요놈을 검색하면

위 사진과 같은 부분으로 가시게 됩니다.

hide, show만 보면 뭔지 느낌이 빡 오시죠?ㅋ 그래도 설명을 드리자면 첫번째 표시부분은 if문으로 bSupportDragAndDropAPI 요놈이 true이면....(아마도 blooean 형일듯 합니다.) pop_container2를 감추고 pop_container를 보이라고 되어있고 두번째 표시부분은 bSupportDragAndDropAPI 요놈이 false이면.... pop_container2를 보이고 pop_container를 감추라고 되어있네요...

저희가 할일은 3번째 사진을 보시면 pop_container2를 보이고 pop_container를 감춰야 하니까 bSupportDragAndDropAPI 요놈을 false로 만들어 주기만 하면 끝나부러~~ㅋ.ㅋ

다시 검색으로 bSupportDragAndDropAPI 요놈을 검색해 보시면

위와 같은 거의 맨 위로 올라가게 되는데요. 첫번째 표시는 동그라미가 이상하게 생겼지만...

var bSupportDragAndDropAPI = false; << 선언입니다. 그냥 알아두시면 좋을 것 같아서요.ㅋ false로 선언했네요.ㅋ

두번째 표시를 보시면 여기부터 집중!!!! File API 지원 여부로 결정 << 여기가 KeyPoint입니다.ㅋ

세번째 표시를 보시면.. 전 이미 수정한 사진을 올렸는데요.

47번째 줄이 true로 가게 하는 부분이니 주석처리 해주고 그렇다고 아무것도 안해주면 오류 나겠죠?ㅋㅋ

true밑에 이리로 와도 false를 주라고 넣고 네이버 에디터에서 사진첨부를 클릭하면 2번째 사진과 같이 나옵니다.

홈페이지 작업하느라 확 빨리 만들고 싶지만 눈치도 보이고.ㅋ 글 쓰는데만 30분이나 걸려버리네요.ㅠㅠ

끝까지 읽어주신 분들께 감사하다라는 말씀을 전하며.. 다음에 좋은 내용을 찾아뵙겠습니다.ㅋㅋㅋ