해당 객체의 CSS에 cursor:pointer 를 적용하면 끝!!
#셀렉터 {cursor: pointer;}
| 특정 영역에서 폰트사이즈 컨트롤러 (특정 태그의 폰트를 선택적으로 컨트롤) (0) | 2019.03.14 |
|---|---|
| 높이값이 지정되지 않은 요소에 가로세로 정렬방법 2가지 (선택적 사용) (0) | 2019.01.31 |
| One Page 스크롤 작업 시 스크롤 제어 (0) | 2019.01.02 |
| IE 10 이상에서 SVG 필터사용 (0) | 2018.12.28 |
| iOS 에서 전화번호가 자동으로 인식하는 경우 (0) | 2018.11.09 |
에디터를 통해서 들어온 텍스트의 폰트사이즈를 조정하기 위하여 만든 컨트롤러.
HTML
- cnt-box의 내용이 에디터를 통하여 들어온 텍스트라고 가정하였음.
1 2 3 4 5 6 7 8 9 10 | <input type="button" id="fnt-size-down" class="fnt-size-down" title="글자크기 키우기"> <input type="button" id="fnt-size-up" class="fnt-size-up" title="글자크기 줄이기"> <div class="view-cnt"> <div class="cnt-box"> <p style="color: #333; font-family: Noto-regular, sans-serif; font-size: 17px;">텍스트</p> <b style="color: #333; font-family: Noto-regular, sans-serif; font-size: 14px;">채용 공고문</b> <span style="color: #333; font-family: Noto-regular, sans-serif; font-size: 14px;">span속의 텍스트</span> </div> </div> | cs |
JS
- 텍스트를 컨트롤 하는 태그들을 찾아서 추가해주면 된다.
- each문을 사용하여 태그들의 폰트 사이즈를 찾은 후 폰트사이즈를 +1 하는 방식으로 처리
- each문을 통해서 가져온 폰트 사이즈가 배열로 들어오는 점에 주의하여 number형으로 변환 후 처리.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | // 폰트 사이즈 컨트롤러 $("#fnt-size-up").on('click', function () { $(".view-cnt span").each(function (){ var fsize = $(this).css('font-size').split('px'); var fsizeUp = parseInt(fsize[0]); $(this).css({"font-size": fsizeUp+1}); }); $(".view-cnt p").each(function (){ var fsize = $(this).css('font-size').split('px'); var fsizeUp = parseInt(fsize[0]); $(this).css({"font-size": fsizeUp+1}); }); $(".view-cnt b").each(function (){ var fsize = $(this).css('font-size').split('px'); var fsizeUp = parseInt(fsize[0]); $(this).css({"font-size": fsizeUp+1}); }); }); $("#fnt-size-down").on('click', function () { $(".view-cnt span").each(function (){ var fsize = $(this).css('font-size').split('px'); var fsizeDown = parseInt(fsize[0]); $(this).css({"font-size": fsizeDown-1}); }); $(".view-cnt p").each(function (){ var fsize = $(this).css('font-size').split('px'); var fsizeDown = parseInt(fsize[0]); $(this).css({"font-size": fsizeDown-1}); }); $(".view-cnt b").each(function (){ var fsize = $(this).css('font-size').split('px'); var fsizeDown = parseInt(fsize[0]); $(this).css({"font-size": fsizeDown-1}); }); }); // END : 폰트 사이즈 컨트롤러 | cs |
| iOS 동적 생성 객체에 터치 이벤트 안먹힐 때. (0) | 2019.06.21 |
|---|---|
| 높이값이 지정되지 않은 요소에 가로세로 정렬방법 2가지 (선택적 사용) (0) | 2019.01.31 |
| One Page 스크롤 작업 시 스크롤 제어 (0) | 2019.01.02 |
| IE 10 이상에서 SVG 필터사용 (0) | 2018.12.28 |
| iOS 에서 전화번호가 자동으로 인식하는 경우 (0) | 2018.11.09 |
높이값이 지정되지 않은 경우에도 사용가능
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | /* > 트랜스폼 이용 - 창의 크기보다 컨텐츠의 높이가 큰 경우 컨텐츠 잘림 문제 발생 */ .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* > top,bottom, left, right 모든 값을 0설정 - 위의 방법에 비해서 크로스브라우징 시 안전성이 조금 좋다 창의 크기보다 컨텐츠의 높이가 높아도 컨텐츠 잘림 문제가 없다 */ .box { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } | cs |
| iOS 동적 생성 객체에 터치 이벤트 안먹힐 때. (0) | 2019.06.21 |
|---|---|
| 특정 영역에서 폰트사이즈 컨트롤러 (특정 태그의 폰트를 선택적으로 컨트롤) (0) | 2019.03.14 |
| One Page 스크롤 작업 시 스크롤 제어 (0) | 2019.01.02 |
| IE 10 이상에서 SVG 필터사용 (0) | 2018.12.28 |
| iOS 에서 전화번호가 자동으로 인식하는 경우 (0) | 2018.11.09 |
1 2 3 4 | $(document).on("mousewheel.disableScroll DOMMouseScroll.disableScroll touchmove.disableScroll", function(e) { e.preventDefault(); return; }); // 스크롤을 막음 (스크롤은 값만 받고 동작은 jq animate을 사용) | cs |
스크롤은 동작 휠 업/다운만 판단하고 동작은 막음.
이후 JQ animate로 페이징 제어.
| iOS 동적 생성 객체에 터치 이벤트 안먹힐 때. (0) | 2019.06.21 |
|---|---|
| 특정 영역에서 폰트사이즈 컨트롤러 (특정 태그의 폰트를 선택적으로 컨트롤) (0) | 2019.03.14 |
| 높이값이 지정되지 않은 요소에 가로세로 정렬방법 2가지 (선택적 사용) (0) | 2019.01.31 |
| IE 10 이상에서 SVG 필터사용 (0) | 2018.12.28 |
| iOS 에서 전화번호가 자동으로 인식하는 경우 (0) | 2018.11.09 |
> 마크업
1 2 3 4 5 6 7 8 9 | <svg xmlns="http://www.w3.org/2000/svg" style="width: 363px; height: 484px; position: absolute; top: 0px; left: 0px;"> <defs> <filter id="filtersPicture"> <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" /> <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" /> </filter> </defs> <image filter="url("#filtersPicture")" x="-50px" y="-50px" width="125%" height="125%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="이미지경로" /> </svg> | cs |
> CSS(별도의 CSS는 필요없음)
참고 : http://jsfiddle.net/KatieK/qhU7d/2/
| iOS 동적 생성 객체에 터치 이벤트 안먹힐 때. (0) | 2019.06.21 |
|---|---|
| 특정 영역에서 폰트사이즈 컨트롤러 (특정 태그의 폰트를 선택적으로 컨트롤) (0) | 2019.03.14 |
| 높이값이 지정되지 않은 요소에 가로세로 정렬방법 2가지 (선택적 사용) (0) | 2019.01.31 |
| One Page 스크롤 작업 시 스크롤 제어 (0) | 2019.01.02 |
| iOS 에서 전화번호가 자동으로 인식하는 경우 (0) | 2018.11.09 |
<meta name="format-detection" content="telephone=no">
| iOS 동적 생성 객체에 터치 이벤트 안먹힐 때. (0) | 2019.06.21 |
|---|---|
| 특정 영역에서 폰트사이즈 컨트롤러 (특정 태그의 폰트를 선택적으로 컨트롤) (0) | 2019.03.14 |
| 높이값이 지정되지 않은 요소에 가로세로 정렬방법 2가지 (선택적 사용) (0) | 2019.01.31 |
| One Page 스크롤 작업 시 스크롤 제어 (0) | 2019.01.02 |
| IE 10 이상에서 SVG 필터사용 (0) | 2018.12.28 |