개발자의 끄적끄적

[javascript/jquery] jquery draggable mobile example / jquery draggable 모바일 설정 방법 jquery 를 이용해서 특정 div 가 드래그 가능하도록 설정을 하려면 draggable 라이브러리를 사용합니다. 하지만 모바일에서는 정상적으로 동작하지 않는데요, 그럴때는 jquery.ui.touch-punch.min.js 라는것을 추가로 로드시켜주어야 합니다. jquery ui 로드가 끝난 다음에 바로 아래 스크립트를 로드시켜주시면 정상적으로 동작하실 겁니다! 참고들 하세요!

[javascript/jquery] jquery draggable 라이브러리 [링크] 홈페이지를 개발하다보면 유용한 jquery 라이브러리를 활용하게 되는데요! 그중에서 자주 쓰이는 라이브러리중 하나인 draggable 라이브러리가 있습니다. 특정 영역에 있는 div 같은 태그를 화면내에서 드래그 할수 있도록 도와주는 라이브러리인데요! 아래 링크 들어가셔서 샘플 테스트도 해보시고 적용방법도 한두번 보시면 금새 적용하실 겁니다! 참고들 하세요! jquery draggable library : https://jqueryui.com/draggable/ Draggable | jQuery UI Draggable Allow elements to be moved using the mouse. Enable dragga..

[javascript/jquery] javascript scrollIntoView example / 자바스크립트 스크롤을 특정 영역으로 이동 시키는 방법 javascript 에서 현재 페이지의 특정 영역으로 스크롤을 이동시켜야 한는 경우 여러가지 방법이 있을 수 있는데요, 그중에서 대부분 브라우저나 엘리먼트들에서 동작하는 방식을 공유하려고 합니다. 바로 아래와 같이 scrollIntoView 를 이용하는 방법입니다. 아래는 기본 사용법입니다. document.getElementById('ID').scrollIntoView(); 예를들어 아래와 같이 test_div 라는 아이디를 가지는 div 태그가 있다고 가정하고, 현재 페이지의 스크롤을 위 태그로 이동 시키고 싶으면 아래와 같이 scrollIntoVi..

[javascript/jquery] javascript window.onload example / 자바스크립트 window.onload 사용법 javascript 에서 페이지가 로드된 다음에 특정 액션을 취해야 하는 경우 document.ready 를 많이 사용합니다. 하지만, 그래도 페이지가 로드가 되지 않은 상태에서 실행되는 경우가 있습니다. 그럴때는 아래와 같이 window.onload 를 사용하시면 됩니다. window.onload = function(){ // todo } 위 내용중 todo 에 하고자 하는 로직을 작성하시면 됩니다! 참고들 하세요!

[javascript/jquery] javascript indexOf example / 자바스크립트 문자열 찾는 방법 javascript 에서 문자열을 다루다 보면 특정 문자나 단어가 문자열에 포함되는지 확인을 해야하는 경우가 있습니다. 그럴때는 indexOf 를 이용하시면 됩니다. 예를들어 아래와 같이 test string 라는 문자열이 있는 str 이라는 변수가 있다고 가정하고, 그 문자열에 test 라는 문자가 포함되는지 확인하고 싶으면 아래와 같이 indexOf 를 사용하시면 됩니다. var str = "test string"; var result = str.indexOf("test"); 위에서 result 에 담긴 결과를 출력하면 아래와 같이 해당 단어의 시작 인덱스인 0이 출력됩니다! 0 만약..

[javascript/jquery] javascript pixelate library [링크] javascript 를 사용하다보면 이미지를 다뤄야 하는 경우가 종종 있습니다. 그중에서 이미지를 픽셀화 해서 흐릿하게 변경되는 이벤트를 주어야 하는 경우가 있는데요. 그럴때는 아래 나와있는 pixelate 를 사용하시면 됩니다! 아래 링크 들어가셔서 한번 보시면 바로 이해하실껍니다! 참고들 하세요! javascript pixelate library : https://github.com/miguelmota/pixelate GitHub - miguelmota/pixelate: Pixelate an image with canvas. Pixelate an image with canvas. Contribute to m..

[javascript/jquery] jquery 모션 그래픽 라이브러리 mo.js [링크] javascript 를 사용하다보면 모션그래픽에 관련된 플러그인이 필요한 경우가 있습니다! 인터렉션이 많은 페이지의 경우 요구될 가능성이 많은데요 그럴때는 jquery 플러그인중 하나인 mo.js 를 이용하시면 됩니다! 아래 링크 달아 놓을테니 들어가셔서 한번 확인해보시고 금방 적용하실 겁니다! 참고들 하세요! jquery 모션 그래픽 라이브러리 mo.js : https://github.com/mojs/mojs GitHub - mojs/mojs: The motion graphics toolbelt for the web The motion graphics toolbelt for the web. Contribute t..

[javascript/jquery] javascript facebook share example / 자바스크립트 페이스북 공유하기 스크립트 javascript 에서 게시물을 다루다 보면 컨텐츠를 sns 공유하기 위한 버튼을 구성하는 경우가 있습니다. 그중에서 facebook 공유하기 스크립트를 공유하고자 합니다. https://www.facebook.com/sharer/sharer.php?u=PAGE_URL 공유하기 버튼에 위 링크를 href 로 넣으면 페이스북 페이지가 열러 로그인 및 공유할 수 있는 화면으로 전환 됩니다. 참고들 하세요!