네이버 웹툰에 있는 만화에 링크를 걸려다 마우스 우클릭이 동작을 안하길래, 구글링을 했는데 거기서 나온 스크립트도 네이버 웹툰에서는 제대로 동작을 안했다.
조금 살펴보니 개선할 여지가 있길래 약간의 코드를 더해봤다. 절대 네이버 웹툰에 있는 이미지를 링크하기 위한 목적이었던 건 아니다.
This entry was posted by 정태영 on Monday, August 24th, 2009 at 1:51 AM and is taged under accessibility, javascript, mouse, web, www.
같은 name을 가지는 체크박스들 중 2개 이상이 선택되지 못하도록 만들기 위해 작성했던 스크립트인데, 혹시 필요하신 분이 있으실까 해서 올려봅니다.
function remain_two_obj(prefix){ this.old = new Array(); this.prefix = prefix; this.remain_two = function(cur){ items = document.getElementsByName(this.prefix + '[]'); for( i = 0, count = 0 ; i < items.length; i++ ) if( items[i].checked ) count++; if( count > 0 && cur.checked == false && this.old[0] == cur.value ) this.old[0] = this.old[1]; if( cur.checked == false ) return; if( count < 2 ) this.old[count] = cur.value; else { this.old[0] = this.old[1]; this.old[1] = cur.value; items = document.getElementsByName(this.prefix + '[]'); for( j = 0 ; j < items.length ; j++ ){ if( items[j].value != this.old[0] && items[j].value != this.old[1] ) items[j].checked = false; } } } } var cbox = new remain_two_obj('cbox'); |
필요한 개수만큼 remain_two_obj 를 선언하고 name prefix를 등록해주면 됩니다. 그런 체크 박스들에 onclick 이벤트를 등록해주면 끝!
<ul> <li><label><input type="checkbox" name="cbox[]" value="0" onclick="cbox.remain_two(this)" /> 0</label></li> <li><label><input type="checkbox" name="cbox[]" value="1" onclick="cbox.remain_two(this)" /> 1</label></li> <li><label><input type="checkbox" name="cbox[]" value="2" onclick="cbox.remain_two(this)" /> 2</label></li> <li><label><input type="checkbox" name="cbox[]" value="3" onclick="cbox.remain_two(this)" /> 3</label></li> <li><label><input type="checkbox" name="cbox[]" value="4" onclick="cbox.remain_two(this)" /> 4</label></li> <li><label><input type="checkbox" name="cbox[]" value="5" onclick="cbox.remain_two(this)" /> 5</label></li> <li><label><input type="checkbox" name="cbox[]" value="6" onclick="cbox.remain_two(this)" /> 6<label></li> <li><label><input type="checkbox" name="cbox[]" value="7" onclick="cbox.remain_two(this)" /> 7</label></li> </ul> |
쓰기 편하게 만드려고, class 화 해봤는데 참 개념이 독특하네요 자바스크립트는 -_-! function 으로 object를 만들어야 한다니…
This entry was posted by 정태영 on Monday, June 1st, 2009 at 8:33 PM and is taged under checkbox, css, html, input, javascript.
아래와 같은 html 이 있을 경우 ‘first h2 in first h1′ 앞에는 1.1 이 아닌 1이라는 번호가 출력되게 됩니다.
<ol> <li> <h1>first h1</h1> <ol> <li><h2>first h2 in first h1</h2></li> <li><h2>second h2 in first h1</h2></li> </ol> </li> <li> <h1>second h1</h1> <ol> <li><h2>first h2 in second h1</h2></li> <li><h2>second h2 in second h1</h2></li> </ol> </li> </ol> |
하지만 요청에 의해 ‘1. first h2 in first h1′ 이 아닌 ‘1.1. first h2 in first h1′ 식의 출력이 필요하게 되었는데, css의 generated content와 counter는 일부 브라우져에서 밖에 지원하지 않는다는 제약이 있습니다.[1]
당연히 이를 위한 스크립트가 있을 줄 알았는데, 제 검색 능력 부족인지 검색이 잘 안되네요. 아쉬운 사람이 우물을 판다고 간단한 스크립트를 작성해보았습니다.
function multilevellist(){ items = document.getElementsByTagName('li'); var h2 = 0; var h3, h4; for( i = 0 ; i < items.length ; i++ ){ if( items[i].parentNode.tagName == 'ul' || items[i].parentNode.tagName == 'UL' ) continue; childs = items[i].childNodes; for( j = 0 ; j < childs.length ; j++ ){ if( childs[j].tagName == 'H2' || childs[j].tagName == 'h2' ){ h2++; childs[j].innerText = h2 + '. ' + childs[j].innerText; h3 = 0; } if( childs[j].tagName == 'H3' || childs[j].tagName == 'h3' ){ if( h2 < 2 ) continue; h3++; childs[j].innerText = h2 + '.' + h3 + '. ' + childs[j].innerText; h4 = 0; } if( childs[j].tagName == 'H4' || childs[j].tagName == 'h4' ){ h4++; childs[j].innerText = h2 + '.' + h3 + '.' + h4 + '. ' + childs[j].innerText; h5 = 0; } } } } |
Ordered List 안에 있는 h1, h2, h3, h4 에 대해 1, 1.1, 1.1.1, 1.1.1.1 식으로 번호를 메겨주는 역할을 하는 스크립트이며 body의 onload 이벤트에 multilevellist() 함수를 연결해주기만 하면 알아서 작동합니다.
오늘의 삽질 끝!!
덧: 보니까 parentElement가 IE에선 동작하질 않네요. parentNode로 대체 했습니다.
This entry was posted by 정태영 on Friday, May 29th, 2009 at 5:29 PM and is taged under automatic, css, element, heading, html, javascript, list, multi-level, numbering.
얼마 전 Viz란 닉네임을 사용하시는 분이 OpenWeb의 ‘Frame: 웹페이지 주소 감추기‘란 글에 현 체제(ActiveX체제)가 갖는 장점에 대한 코멘트를 남기셨습니다. 대략 그 내용은 다음과 같은데요.
ps. 최근 몇몇 글에서 조금은 전문적인 시각에서 현 체제에도 장점이 전혀 없는 것은 아니다.. 라고 주장했더니 부끄러움을 호소하는 글도 심히 반박당하는군요 -_-
ps2. 금융권 쪽에서 SSL을 통해 암호화 하는 방향으로 변화하기 위해서는 일단 SSL가속기를 사야하는 추가적인 부담 and/or 화려한 홈페이지를 전반적으로 수수하게 변경해야 하는 문제가 있습니다. 쇼핑몰의 경우 전체 사이트에서 ‘로그인’과 ‘결제정보 입력’ 등의 아주 일부분만 보안연결이 필요한 반면 금융권 사이트의 경우 거의 모든 부분이 보안연결이 필요합니다.
ps3. SSL이 요구하는 연산비용은 만만한게 아닙니다.
This entry was posted by 정태영 on Monday, March 16th, 2009 at 1:26 AM and is taged under ajax, banking, encryption, internet, javascript, JSONP, openweb, seure, web.