일반 HTML에서 글자 확대/축소 기능 삽입하기 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

일반 HTML에서 글자 확대/축소 기능 삽입하기 정보

일반 HTML에서 글자 확대/축소 기능 삽입하기

본문

일반 HTML 페이지에 글자 크기를 조정을 의뢰받아서 그누보드에서 사용하고 있는 내용에서 필요한 부분만 뽑았습니다.

FontResize.js  파일을 생성한후 아래의 내용을 삽입합니다.

// 여기부터  FontResize.js 파일 내용입니다.
if (typeof(COMMON_JS) == 'undefined') { // 한번만 실행
    var COMMON_JS = true;

    // 쿠키 입력
    function set_cookie(name, value, expirehours, domain) {
        var today = new Date();
        today.setTime(today.getTime() + (60*60*1000*expirehours));
        document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + today.toGMTString() + ";";
        if (domain) {
            document.cookie += "domain=" + domain + ";";
        }
    }

    // 쿠키 얻음
    function get_cookie(name) {
        var find_sw = false;
        var start, end;
        var i = 0;

        for (i=0; i<= document.cookie.length; i++) {
            start = i;
            end = start + name.length;

            if(document.cookie.substring(start, end) == name) {
                find_sw = true
                break
            }
        }

        if (find_sw == true) {
            start = end + 1;
            end = document.cookie.indexOf(";", start);

            if(end < start)
                end = document.cookie.length;

            return document.cookie.substring(start, end);
        }
        return "";
    }

    // 쿠키 지움
    function delete_cookie(name) {
        var today = new Date();

        today.setTime(today.getTime() - 1);
        var value = get_cookie(name);
        if(value != "")
            document.cookie = name + "=" + value + "; path=/; expires=" + today.toGMTString();
    }
}

function getFontSize() {
    var fontSize = parseInt(get_cookie("ck_fontsize")); // 폰트크기 조절
    if (isNaN(fontSize)) { fontSize = 12; }
    return fontSize;
}

function scaleFont(val) {
    var fontSize = getFontSize();
    var fontSizeSave = fontSize;
    if (val > 0) {
        if (fontSize <= 18) {
            fontSize = fontSize + val;
        }
    } else {
        if (fontSize > 12) {
            fontSize = fontSize + val;
        }
    }
    if (fontSize != fontSizeSave) {
        drawFont(fontSize);
    }
    set_cookie("ck_fontsize", fontSize, 30);
}

function drawFont(fontSize) {
    if (!fontSize) {
        fontSize = getFontSize();
    }

    var subject=document.getElementById("writeSubject");
    var content=document.getElementById("writeContents");
    var comment=document.getElementById("commentContents");
    var wr_subject=document.getElementById("wr_subject");
    var wr_content=document.getElementById("wr_content");

    if (comment) {
        var commentDiv = comment.getElementsByTagName("div");
        var lineHeight = fontSize+Math.round(1.1*fontSize);
    }

    fontSize = fontSize + "px";

    if (subject)
        subject.style.fontSize=fontSize;
    if (content)
        content.style.fontSize=fontSize;
    if (wr_subject)
        wr_subject.style.fontSize=fontSize;
    if (wr_content)
        wr_content.style.fontSize=fontSize;
    if (commentDiv) {
        for (i=0;i<commentDiv.length;i++) {
            commentDiv[i].style.fontSize=fontSize;
        }
    }
}
// 여기까지는  FontResize.js 파일 내용입니다.




홈페이지 방문객들이 직접 글자 크기를 제어하고픈 HTML에  FontResize.js 파일을 삽입 합니다.

<!-- js 파일을 호출할때는 적용하고자 하는 페이지에 직접 삽입합니다.
PHP파일로 include 하면 쿠키생성이 안되어서 축소/확대가 온전히 작동하지 않습니다. -->
<script language="javascript" src="FontResize.js"></script>

<a href="javascript:scaleFont(+1);">글자 확대</a>
<a href="javascript:scaleFont(-1);">글자 축소</a>

<div id=contents>
<table width="100%" cellspacing="0" cellpadding="0">
  <tr>
       <td><span id="writeSubject">하나씩만 적용1</span></td>
  </tr>
  <tr>
    <td>
      <span id="writeContents">하나씩만 적용2</span>
    </td>
  </tr>
</table>
</div>

<div id="commentContents">
<table width="100%" cellspacing="0" cellpadding="0">
  <tr>
       <td><div>모두 적용1</div></td>
  </tr>
  <tr>
    <td><div>모두 적용2</div></td>
  </tr>
</table>
</div>
추천
1

댓글 2개

리프래쉬 또는 쿠키값이 내컴퓨터에 남아 있을때 기존 폰트 크기 설정이 잘안되네요. 킁킁...

아 drawfont 로드 시키면 되는군요 그누보드 스킨에 이미 설정되어 있넹..
호출한것과 onload의 차이점이 먼지 찾아 봐야 겠군요.
전체 3,313 |RSS
그누4 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT