개발자의 끄적끄적

[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..

[javascript/jquery] javascript video end event example / 자바스크립트 비디오 종료 이벤트 예제 html 에서 video 태그를 다루다 보면 스크립트로 각종 이벤트를 제어해야하는 경우가 종종 있습니다. 그중에서 영상이 종료된 이벤트를 감지하는 방법을 공유해보고자 합니다. 우선 아래와 같은 video 태그가 있다고 가정하고, 위 영상이 종료된 후 무언가 처리를 하고 싶으면 아래와 같이 ended eventListner 를 등록하시면 됩니다. 그리고 그 안에 처리하고자 하는 로직을 작성하시면 됩니다! video.addEventListener('ended', function() { // to do }); 참고들 하세요!

[javascript/jquery] javascript video timeupdate event example / 자바스크립트 비디오 재생시간 변경 이벤트 예제 html 에서 video 태그를 이용하여 영상을 재생하다보면 현재 재생되고 있는 시간을 따로 표기하거나 남은시간을 계산하거나 하는 경우가 있습니다. 그럴때는 영상의 현재 재생 위치를 실시간으로 저장하고 있어야 합니다. video 태그의 timeupdate 이벤트를 이용하여 실시간으로 재생위치정보를 가져올 수 있습니다. 우선 아래와 같은 video 태그가 있다고 가정하고, 아래나와있는 내용처럼 eventListner 를 이용해서 timeupdate 이벤트를 선언해서 사용하시면 됩니다. video.addEventListener('timeupdate'..

[javascript/jquery] how to catch video seeking event / 비디오태그 seek 이벤트 예제 html 에서 영상을 재생할때 video 태그를 사용합니다! 그중에서 video 재생중 탐색 즉, 영상재생위치를 앞이나 뒤로 이동하는 것을 제어해야 하는 경우가 있습니다. 그럴때 사용하는 event 가 seeking 입니다. 우선 아래와 같은 video 태그가 있다고 가정하고, 위 video 가 재생되는 중 재생위치 검색을 제어하고 싶으면 아래와 같은 eventListner 를 생성하고 로직을 작성하시면 됩니다! video.addEventListener('seeking', function() { // to do }); 참고들 하세요!