개발자의 끄적끄적

[javascript/jquery] jquery swiper slide change example / jquery swiper 슬라이드 변경 이벤트 감지 방법 jquery 에서 슬라이드를 표현하고 싶을때 swiper 를 많이 사용합니다! 그중에서 슬라이드가 변화되었을때를 체크해서 무언가를 띄운다거나 해야 하는 경우가 있습니다. 그럴때는 아래 나와있는 내용처럼 slideChange 이벤트를 사용하시면 됩니다! var mySwiper = new Swiper('.swiper-container', { }; mySwiper.on('slideChange', function () { // todo }); 참고들 하세요!

[javascript/jquery] jquery touch move 제어 방법 jquery 에서 스마트폰에서 터치 하고 움직이는 이벤트를 제어해야 하는 경우가 있습니다. 좌 우로 슬라이드처럼 움직이는걸 제어하는 경우일 텐데요. 그럴때 참고할만한 사이트가 있어서 공유하려고 합니다. 아직 테스트 전이긴 하지만, 곧 테스트해볼예정이라 해보고 문제가 있거나 하면 바로 또 공유하겠습니다! 참고들 하세요! https://jamdol.tistory.com/46

[javascript/jquery] javascript kst example / 자바스크립트 한국 시간 구하는 방법 javascript 에서 KST 즉, 한국시간을 구해야 하는 경우가 있습니다. 간단히 설명하면 기준이 되는 UTC 를 구해서 9시간 차이가 나는 한국시간을 구해주면 됩니다! var cur_date = new Date(); var utc = cur_date.getTime() + (cur_date.getTimezoneOffset() * 60 * 1000); var time_diff = 9 * 60 * 60 * 1000; var cur_date_korea = new Date(utc + (time_diff)); 위 내용 보시면 아시겠지만, 현재시간을 기준으로 UTC 를 구하고 그것을 9시간 차이를..

[javascript/jquery] javascript random number example / 자바스크립트 랜덤 자리숫자 생성 예제 javascript 에서 특정 자리숫자를 랜덤으로 만들어내야 하는 경우가 종종 있습니다. 그럴때 사용할 수 있는 함수를 공유하고자 합니다. function rnd_num(n) { let num = '' for (var i = 0; i < n; i++) { str += Math.floor(Math.random() * 10) } return num; } 위 내용 보시면 아시겠지만, rnd_num 함수에 입력받은 값이 길이가 됩니다! 즉, rnd_num(3) 이면 3자리 랜덤 숫자가 생성되서 리턴됩니다! 참고들 하세요!

[javascript/jquery] jquery change form action url example / jquery 폼 액션 url 변경 방법 jquery 에서 폼데이터를 다루다보면 특정 상황에 따라서 폼의 액션을 변경해야 하는 경우가 있습니다. 그럴때는 attr 을 이용하시면 됩니다! 우선 아래와 같이 id_form 이라는 아이디를 가진 폼이 있다고 가정하고, 위 폼의 action url 을 변경하고 싶으면, 아래와 같이 attr 을 이용하여, action 을 설정해주면 됩니다! $("#id_form").attr("action", "CONTEOLLER OR FILE_NAME"); 그리고 submit 을 사용하면 바뀐 action url 로 전송이 되게 됩니다! 참고들 하세요!

[javascript/jquery] jquery bind scroll event example / jquery 스크롤 이벤트 예제 javascript 에서 마우스 휠 이벤트를 감지해야하는 경우, 즉, 스크롤이 하단에 올경우 페이징 처리를 한다든가 할때 기본적으로 scroll 이벤트를 등록해놔야 합니다! 예를들어서 아래와 같이 test 라는 함수가 있다고 가정하고, function test() { alert("testing..."); } 마우스 스크롤이 일어날때 위 함수를 호출하고 싶다면, 아래와 같이 bind 를 써서 함수명을 입력해주면 됩니다. $(window).bind("scroll", test); 그리고 위 test 라는 함수에 구현하고자하는 로직을 작성하시면 됩니다! 참고들 하세요!

[javascript/jquery] jquery slide effect example / jquery 슬라이드 효과 처리방법 jquery 에서 특정 요소에 추가되는 이펙트들 중에서 위로 올라가면서 사라지게 한다거나, 아래로 내려오면서 사라지게 하는 경우가 있습니다. 그럴때는 slideUp 과 slideDown 을 사용하시면 됩니다. test_div 라는 태그가 아래와 같이 있다고 가정하고, test 특정 이벤트 발생시 위로 올라가면서 사라지게 하고싶으면 아래와 같이 slideUp을 $("#test_div").slideUp(); 아래로 내려오면서 사라지게 하고싶으면 아래와 같이 slideDown 을 사용하시면 됩니다! $("#test_div").slideDown(); 참고들 하세요!

[javascript/jquery] jquery tag position example / jquery 태그 위치 구하는 방법 jquery 에서 특정 요소의 위치를 구해야 하는 경우가 있습니다. 팝업이나 버튼 등의 위치를 구하곤 할때 자주 사용되는데요, 그럴때는 아래나와있는 내용과 같이 offset 을 사용하시면 됩니다. 아래와 같은 div 태그가 있다고 가정하고, test 위 태그의 위치를 구하고 싶으면 아래와 같이 offset 를 사용하여 position 이라는 변수에 저장합니다. var position = $("#di_div").offset(); 그리고 왼쪽으로부터의 위치와 위로부터의 위치를 각각 left / top 를 사용하여 변수에 저장합니다. var left = position.left; var..