DEVELOP (150) 썸네일형 리스트형 [javascript & jQuery] jquery version 한 번에 보기 잘 만들어 놓고 크로스 브라우징 하는 경우에 제이쿼리 버전을 낮춰야 하는 상황이 발생한다. 그럴때마다 일일히 구글링해서 시간을 낭비하곤 했는데, 이런.... 제이쿼리 사이트에서 아예 버전을 모아놓은 페이지가 있었다! https://code.jquery.com/jquery/ 더군다나 url도 단순해.............. 코드정리사이트 https://www.freeformatter.com/ html 뿐만 아니라 css, javascript, json 등 다양한 언어로 만들어진 코드를 한번에 보기 좋게 정리할 수 있는 프로그램이다. https://tools.arantius.com/tabifier 위 사이트와 비슷하지만 사용 범위가 좁다. html, css, c style, json 사용 가능. [CSS] list 고르게 정렬하기 그림과 같이 리스트 간격을 동일하게 주되, 간격마다 bar를 일정 간격으로 놓는 css 을 알아보자. 1의 태그 : span 2의 태그 : span 3의 태그 : div 사실 어떠한 태그든 의미 없다. 1의 클래스 : 없음 2의 클래스 : .vertical-bar 3의 클래스 : .index-top html 1 1 11 css /* list */ .index-top { display: flex; align-items: center; overflow: hidden; padding: 3.34% 0 2.34% 0; text-align: center;}.index-top span { float: left; margin: 0 auto; padding: 0 5%; font-size: 2.3rem; line-heig.. [javascript & jQuery] 스크롤 문제 해결하기 iScroll.js 모바일 view단 작업 시 div가 겹쳐 있을 때 스크롤 이벤트가 정확하게 동작하지 않는 경우가 있다. 이럴 때 플러그인을 사용하면 되는데, jScroll.js 가 가장 보편적으로 쓰이고 있다. ** iscroll api 잘 사용 하기 : https://m.blog.naver.com/PostView.nhn?blogId=romeoh&logNo=140171004949&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F ** iscroll github 참고 : github.com/cubiq/iscroll 1. 해당 플러그인을 사용할 때 스크롤을 적용하려는 대상 안쪽에 플러그인 마크업을 해준다. a b 쇼핑리스트 c d e 내 게시글 f g h i j k l m n 2. id로 .. [javascript & jQuery] 레이어 팝업 항상 정 가운데로 정렬 // :::::::::::::::::::::: 중앙 정렬 ::: jQuery.fn.middle = function () { this.css("position","absolute"); this.css("top", '50%'); this.css("left", '50%'); this.css("margin-top",- ($(this).outerHeight()) / 2) + "px"; this.css("margin-left",- ($(this).outerWidth()) / 2) + "px"; return this; } 구현해야 할 곳에 호출 하기만 하면 된다. // :::::::::::::::::::::: 모바일 레이어팝업 구현 ::: function mobilePopup() { $('.js-dim').show(.. [mobile] 레이어팝업 구현시 이벤트 캡처 현상 제거하기 레이어팝업에서 스크롤 이벤트를 발생 시켜야 할 경우 난 분명 스크롤이 있는 곳을 스크롤 하였는데 바디 부분도 함께 스크롤 되는 경우가 있다. 이런 버블링 현상을 제거해 주기 위해 보통, $('body').bind('touchmove', function(e){ e.preventDefault(); }); 이 이벤트를 걸어주는데 모바일에서 직접 볼 경우엔 바디 뿐만 아니라 레이어팝업에 있는 스크롤 기능조차 안된다. 또한 웹상에서 모바일 미리보기로 볼 경우에, 이런 에러가 콘솔에 찍히는걸 볼 수 있다. preventDefault가 먹히지 않는 것인데,이 경우에는 html과 body부분의 스크롤을 숨기고, 레이어 팝업에서 스크롤 되야하는 영역에 직접 스크롤 스타일을 넣어준다.뿐만아니라, passive 현상을 제거.. [javascript & jQuery] 팝업 쿠키 보이기 if(!$.cookie("popupCode_layer_9")){ $('#popupCode_layer_9').show(); } 팝업 쿠키 값으로 flag 설정을 할 때 유용하게 쓸 수 있다. [javascript & jQuery] nput 박스 숫자 입력시 자동 포커스 이동 html 입력창-입력창-입력창 jQuery // :::::::::::::::::::::::::: input 입력시 자동 넘기기 $('.input-num-size').keyup (function () { var charLimit = $(this).attr("maxlength"); console.log(charLimit); if (this.value.length >= charLimit) { console.log(this.value.length); $(this).next().next().next('.input-num-size').focus(); return false; } }); * jQuery 작성시 $(document).ready(function(){}); 입력 후 해야한다. 이전 1 ··· 15 16 17 18 19 다음
