<script> $(window).resize(function() { alert(“resizing”); }); </script> 위와 같은 jQuery 코드를 작성했을 경우 브라우저 창의 크기를 마우스 드래그로 변경시킬 때 계속해서 alert 창이 나타나게 될 것이다. 이럴 경우 윈도우 리사이즈 이벤트가 끝났을 때 즉 더 이상 크기 변화가 없을 때 함수를 실행하도록 하려면 어떻게 하면 좋을까? 여러 방법이 있겠지만 아래는 자바스크립트의 setTimeout 메소드를 이용해서 리사이즈 이벤트가 …
뭔가 남들이 안하는 걸 하는 것 같아서 처음엔 좋았지만.. 점점 지쳐가는 모습을 보면서 ‘이거 꼭 해야하나?’ 하는 생각이 하루에도 몇번씩 들었다. 웹과 관련된 일을 한지가 그렇게 오래된 것은 아니지만.. 생각해보면 정말 다양한 일을 해본 것 같다. 기본도 없이 실무에 부딪히며 하나씩 만들어가면서 이전에는 그렇게 어렵게 느껴졌던 것들도 이젠 제법 잘 만들어 내는 걸 보면 스스로가 …
jQuery .data()를 이용해 텍스트 노드를 포함한 엘리먼트의 기본 폰트 사이즈를 저장해놓는 코드이다. 이 값을 이용해 문서의 폰트 사이즈 변경에 사용하면 폰트 사이즈 변경으로 인한 상속의 문제도 해결할 수 있을 것이라 기대가 된다. function save_default_font_size($el) { $el.each(function() { // 텍스트노드 있는지 체크 var text = $(this).contents().filter(function() { return this.nodeType == 3; }).text().replace(/s*/, “”); if(text.length) { $(this).data(“fs”, $(this).css(“font-size”)); } …
어제 작성했던 특정 엘리먼트의 하위 엘리먼트 폰트사이즈를 일정한 비율로 변경하기를 수정해서 텍스트노드를 포함하고 있을 경우에도 처리가 되도록 수정을 했다. 이 코드 역시 완벽하다고 할 수는 없고.. 특정 상황에서는 폰트 사이즈가 변경되지 않는 경우도 생길 수가 있다. 배포 예정 솔루션에 맞춰서 작업을 해서 다른 경우는 수정이 힘들 수도 있다. /** * 텍스트 리사이즈 **/ function font_resize(id, act) …
인터넷 사이트를 보면 텍스트 크리를 크게하거나 작게하는 버튼을 본 적이 있다. 지금 작업 중인 웹접근성 게시판 솔루션에도 이 기능을 적용해야 하는데.. 요구 사항이 일률적인 폰트사이의 변경이 아닌 각 엘리먼트 마다 일정한 비율로 텍스트의 사이즈를 변경해달라는 것이었다. 쉽지 않을 것이라 생각은 했지만.. 꽤 많은 삽질을 한 후에 아래의 코드를 얻을 수 있었다. 특정 엘리먼트의 하위 엘리먼트들을 모두 체크해서 각각의 폰트 …