본문 바로가기

퍼블리싱

Browser Zoom In / Out var currentZooim = 100; // 현재비율 var maxZoom = 200; // 최대비율(500으로하면 5배 커진다) var minZoom = 80; // 최소비율 function zoomIn(){ if(currentZooim minZoom){ currentZooim -= 10; //25%씩 작아진다. $("#dispSize").html(currentZooim + "%"); document.body.style.zoom = currentZooim + "%"; }else{ return; } } 더보기
막대그래프(unlimited value) // 그래프보기 버튼 클릭시 $('.btn').on('click', function () { var wishNumArr = [32,15,0,2]; // 그래프값(실제로 노출될 값 순서대로 들어야야함) var maxNum; maxNum = getMaxOfArray(wishNumArr); function getMaxOfArray(numArr) { return Math.max.apply(null, numArr); } $('#popWishResult .graphArea li').each(function (i) { $(this).find('.bar').width(function () { return ((wishNumArr[i] / maxNum) * 100) + '%'; // 제일 큰 숫자를 100% 기준으로 삼고.. 더보기
빈칸넣기 문제(input setting), how to get byte /********************************** Part : 빈칸넣기 문제(input setting) 1. input의 갯수만큼 placeholder를 넣어줌 2. 정답을 미리 불러와서, byte값을 구한 후 input에 width값을 뿌려줌 3. 정답이 영어 1글자의 경우 폭이 너무 좁기 때문에 2byte로 설정해줌 **********************************/ var wordArr = ['my','name','is','I','live','in','with','middle school']; // 정답단어들(초급, 중급에만 해당) var placeholderArr = ['①','②','③','④','⑤','⑥','⑦','⑧','⑨','⑩'] // input placeho.. 더보기
cursor 속성값에 URL 사용 Gecko가 지원하는 모든 이미지 포맷을 사용할 수 있다. cursor: [,]* keyword; 형식으로 원하는 이미지를 순차적으로 넣은 후 맨 마지막에는 꼭 auto나 pointer처럼 기본적으로 지원하는 커서값을 넣어야한다.예를 들면 다음처럼 쓰면 된다. cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto; css3에서는 다음처럼 추가적으로 속성값에 좌표값을 지원한다. cursor: url(foo.png) 4 12, auto; IE에서는 cur, ani 포맷만 지원한다. curosr: url(foo.cur), pointer, url(bar.cur), auto; 그러나 다른 브라우저에서는 지원안하기때문에, 다음처럼 다른 포맷이미지와 함께 .. 더보기
ol list-style decimal에서 점제거 (IE8+ 지원) // 적용 전 One Two // remove dot CSS ol { counter-reset: item; list-style-type: none; } li { display: block; } li:before { content: counter(item) " "; counter-increment: item } // 적용 후 One Two 더보기

티스토리툴바