note

javascript상황: 모바일에서 사이드 네비게이션이 열린 상태에서 스크롤시 body는 스크롤 되지 않게 하고싶다Solution A: CSS123456html,body { overflow: hidden; position: relative; height: 100%;}PC에선 문제 없이 작동한다. 하지만 iOS 사파리랑 크롬에서는 무용지물.Solution B: CSS – fix12345body { position: fixed; width: 100%; height: 100%;}PC, 모바일 모두 되긴 하는데 Side nav를 닫은 후에는 position이 꼬임 -> DOM 클릭해도 이벤트가 활성화 안된다.Solution C: jQuery1234사이드 네비게이션여기에 body의 내용 넣는다12345678910..

주로 헤더로 많이 쓰이는 fixed 엘리먼트는 아예상단에 위치가 고정되기때문에 윈도우 창을 작게 했을경우, 가로로 스크롤을 해보면 콘텐츠와 함께 스크롤이되지않는다. 그래서 window에 스크롤 이벤트를 걸어서 css를 스크립트로 처리해주어야한다. // gnb fixed horizontal scroll issue $(window).scroll(function(){ $('.fixed-top').css('left', 0-$(this).scrollLeft()); });

김불꽃이 준 URL에서 회원가입쪽 소스 구경하다가 간단히 써먹을만해 보여서 메모,, 소스 중간에 style로 width:calc(40% - 28px); 부분이 눈에 띄네요,, 써먹어본적은 없었는데 calc쓰면 퍼센트에 px를 계산할수 있나보군요,, 프로모션이나 회원가입 시 사용자 이메일 받는경우 jquery script @ 직접입력 naver.com daum.net hanmail.net gmail.com nate.com yahoo.co.kr hotmail.com dreamwiz.com empal.com // js $(function () { $(".email_sel").change(function () { var selected = $(this).children("option:selected").val(..

원래는 src속성을 attr해주기 전에 변수에 attr로 속성을가져와서 그 스트링값을 수정 후 다시 지정해주었는데 attr메소드 내부에서 match로 체크해주고 replace하면서 return시켜주면 코드도 간결해지고 더 보기 좋은것같다. HTML : 위와 같은 구조에서 a태그 클릭 시 img이미지를 on,off 토글 시키고 싶을 때,, JS : $("a").on("click", function (e) { var $this = $(this); // element a $this.find(">img").attr("src", function (index, attr) { if (attr.match('_on')) { return attr.replace("_on.png", "._off.png"); } else { ..

버튼을 누르면 애니메이션이 시작하고, 콜백을 받아야 할 일이 생김. 1. gif는 제어불가, 무한반복이라 사용불가. 2. video태그는 모바일서 플레이어가 띄워져서 사용불가. 3. css sprite는 콜백을 못받아서 사용불가. 4. flash x 그래서 jquery sprite 플러그인중 두개중 하나 선택. http://blaiprat.github.io/jquery.animateSprite/ JS var currentFps = 13;//낮을수록 부자연스럽고 빨라짐 var animationSettingsOld = { fps: currentFps, loop: true, autoplay: true }; $('.human').animateSprite(animationSettingsOld); $('.human..

사용자 개인 정보를 서버에 전송할 때 HTTPS로 적용해 달라는 요청이 들어온 적이 있었다.그래서 주민등록번호나 회원 아이디, 패스워드 등을 서버로 전송하는 페이지에 한해서 HTTPS로 적용되게 URL을 변경하였다. 헌데, 다음과 같은 문제가 발생하였다.1. 회원 약관 페이지 접근 http://test.co.kr/userAgreement.do2. 약관 페이지에서 회원 정보 입력 페이지 이동 https://test.co.kr/userReg.do3. 회원 정보 입력 페이지에서 휴대폰 인증 버튼 클릭 시 ajax로 http://test.co.kr/userAuthMobilePhone.do 요청 위와 같이 휴대폰 인증 버튼 클릭 시 서버로 요청을 보내지도 못하고, ajax 에러 메시지가 출력된다.error, No..

'월 선택'시 사용 1. jquery include/ ui포함 2. 3. $(function(){ /* MonthPicker 옵션 */ options = { pattern: 'yyyy-mm', // Default is 'mm/yyyy' and separator char is not mandatory selectedYear: 2017, startYear: 2008, finalYear: 2020, monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'] }; /* MonthPicker Set */ $('#monthpicker').monthpicker(options); /* 버튼 클릭시 MonthPicker S..

javascript 정규식 사용모바일 안드로이드 천지인 키보드 예외추가 $("input:not([type='file']), textarea").bind("change keyup input",function() { var el = this; var ls_str = el.value; var deny_pattern =/^[\-\:\ㄱ-ㅣ가-힣a-zA-Z0-9_\\s\\/\\.\\ \\*\\#\\\=\\_\\~\\?\\!\\,|\u318D\u119E\u11A2\u2022\u2025a\u00B7\uFE55]*$/; numPattern = ls_str.match(deny_pattern); if (numPattern == null) { alert("영문자와 한글,숫자만을 입력하세요"); this.value = "";..

jquery.filerhtml5 input file plugininput 파일첨부 커스텀 demo : http://filer.grandesign.md/doc : http://filer.grandesign.md/#documentation $('#filer_input').filer({ showThumbs: true, addMore: true, limit: 1, allowDuplicates: false });

ajax 헤더값 전송하기 $.ajax({ type: "GET", url: "/getdata", dataType:"json", cache: false, contentType: "application/json; charset=utf-8", beforeSend: function (req) { req.setRequestHeader('Api-Key', 'testkey1hb23jh346h3v339d0fk90f438fd9e'); req.setRequestHeader('Content-Type', 'application/json; charset=utf-8'); req.setRequestHeader('Auth-Token-Web', 'testWeB91F9gd3K24fgd4etnaD'); }, success: function..