[JS] Clipboard.js 를 이용하여 클립보드 복사 후 툴팁 표시하기

input 이나 textarea 의 내용을 클립보드로 복사하기 위해 clipboard.js 를 사용한다. 기본 clipboard.js 의 기능에 복사 후 Copied 라는 툴팁이 표시되도록 수정했다. 코드는 아래와 같다. Clipboard 데모 : http://demo.codepub.net/clipboard.html <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>Clipboard Demo</title> <link rel=”stylesheet” href=”./css/clipboard.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.0/clipboard.min.js”></script> <script src=”./js/clipboard.tooltip.js”></script> </head> <body> <div> <input type=”text” value=”http://www.google.com” id=”copy_text”> <button class=”copy”>COPY</button> </div> […]

Read More

워드프레스에 키보드 단축키 적용하기

키보드 단축키? 그건 또 뭐냐?? 이렇게 생각할 수도 있습니다. 굳이 필요는 없는데 있으면 편한 것이라고 해야할까요? 티스토리를 사용할 때 관리자에 접속하기 위해서는 키보드의 Q 키를 누르면 됐습니다. 그 편한 것을 잊을 수가 없어서 결국 또 오늘.. 지금 이 시간에 또 삽질을 하고 있습니다. ㅋ 삽질이라기 보다 티스토리의 자바스크립트 코드를 워드프레스에 사용할 수 있도록 수정해서 적용한 […]

Read More

[JS] 동적으로 요소 추가 후 해당 요소로 스크롤 이동시키기

작업을 진행하다 보면 필요한 것이 계속해서 생겨나게 마련이다. 오늘 같은 경우는 에러 메세지를 보여주기 위한 요소를 동적으로 생성하고 문서 내 위치를 해당 요소로 이동시키는 것이 필요했다. 문서 내 이동은 잘 아는 것처럼 <a name=”이름”></a> 이런 식으로 지정할 수도 있고 특정 요소에 id를 지정하고 문서 URL 끝에 #id 를 붙여서 이동시킬 수가 있다. <script> var msg_el = […]

Read More

[jQuery] 이미지 Mouse Drag 기능

글을 작성할 때 제일 고민되는 부분이 글제목을 정하는 부분이다. 제목 짓기 너무 어려워!! 헛소리는 그만하고.. 여전히 코딩 작업을 진행 중인데 게시판 같은 데서 이미지 크게 보기를 해서 팝업으로 이미지만 보여주는 창이 있을 때 팝업의 이미지를 마우스 드래그로 움직이는 기능이 필요해서 만들어봤다. <div><img src=”abc.jpb” width=”1000″ height=”700″ class=”draggable” style=”position:relative;left:0;top:0;”></div> <script> $(function() {     var is_draggable = […]

Read More

PG사 연동.. 이젠 잘 할 수 있다?

PG사 연동하는 작업을 해본 건 이번이 3번째인 것 같다. 3번정되니까 작업도 정리가 되고 생각보다 빠르게 마무리를 할 수 있게 된 것 같다. 그만큼 경험이라는 것이 중요하다는 것을 또 느끼게 된다. 그리고 그동안 작업으로 인해서 코딩 실력도 어느 정도는 늘어났기 때문이 아닐까도 싶다. 코딩에 있어 벽처럼 느껴지는 게 정규식과 자바스크립트인데.. jQuery는 이제 어느정도 익숙해진 편인데.. ^^; […]

Read More