웹개발에 필요한 정보: HTML, CSS, JavaScript, etc.
안녕하세요 제가 앞에 작성한 "모바일 브라우저에서 글 내용에 따라 자동으로 늘어나는 textarea 만들기" 는 글을 작성한 만큼 textarea의 크기가 늘어납니다. 하지만 작성한 글을 지워서 내용이 줄어들었을 때 textarea의 크기는 줄어들지 않고 계속 커진 상태로 남아 있습니다. 이점을 수정해서 글 내용이 많아질 때는 textarea의 크기가 커지고 글 내용이 줄어들었을 때는 textarea의 크기도 작아지도록 만들어봤습니다. 이것을 구현하기 위해 어떻게 해야할지 생각이 잘 안떠올랐는데 검색을 해보니 구현하신 분이 있어서 그 분의 아이디어를 그대로 가져와서 만들었습니다. 그 분의 글은 http://james.padolsey.com/javascript/jquery-plugin-autores... »
textarea의 크기보다 더 많은 내용의 글을 작성할 경우 textarea의 크기는 유지된 채로 내부에 스크롤바가 생기게 됩니다. 그런데 이와 같이 하지 않고 사용자가 입력한 글의 내용만큼 textarea 의 높이가 늘어나서 스크롤바가 생기지 않게 하고 싶은 경우가 있습니다. 그럴 때는 textarea에 글자가 입력될 때마다 textarea의 clientHeight와 scrollHeight를 비교해서 scrollHeight가 더 큰경우(textarea의 크기보다 글 내용이 더 커지는 경우입니다.) clientHeight의 크기를 늘려주는 방법을 사용하게 됩니다. 이와같은 원리를 사용하여 jQueryMobile 같은 경우에는 아래와 같은 코드로 이 기능을 처리하고 있습니다. // 아래는 jQueryM... »
HTML 엘리먼트의 크기를 구하는 방법은 여러가지가 있습니다. 엘리먼트의 DOM객체가 element 라는 변수에 저장되어 있다고 가정하고 말씀을 드리면, 먼저, CSS로 크기가 지정되어 있는 엘리먼트라면 element.style.width / element.style.height 로 접근해서 CSS 값을 구해올 수 있습니다. 그리고 CSS와 지정 여부와 관계없이 DOM 차원에서 엘리먼트의 크기를 잴 수 있는 프로퍼티들을 제공하고 있는데요 border와 padding, scrollbar 등의 포함 유무에 따라 아래와 같은 속성들로 구분되어 있습니다. clientWidth / clientHeight scrollWidth / scrollHeight offsetWidth / offsetHeight 위 프로퍼티들은 ... »
모바일 웹 개발을 할 때 브라우저의 주소창이 안보이도록 웹페이지를 위로 끌어올려야 할 경우가 있습니다. 그 때 사용할 수 있는 소스코드입니다. [데모보기] http://codefactory.kr/demos/cfslidepanel // 모바일 브라우저 주소창 안보이게 하기 (function() { function hideAddressBar() { if (document.height <= window.outerHeight) return; // 웹페이지의 높이가 화면높이보다 작을 때는 실행할 필요가 없으므로 종료 var scrollTimer = setInterval(function() { if ( ! pageYOffset) { // 모바일 브라우저에서 주소창이 보이고 있을 때는 pageYOffset = 0... »
모바일 기기에서 터치 swipe(플리킹)로, PC에서는 mousemove로 패널을 좌우 슬라이딩 할 수 있게 해주는 plugin 입니다. http://m.naver.com 이나 http://m.daum.net 에서 기사 목록을 터치로 좌우로 움직일 수 있는 것과 같은 기능입니다. 아직 버그가 좀 남아있는 상태인 것 같습니다. 혹시 발견하시면 말씀해주세요..^^ 이 plugin을 사용하기 위해서 제가 전에 만든 cfSlider plugin을 같이 사용하고 있습니다. cfSlider: https://github.com/codefactory/cfSlider [소스코드 및 데모보기] https://github.com/codefactory/cfSlidePanel [데모보기] ---------... »
Recent Comments