본문 바로가기

코딩85

[모바일앱] 스크롤 이벤트 막기 코딩/제이쿼리 2017. 11. 21. 사이드바 열렸을 때, 배경이 스크롤 되는 현상 막기 $('#side-nav').on('click', function (e) { $('#sidenav-overlay').addClass('active'); /* Disable scroll */ $('.contents').on('scroll touchmove mousewheel', function(e){ e.preventDefault(); e.stopPropagation(); return false; }); }); $('#sidenav-overlay').click(function() { $('#side-nav').offcanvas('hide'); $('#sidenav-overlay').removeClass('active'); /* Enable scroll */..
[html] input file css 코딩 2017. 10. 11. input[type='file'] 은 브라우저마다 다른 스타일을 갖고있어서 변경하기 까다로움. input[type='file'] {max-width: 100%; height: 34px} input[type=file]::-webkit-file-upload-button {height: 34px} 참고 : https://gist.github.com/pzi/4993431
[html] 셀렉트박스 기본값에 관해 코딩 2017. 10. 10. selectbox를 사용할 때, 실제로 데이터를 넘겨주는 option이 있는가 하면, "==선택해주세요==" 와 같이 데이터와 전혀 상관없는 안내문구 옵션을 넣어야 할 때가 있다.(물론 요즘은 접근성 이슈로 기본값을 미리 선택해 두긴 하지만..)이와 같은 옵션을 넣을때 hidden과 disabled 속성을 넣으면 아주 유용하다.default값은 "==선택해주세요==" 로 되어있지만 실제 셀렉트박스를 클릭 시 안내문구는 선택할 수 없게 되고실제 데이터 값만 선택할 수 있게 되어서 개발자가 편할 듯. IE9+, 크롬, 파이어폭스 모두 잘 적용됐다. IE8 테스트는 해보지 못함. ==선택하세요== One Two Three Four Five
[크롬] 자동완성 input 파란색 배경 없애기 코딩 2017. 9. 8. 크롬브라우저나 모바일 webkit기반 브라우저에서는 자동완성값이 저장된 input박스의 배경색으로 파란색(하늘색)으로 표현해 주는 기능이 있다. 이에 대한 말이 나와서.. 구글링 한 결과 css로 잡을 수 있었다. 역시 갓구글 /* input box color */ input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #fff inset ; -webkit-text-fill-color: #000; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 50..
a태그 이중 코딩 2017. 8. 18. a태그 중첩(이중)으로 사용할 때는a태그 영역을 따로 잡고 z-index를 다르게 하여 사용하면 된다. 대신 href에 tel: 같은 명령어가 있을 경우는 한개만 z-index를 잡으면 뒤에 백그라운드 a태그와는 따로 동작하게 되어있다.
[부트스트랩] 이중 모달창 코딩/제이쿼리 2017. 7. 24. Multiple Modal창 띄울 때 아래 스크립트를 추가한다.구글에서 찾은 값은 count가 없어서 2개까지만 열 때 가능한 것이고3중, 4중으로 계속 띄울 때가 있을 것 같아서 소스를 조금 수정함. //Bootstrap multiple modalvar count = 0; // 모달이 열릴 때 마다 count 해서 z-index값을 높여줌$(document).on('show.bs.modal', '.modal', function () { var zIndex = 1040 + (10 * count); $(this).css('z-index', zIndex); setTimeout(function() { $('.modal-backdrop').not('.modal-stack').css('z-index', zInde..
[script] 브라우저, 모바일 체크 코딩/제이쿼리 2017. 3. 28. 브라우저 체크하는 스크립트 // Opera 8.0+ var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Firefox 1.0+ var isFirefox = typeof InstallTrigger !== 'undefined'; // Safari 3.0+ "[object HTMLElementConstructor]" var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!w..
[jquery] a링크 클릭시 상단 이동 취소 코딩/제이쿼리 2017. 2. 23. 코딩할때 아래와 같은 코드를 매우 많이 활용한다. a태그를 만들어서 이벤트를 호출할때 사용한다.클릭 이벤트 그럴때, 항상 href의 #(해시)가 동작하면서.. 상단으로 스크롤이 튕기는 현상이 발생하는데이것을 막으려면 아래와 같이 이벤트 안에 preventDefault 매소드를 추가해서 동작을 취소시켜주면 된다.function onclick(event) {event.preventDefault();//event} 그런데 이 소스가 IE에서 에러가 날때가 있다. preventDefault가 IE에서 안통한다.크로스브라우징을 고려한다면 아래와 같이 작성하면 된다! function onclick(event) {event.preventDefault ? event.preventDefault() : (event.ret..
[jquery] DOM에 나중에 추가된 항목 접근(이벤트) 코딩/제이쿼리 2017. 2. 6. document가 모두 다 load 되고 난 후, jquery로 인해 DOM에 추가된 요소들은 보통 접근할 수 없다.그것에 접근하기 위해서는 이벤트를 다르게 줘야 하는데삭제 $('.survey_list').on('click', '.btn_del', function() {$(this).parent().remove(); //여기서 this는 .btn_del 이 됨.}) '.btn_del'이 DOM에 새로 추가된 엘리먼트라고 한다면, 그 부모를 이벤트 대상으로 선택하고.on(event, 추가된 elment, function() { }) 로 작성을 하면 된다. 또는 ajax 호출 후에 추가해야하는 이벤트의 경우 아래 방법을 사용하면 잘됨. $(window).bind("load", function() { // i..
[git] branch 삭제 코딩/git 2017. 1. 11. local에 있는 branch 삭제 $ git branch -d issue merge 여부에 상관없이 삭제 $ git branch -D issue 저장소에 이미 올라간 브랜치 삭제 $ git push origin :issue 저장소에 있는 브랜치 목록 모두보기 $ git branch -a

Designed by 티스토리