개발자의 끄적끄적

[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] 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 로 넣으면 페이스북 페이지가 열러 로그인 및 공유할 수 있는 화면으로 전환 됩니다. 참고들 하세요!

[javascript/jquery] jquery datatable Cannot reinitialise 에러 해결 방법 jquery datatable 을 이용하다 보면 여러가지 에러들이 나곤 합니다. 그중에서 Cannot reinitialise 이런 에러가 나는 경우에는 이미 한번 초기화 된 제이쿼리가 한번더 초기화 구분이 실행되서 에러가 나는 경우입니다. 어디선가 같은 아이디의 테이블에 datatable 을 2번 로드하는 경우일 겁니다 참고들 하세요! 공식사이트 링크 : https://datatables.net/manual/tech-notes/3 3. Warning: Cannot reinitialise DataTable 3. Warning: Cannot reinitialise DataTable DataT..

[javascript/jquery] jquery link preview library / jquery 링크 미리보기 라이브러리 [링크] 페이지 작업을 하다보면 특정 링크 주소를 입력받아서 미리보기를 구현해야 하는 경우가 있습니다. 즉, og 태그를 활용해서 미리보기를 구현해야 하는 경우인데요, 그럴때는 jquery 플러그인을 이용해서 구현이 가능합니다. 아래 링크 들어가시면 사용법도 자세히 설명이 되어있으니 참고들 하세요! jquery 링크 미리보기 라이브러리 : https://blog.work6.kr/8 링크(href) 미리보기 기능 jquery plugin(제이쿼리 플러그인) 오늘 소개할 플러그인의 기능은 링크 미리 보기 기능 이에요. a태그의 href를 분석하여 이동할 페이지를 작게 미리 보여주는 ..

[javascript/jquery] jquery circle-progress library/ jquery 원형 progress 라이브러리 [링크] jquery 플러그인들을 이용하다보면 원형 그래프 즉, 파이형의 그래프를 이용하여 수치들을 표시해야 하는 경우가 있습니다. 그럴때 사용할 수 있는 라이브러리를 공유하고자 합니다. 아래 링크 들어가셔서 확인해보시면 원형 그래프를 progress bar 와 같이 채울수도 있고 내용을 입력할 수도 있으니 확인해보시면 금방 적용하실 듯 합니다! 참고들 하세요! jquery-circle-progress library : https://github.com/kottenator/jquery-circle-progress GitHub - kottenator/jquery-circ..