JavaScript를 이용하여 터치기기에서 좌우 swipe 방향을 체크하는 개념적인 방법이다. 기본적인 아이디어 수준의 코드이기 때문에 실제 사용하는 것은 무리가 있을 것이라 생각한다. 사용자가 기기에 터치를 하면 touchstart 이벤트를 이용해 터치가 시작된 좌표를 기록해둔다. 그런 다음 touchend 이벤트를 이용해 터치가 끝났을 때 시작점의 좌표와 종료점의 좌표를 비교해서 swipe 방향을 체크하는 것이다. iOS 기기의 Safari 브라우저에서는 터치가 끝난 …
이전에 모바일에서 사용할 플로팅 메뉴 작업을 하고 있다고 했는데 그 작업이 어느정도 마무리 됐고 코드도 정리가 돼서 드디어 공개를 하고자 한다. 대단한 스크립트는 아니지만 혼자 생각하고 고민해서 의도했던대로 완료가 됐다는 것은 아무리 사소한 것이라도 기분이 좋을 수 밖에 없다. 이런 것때문에 개발에 몰두하게 되는 것인지도 모르겠다. 모든 모바일 기기에서 테스트한 것은 아니지만 다른 분들의 도움을 받아 …
모바일쇼핑몰에서 사용할 기능을 개발하는 중에 모바일 기기에서 좌우로 swipe에 대응하는 이벤트가 필요하게 됐다. jQuery Mobile 등의 라이브러리를 사용하면 되겠지만 단지 swipe 이벤트때문에 덩치가 큰 라이브러리를 사용하는 비효율적인 것 같아 다른 jQuery 플러그인을 찾아보니 아래와 같은 플러그인이 존재했다. jQuery.event.move jQuery special events movestart, move and moveend for tracking touch and mouse moves, throttled to browser animation …
테마를 변경하고 해야지.. 하고 생각만 하고 있던 것은 오늘 생각난 김에 해버리고 말았다. 워드프레스에 대해서 아직 잘 모르기 때문에 시간이 무척 오래 걸리긴 했지만 무사히 기능을 추가했다. 이전 테마의 코드도 참고하면서 작업을 했는데 간만에 하려고 하니까 역시 쉽지는 않았다. 포스트 하단에 보면 이미지와 같은 리스트가 노출되고 있는데 현재 포스트와 동일한 카테고리 포스트 중에서 가장 최근의 …
모바일 환경에서 사용할 플로팅 메뉴를 작업하는 중에 iPad와 iPhone 의 Safari에는 touchmove 이벤트가 없어 약간 어려움이 있었는데 아래와 같은 코드를 추가해 touchmove 이벤트를 추가했다. 대부분의 안드로이드 환경에서도 잘 적용된다고 한다. <script> document.addEventListener(‘touchmove’, function(event) { alert(“touchmove”); }, false); </script> 참고자료 : https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html