통합검색
로그인
회원가입
Open menu
로그인
회원가입
통합검색
Synology
7
AWS
5
Linux
30
PHP
9
Python
3
Javascript
24
HTML / CSS
12
ETC
4
떡볶이집앞 사진관
Synology
7
AWS
5
Linux
30
PHP
9
Python
3
Javascript
24
HTML / CSS
12
ETC
4
떡볶이집앞 사진관
Javascript
[jQuery] .animate() 로 숫자 카운팅 구현하기
숫자 0부터 숫자가 커지는 카운팅 효과를 구현해본다. 구현된 결과 화면 예시 HTML 카운팅될 엘리먼트를 추가한다. <ul> <li> <div class="no">+<strong>1300</strong></div> <p>일반 참가자</p> </li> <li> <div class="no">+<strong>520</strong></div> <p>참가기업</p> </li> <li> <div class="no">+<strong>230</strong></div> <p>비즈매칭 참가기업</p> </li> <li> <div class="no">+<strong>220</strong></div> <p>비즈매칭 수</p> </li> <li> <div class="no">+<strong>80</strong></div> <p>전시 참가 기업</p> </li> <li> <div class="no">+<strong>30</strong></div> <p>IR 참가 기업</p> </li> </ul> jQuery 아래와 같이 코드를 적용한다. 해당 객체에 Counter atteibute를 추가하여 값을 0으로 설정한 뒤 animate로 증가시키는 방법이다. $(this).prop('Counter', 0).animate({ Counter: $(this).text()}, { duration: 3000, easing: 'swing', step: function (now){ // $(this).text(Math.ceil(now)); // 콤마 없는 숫자 노출 원하는 경우 $(this).text(Math.ceil(now).toLocaleString()); // 콤마 처리된 숫자 노출 원하는 경우 } });
[Javascript] ios 사파리에서 CSS 100vh 높이가 제대로 적용되지 않을 때
ios 사파리의 경우 100vh 높이가 더 크게 표현되는 오류가 있다. 실제 브라우저 height 만큼 100vh가 인식되도록 하기 위해 javascript로 css 변수를 만들어주면 제대로 표현 가능하다. javascript로 100vh 변수 생성하기 CSS에서 사용할 수 있도록 브라우저 높이를 계산하여 변수로 전달한다. // ios 에서 100vh 계산 위한 변수 생성 function setDynamicHeight() { let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); } // 초기 실행 및 창 크기 변경 시 업데이트 setDynamicHeight(); window.addEventListener('resize', setDynamicHeight); CSS 에서 변수 사용하여 100vh 표현하기 아래와 같이 javscript로 만든 --vh 를 활용할 수 있다. max-height: calc(var(--vh, 1vh) * 100 - 170px);
[jQuery] datepicker 로 check in/out 구현하기
여행, 예약사이트에서 흔히 볼 수 있는 check in/out 을 jQuery UI의 Datepicker로 구현하는 방법을 안내한다. input 두개를 만들어 각각 datepicker 가 트리거 되도록 하여 구현한다. HTML check in 과 out input 두개를 만든다. <input type="text" datepicker checkin> <input type="text" datepicker checkout> jQuery 각 input에 대해 아래와 같은 옵션으로 datepicker 를 적용한다. // check in/out let datepicker_checkin = $('input[datepicker][checkin]').datepicker({ dateFormat: 'yy-mm-dd', minDate: 0, onSelect: function(selectedDate) { let $this = $(this); let date = $(this).datepicker('getDate'); date.setDate(date.getDate()); // 당일치기도 가능한 경우 // date.setDate(date.getDate() + 1); // 무조건 1박 이상 가능한 경우 datepicker_checkout.datepicker("option", "minDate", date); // check in 날짜 선택하는 경우 자동으로 check out Datepicker를 띄움 setTimeout(function() { $this.parent().find('input[datepicker][checkout]').datepicker('show'); }, 10); } }); let datepicker_checkout = $('input[datepicker][checkout]').datepicker({ dateFormat: "yy-mm-dd", minDate: 1 });
[jQuery] Lazy 로 이미지 리소스 트래픽 절약하기
이미지가 리소스가 많은 웹페이지 로드시 과도한 트래픽이 발생하게 되는데, lazy 는 화면에 노출된 이미지 리소스를 그때그때 로드하여 출력해 주는 플러그인이다. Plugin include cdn 서비스나 본 글 하단에 첨부된 js파일을 다운로드 하여 lazy 적용을 원하는 웹페이지 상단에 인클루드 한다. <script type="text/javascript" src="jquery.lazy.min.js"></script> img 태그 수정 lazy가 적용될 <img> 요소를 아래와 같이 수정한 다음, plugin 을 적용한다. <HTML> 1. src 어트리뷰트를 data-src 로 변경 2. class="lazy" 추가 <img data-src="path/to/image.jpg" class="lazy" /> <jQuery> .lazy 가 부여된 이미지 리소스에 대해 lazy 적용 $(function() { $('.lazy').Lazy(); }); 상세 옵션 설정 lazy는 커스터마이징이나 디버깅 할 수 있는 몇가지의 옵션을 제공한다. ( 전체 옵션 확인 : http://jquery.eisbehr.de/lazy/#configuration ) $(function() { $('.lazy').Lazy({ 'thresold' : 100, // 이미지가 화면에 100px 만큼 보인 시점에 등장하도록 설정 'effect' : 'fadeIn', // fade 등장효과 적용 (기본값: show) 'effectTime' : 500, // fade 적용시 duration 시간 'onError' : function(element) { // img 로드 실패시 callback 함수 console.log('error loading ' + element.data('src')); } }); });
[jQuery] jQuery UI autocomplete 적용하기
jQuery UI에 기본 탑재된 자동완성 기능 (autocomplete) 샘플 코드. 배열을 미리 선언하여 사용하는 방법과 ajax 방식으로 배열을 가져와 구동하는 방법으로 사용할 수 있는데 아래 예시는 배열을 미리 선언한 뒤 사용하는 방식이다. 자동완성 배열 선언 searchSource = [ { 'label' : '서울', 'value' : 'seoul' }. { 'label' : '대전', 'value' : 'daejun' } ] 자동완성 적용 위에서 선언된 배열을 자동완성으로 적용하는 예제이며, 자동완성을 선택하는 경우 위 배열 중 'value'는 input의 value가 되며, 'label'은 자동완성에서 노출될 항목명이 된다. <HTML> <input type="text" name="address" autocomplete="off"> <jQuery> $('input[name="address"]').autocomplete({ 'source' : searchSource, // 위에서 선언한 배열 'minLength' : 0, // 최소 몇글자 입력시 자농완성 노출할 것인지 'autoFocus' : false, // 자동으로 첫번째 항목에 focus를 위치시킬 것인지 'position' : { my : 'right top', at : 'right bottom' }, // 자동완성 창의 노출 위치 'delay' : 0, // 노출 딜레이 시간 'z-index' : 999, // z-index 'classes' : {}, // 자동완성 기본 css class 를 custom class로 대입하는 옵션. 'select' : function(event, ui) {}, // 항목 선택시 수행할 작업 'focus' : function(event, ui) {}, // 항목 focus시 수행할 작업 'close' : function(event) {} // 닫는 경우 수행할 작업 }).on({ 'focus' : function() { $(this).autocomplete("search", ""); // input에 포커싱 되는 순간 자동완성이 열리게 하는 코드 } }); autocomplete가 적용된 ui는 아래 예시와 같다.
[Javascript] SMS 본문 내용 byte 수 계산하는 함수
SMS문자 본문 내용의 byte를 계산하는 간단한 코드. ASCII 코드가 128이상인 경우(한글, 한문, 특수기호 등) 2byte로 계산하고 그 외의 문자 (영어, 숫자, 기본기호 등)는 1byte로 계산한다. Javascript // 내용 byte 체크 function getByteLength(str) { var byteLen = 0; for(var i = 0; i < str.length; i++) { var charCode = str.charCodeAt(i); if (charCode > 128) { byteLen += 2; } else { byteLen ++; } } return byteLen; }
[jQuery] 마우스 드래그 금지 & 우클릭 금지
마우스 드래그 및 우클릭 금지하는 jquery 코드. event로 간단하게 처리 가능하다. jQuery <script type="text/javascript"> $(document).ready(function(){ //우클릭 금지 $(document).bind('contextmenu', function(e){ return false; }); //드래그 금지 $('*').bind('selectstart', function(e){ return false; }); }); </script>
[Javascript] 연락처가 올바른 연락처인지 검증하는 함수
연락처가 올바른 연락처인지 검증하는 함수. 지원되는 연락처 유형은 아래와 같다. - 휴대전화 번호 - 02 (서울) 번호 - 000 (지역) 번호 - 0000-0000 대표번호 Javascript check_phone = function(destPhone) { var regex = /^[0-9-]/; var regex2 = /^0(2|[3-9]\d{1})-?\d{3,4}-?\d{4}$|^01([016789])-?\d{3,4}-?\d{4}|\d{4}-\d{4}$/; if (regex.test(destPhone) && regex2.test(destPhone)) { return true; } else { return false; } };
[jQuery] 멀티 파일 업로드 플러그인 (MultiFile)
:file input을 멀티파일 업로더로 손쉽게 적용해주는 jQuery 플러그인. 첨부 가능 확장자, 용량 제한 등 다양한 옵션을 제공하는 간편한 플러그인이다. 직관적인 작동 방식으로 커스터마이징이 편하다. HTML <input type="file" name="attach" id="attach"> <div class="attaedbox"></div> jQuery <script type="text/javascript"> $(':file[name=attach]').MultiFile({ 'max' : 5, 'accept' : 'gif|jpg|jpeg|bmp|png|pdf', 'maxfile' : 10240, //각 파일 최대 업로드 크기 (kb) 'list' : $(':file[name=attachedbox]'), //파일목록을 출력할 요소 지정가능 'STRING' : { // error문구를 원하는대로 수정 'remove' : "<a href=\"#\" class=\"remove\">제거</a>", 'duplicate' : "$file 은 이미 선택된 파일입니다.", 'denied' : "$ext 는(은) 업로드 할수 없는 파일확장자입니다.", 'selected' :'$file 을 선택했습니다.', 'toomuch' : "업로드할 수 있는 최대크기를 초과하였습니다.($size)", 'toomany' : "업로드할 수 있는 최대 개수는 $max개 입니다.", 'toobig' : "$file 은 크기가 매우 큽니다. (max $size)" } }); </script>
[Javascript] text input에 연락처 입력시 자동 하이픈(-) 처리
text input에 연락처를 입력하는 경우 자동으로 하이픈(-) 처리하는 코드. 지원되는 연락처 유형은 아래와 같다. - 휴대전화 번호 - 02 (서울) 번호 - 000 (지역) 번호 - 0000-0000 대표번호 HTML <input type="text" callnumber /> Javascript $(document).on('keyup', 'input[callnumber]', function() { var value = $(this).val(); if (!value) return ""; value = value.replace(/[^0-9]/g, ""); let result = []; let restNumber = ""; // 지역번호와 나머지 번호로 나누기 if (value.startsWith("02")) { // 서울 02 지역번호 result.push(value.substr(0, 2)); restNumber = value.substring(2); } else if (value.startsWith("1")) { // 지역 번호가 없는 경우 // 1xxx-yyyy restNumber = value; } else { // 나머지 3자리 지역번호 // 0xx-yyyy-zzzz result.push(value.substr(0, 3)); restNumber = value.substring(3); } if (restNumber.length === 7) { // 7자리만 남았을 때는 xxx-yyyy result.push(restNumber.substring(0, 3)); result.push(restNumber.substring(3)); } else { result.push(restNumber.substring(0, 4)); result.push(restNumber.substring(4)); } $(this).val(result.filter((val) => val).join("-")); });
[Javascript] 텍스트 클릭시 클립보드(clipboard)에 복사
특정 텍스트 클릭시 클립보드(Clipboard)에 복사하는 Javascript 코드. 복사할 텍스트를 text input 에 value값으로 넣어 클릭시 텍스트를 전체 선택하고 클립보드에 복사하는 방법이다. javascript 구문을 input의 onclick으로 작성 하였기 때문에 간편한 사용이 가능하다. HTML & Javascript <input type="text" value="복사할 텍스트" onclick="this.select();document.execCommand('copy');alert('클립보드에 복사 되었습니다.');return false;" readonly />
[Javascript] 특정 시간 까지의 남아있는 시간 카운트다운
javascript로 오늘을 기준으로 특정 시간까의 남아있는 시간을 카운트다운하는 코드. html로 빈 엘리먼트를 하나 만들어 두고 script를 통해 엘리먼트 내부에 남아있는 시간을 계산하여 html을 조합하여 넣어주는 간단한 방식이다. HTML <div class="count"></div> Javascript <script> CountDownTimer('01/01/2019 00:00 AM'); function CountDownTimer(dt) { var end = new Date(dt); var _second = 1000; var _minute = _second * 60; var _hour = _minute * 60; var _day = _hour * 24; var timer; function showRemaining() { var now = new Date(); var distance = end - now; if (distance < 0) { clearInterval(timer); return; } var days = Math.floor(distance / _day); var hours = Math.floor((distance % _day) / _hour); var minutes = Math.floor((distance % _hour) / _minute); var seconds = Math.floor((distance % _minute) / _second); if(days<10){ days = '0' + days; } if(hours<10){ hours = '0' + hours; } if(minutes<10){ minutes = '0' + minutes; } if(seconds<10){ seconds = '0' + seconds; } days = days.toString(); hours = hours.toString(); minutes = minutes.toString(); seconds = seconds.toString(); var date = new Array(); date[0] = days.substring(0,1); date[1] = days.substring(1,2); date[2] = hours.substring(0,1); date[3] = hours.substring(1,2); date[4] = minutes.substring(0,1); date[5] = minutes.substring(1,2); date[6] = seconds.substring(0,1); date[7] = seconds.substring(1,2); var html = ''; html += '<span>'+date[0]+'</span>'; html += '<span>'+date[1]+'</span>'; html += '일 '; html += '<span>'+date[2]+'</span>'; html += '<span>'+date[3]+'</span>'; html += '시간 '; html += '<span>'+date[4]+'</span>'; html += '<span>'+date[5]+'</span>'; html += '분 '; html += '<span>'+date[6]+'</span>'; html += '<span>'+date[7]+'</span>'; html += '초 '; matches = document.getElementsByClassName('count'); matches[0].innerHTML = html; } timer = setInterval(showRemaining, 1000); } CountDownTimer('01/01/2050 00:00 AM'); // 오늘 날짜 </script> 결과 미리보기 1초 마다 .count 엘리먼트 내부에 innerHTML 되는 것을 확인할 수 있다.
[jQuery] file input으로 파일 첨부시 첨부파일명 가져오기 (fakepath 지우기)
윈도우 환경의 브라우저에서 file input으로 파일을 첨부한 뒤 input 의 value값을 가져오면 fakepath 가 포함된 경로가 반환된다. fakepath를 replace시켜 파일명만 반환받아 보자! jQuery $(this).val().replace(/C:\\fakepath\\/i,'');
[jQuery] e.target 추적하여 자기 자신이 아닌 엘리먼트를 클릭했을 때 hide() 처리
jQuery로 show() 와 hide()되는 toggle 메뉴를 만든 경우 toggle 메뉴 외 body내 '나 자신이 아닌' 다른 엘리먼트를 클릭하는 경우 toggle로 열린 엘리먼트를 hide() 시킬 수 있다. 마우스를 클릭하는 경우 e.target을 통해 클릭 event의 target 내에 '나 자신'이 있는지 검사하고 target 내에 없는 경우 hide() 시킨다. jQuery $me = $('#this-me'); //나 자신 $('body').click(function(e){ if($me.has(e.target).length == 0 && !$me.is(e.target)){ $me.hide(); } });
[jQuery] iframe 높이를 문서 높이에 따라 자동 조절
iframe 내부 문서의 높이에 따라 iframe의 height를 자동으로 조절해주는 코드. HTML <iframe src="document.html" frameborder="0" scrolling="no></iframe> jQuery <script type="text/javascript"> $('iframe').load(function(){ $(this).height(0); setTimeout( function() { $(this).height($(this).contents().find('body').height() + 150), }, 100 ); }); </script>
[Javascript] Crossdomain iframe 컨텐츠 높이에 맞게 자동 조절
iframe 내부의 문서가 외부 웹페이지(Cross Domain)인 경우 내부 iframe의 높이, 폭 크기에 맞게 iframe 사이즈를 자동 조정하는 script 코드. iframe이 삽입되는 부모 페이지 <iframe src="document.html" id="iframeWrap" frameborder="0" scrolling="no"></ifrmae> <script> // iframe auto height let iframe = document.querySelector("#iframeWrap"); window.addEventListener('message', function(e) { let message = e.data; iframe.style.height = message.height + 80 + 'px'; iframe.style.width = message.width + 'px'; } , false); </script> iframe 내부 <script> $(function() { // iframe auto height let auto_height = function() { let message = { height: $('#wmanager').height(), width: $('#wmanager').width() }; window.top.postMessage(message, "*"); } $(window).on({ 'load' : auto_height }) }) </script>
1
2
