에디터를 통해서 들어온 텍스트의 폰트사이즈를 조정하기 위하여 만든 컨트롤러.



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
<input type="button" value="프린트" id="pop-print" class="print-btn" title="프린트">
cs



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(window).load(function () {
  function info_print() {
    var initBody = document.body.innerHTML;
    window.onbeforeprint = function () {
      document.body.innerHTML = document.getElementById("view-box").innerHTML;
    };
    window.onafterprint = function () {
      document.body.innerHTML = initBody;
    };
    window.print();
  }
 
  $('#pop-print').on('click', function () {
    info_print();
  });
});

cs


'퍼블리싱 > JS & JQ' 카테고리의 다른 글

오늘 하루 보지 않기 레이어 팝업  (1) 2019.03.29
"onclick"으로 "this"를 인식하는 방법  (0) 2019.03.27
.ready() vs .load()  (0) 2019.01.29
.is(':animated') 활용 중복동작 방지  (0) 2019.01.15
트윈맥스 애니메이션 중 실행 막기  (0) 2018.11.19

높이값이 지정되지 않은 경우에도 사용가능


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

$(document).ready(function () {

// 실행지점 : DOM이 모두 로드된 지점

// 참고 : 페이지가 모두 로드된 시점이 아닌 DOM이 모두 로드된 시점이다.

});


$(window).load(function() {

// 실행 지점 : 페이지가 모두 로드된 시점.

// 참고 : 페이지의 이미지 등이 모두 렌더링 되고 나서이다.

});


* 어떤 영역의 정확한 높이 값 또는 렌더링이 모두 완료 된 후의 상황이 필요하다면 "$(window).load(function(){ });"을 사용해야겠다.



'퍼블리싱 > JS & JQ' 카테고리의 다른 글

"onclick"으로 "this"를 인식하는 방법  (0) 2019.03.27
특정영역만 프린트 하기  (0) 2019.02.22
.is(':animated') 활용 중복동작 방지  (0) 2019.01.15
트윈맥스 애니메이션 중 실행 막기  (0) 2018.11.19
스크롤 막기 JQ  (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
29
30
31
32
33
34
35
36
37
38
39
40
41
<div class="btn">
    <span style="border: 1px solid #000">클릭하세요!</span>
    <div class="hideMenu" style="display: none">
        <ul>
            <li>숨겨진 메뉴1
            <li>숨겨진 메뉴2
        </ul>
    </div>
</div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<div class="btn">
    <span style="border: 1px solid #000">클릭하세요!</span>
    <div class="hideMenu" style="display: none">
        <ul>
            <li>숨겨진 메뉴1
            <li>숨겨진 메뉴2
        </ul>
    </div>
</div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
 
<script>
    $('.btn').bind({
        // 일반적 멀티 바인드
        mouseenter: function() {
            $('.hideMenu').slideDown();
        },
        mouseleave: function() {
            $('.hideMenu').slideUp();
        }
 
        // .is(':animated') 사용
        mouseenter: function() {
            var $btn=$('.hideMenu');
            if(!$btn.is(':animated')) $btn.slideDown();
        },
        mouseleave: function() {
            $('.hideMenu').slideUp();
        }
});
</script>
cs


'퍼블리싱 > JS & JQ' 카테고리의 다른 글

특정영역만 프린트 하기  (0) 2019.02.22
.ready() vs .load()  (0) 2019.01.29
트윈맥스 애니메이션 중 실행 막기  (0) 2018.11.19
스크롤 막기 JQ  (0) 2018.11.09
JS에서 미디어쿼리를 사용하는 matchMedia()  (0) 2018.11.01
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(&quot;#filtersPicture&quot;)" 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
1
2
3
if(!TweenMax.isTweening($(''))){
    // Todo Function;
}
cs


'퍼블리싱 > JS & JQ' 카테고리의 다른 글

.ready() vs .load()  (0) 2019.01.29
.is(':animated') 활용 중복동작 방지  (0) 2019.01.15
스크롤 막기 JQ  (0) 2018.11.09
JS에서 미디어쿼리를 사용하는 matchMedia()  (0) 2018.11.01
JQuery API  (0) 2018.11.01

+ Recent posts

티스토리툴바