개발자의 끄적끄적

[javascript/jquery] javascript mouse scroll event example / 자바스크립트 마우스 스크롤 이벤트 예제 javascript 에서 마우스 스크롤 액션이 일어날때마다 특정 행동을 취하도록 로직을 작성해야 하는 경우에는 아래와 같이 scroll 이벤트를 이용하시면 됩니다. $(function() { $(window).scroll(function() { // to do } }); 위 내용처럼 페이지 시작시 scroll 이벤트를 선언해서 안에 로직을 작성해 놓으면 마우스 스크롤이 일어날때마다 해당 내용이 동작하게 됩니다! 참고들 하세요!

[javascript/jquery] javascript querySelectorAll example / 자바스크립트 특정 태그 전체 가져오는 방법 javascript 에서 현재 페이지에 있는 특정태그들 리스트를 가져오고 싶은 경우가 있습니다. 그럴때는 아래 나와 있는 내용처럼 querySelectorAll 을 이용하시면 됩니다. var input_list = document.querySelectorAll("input"); 예를들어 현재 페이지에 있는 input 태그를 전체 담고 싶으면 위처럼 작성해서 input_list 에 담으면 됩니다. 내용을 확인해보려면 아래처럼 console.log 로 출력해보면 바로 확인할 수 있습니다! console.log(input_list); 참고들 하세요~!

[javascript/jquery] javascript window.open 팝업차단 확인 방법 javascript 에서 새창을 열기 위해서 window.open 을 사용합니다. 하지만, 가끔 팝업이 차단되어 있는 경우 새창이 열리지 않게됩니다. 그럴때는 아래와 같은 방법으로 팝업이 차단되어 있는지 체크를 해서 alert 창을 띄워줄 수 있습니다. 위 내용 보시면 아시겠지만, try catch 문을 이용해서 exception 이 발생하면 팝업이 차단되어 있다고 보고 alert 을 띄워주는 내용입니다. 참고들 하세요!

[javascript/jquery] jquery selectbox selected text example / jquery 셀렉트 박스 선택된 옵션의 텍스트 가져오기 html 에서 selectbox 를 이용하다보면 jquery 로 셀렉트 박스의 선택된 텍스트를 가져와야 하는 경우가 있습니다. 그럴때는 아래와 같이 하시면 됩니다! 우선 아래와 같이 id_select 라는 ID 를 가진 selectbox 가 있다고 가정하고, 테스트1 테스트2 위 셀레트박스의 선택된 옵션의 텍스트를 가져오려면 아래와 같이 jquery 를 사용하시면 됩니다! $("#id_select option:selected").text(); 그러면 결과는 선택된 옵션의 텍스트 값인 테스트2 가 나오게 됩니다. 테스트2 참고들 하세요!

[javascript/jquery] javascript pdf.js get total page number example / 자바스크립트 pdf.js 전체 페이지수 가져오기 javascript 에서 pdf 뷰어를 구현하기 위해서 pdf.js 를 사용하다보면 현재 페이지 번호도 알아야 하지만, 전체 pdf 의 page 수를 알아야 하는 경우도 있습니다. 마지막페이지에 도달하는 걸 알아야 한다든가 몇% 진행되었는지를 체크해야한다든가 하는 경우에 사용될 수 있습니다. 그럴때는 pagesCount 를 이용하시면 됩니다. 우선 페이지에서 아래와 같이 pdf 가 정상적으로 로드되었다고 가정하고, window.addEventListener('load', function(){ PDFViewerApplication.op..

[javascript/jquery] javascript pdf.js get current page number example / 자바스크립트 pdf 뷰어 현재 페이지 번호 가져오기 javascript 에서 pdf 뷰어를 사용하기위해서 pdf.js 를 많이 사용합니다! 그중에서, 현재 보고있는 pdf 의 페이지 번호를 알아내야 하는 경우가 종종 있습니다. 그럴때는 아래와 같이 currentPageNumber 를 사용하시면 됩니다. 우선 아래와 같이 pdf 가 로드되었다고 가정하고, window.addEventListener('load', function(){ PDFViewerApplication.open('PDF_SRC') }); 위 pdf 의 현재 페이지를 호출하고 싶으면 아래처럼 pdfViewer 의 ..

[javascript/jquery] javascript video custom volume control example / 자바스크립트 비디오 볼륨조절 예제 html 에서 video 태그를 이용하여 영상영역을 구현하고 custom control bar 를 제작해서 사용하는 경우가 있습니다. 그중에서 소리 조절 옵션을 사용해야 하는 경우에는 아래와 같이 input range 와 스크립트를 이용하시면 됩니다. 우선 아래처럼 video 태그가 있다고 가정하고, 위 video 의 소리를 조절하기위한 range 타입의 input 태그를 아래와 같이 선언합니다. 그리고 볼륨값이 조절될때 마다 호출되는 set_vol 함수를 아래처럼 작성합니다. function set_vol(val) { var player = doc..

[javascript/jquery] javascript video fullscreen example / 자바스크립트 비디오 전체화면 전환 방법 javascript 에서 video tag 를 이용하여 custom control bar 를 구현하다보면 fullscreen 즉, 전체화면을 구현해야 하는 경우가 있습니다. 그럴때는 아래와 같이 스크립트를 사용하시면 됩니다! 우선 아래와 같은 video 태그가 있다고 가정하고, 위 비디오를 전체화면 모드로 변환하기 위한 버튼을 아래처럼 생성합니다. fullscreen 그리고 위 버튼의 클릭 액션이 일어날때 호출되는 함수 set_fullscreen 함수를 아래와 같이 작성합니다. function set_fullscreen() { if(vid.requestFullSc..