모바일 브라우저에서 Back 버튼 클릭시 페이지 강제 리로딩 하기

모바일 쇼핑몰 솔루션 작업을 진행하다 보니 새로운 것도 참 많이 알게 된다. swipe 이벤트를 이용해서 이전, 다음 상품을 보여주려고 스크립트를 작성하고 있는데 글쎄 생각지도 못했던 캐시 문제가 발생했다. 왼쪽으로 swipe 하면 화면 전체가 왼쪽으로 애니메이션으로 이동하도록 하는데 기존 페이지의 컨텐츠를 복제해서 레이어를 생성하고 이 레이어가 이동하는 것이다. 그동안 원래 컨텐츠의 모든 엘리먼트는 hidden으로 처리하고 말이다. […]

Read More

JavaScript를 이용해 좌우 swipe 방향 알아내기

JavaScript를 이용하여 터치기기에서 좌우 swipe 방향을 체크하는 개념적인 방법이다. 기본적인 아이디어 수준의 코드이기 때문에 실제 사용하는 것은 무리가 있을 것이라 생각한다. 사용자가 기기에 터치를 하면 touchstart 이벤트를 이용해 터치가 시작된 좌표를 기록해둔다. 그런 다음 touchend 이벤트를 이용해 터치가 끝났을 때 시작점의 좌표와 종료점의 좌표를 비교해서 swipe 방향을 체크하는 것이다. iOS 기기의 Safari 브라우저에서는 터치가 끝난 […]

Read More

jQuery 모바일 브라우저 상단 플로팅 메뉴

이전에 모바일에서 사용할 플로팅 메뉴 작업을 하고 있다고 했는데 그 작업이 어느정도 마무리 됐고 코드도 정리가 돼서 드디어 공개를 하고자 한다. 대단한 스크립트는 아니지만 혼자 생각하고 고민해서 의도했던대로 완료가 됐다는 것은 아무리 사소한 것이라도 기분이 좋을 수 밖에 없다. 이런 것때문에 개발에 몰두하게 되는 것인지도 모르겠다. 모든 모바일 기기에서 테스트한 것은 아니지만 다른 분들의 도움을 받아 […]

Read More

[jQuery] 위로 롤링되는 이미지

어제 작성했던 [JQuery] 위로 롤링되는 코드 를 약간 수정한 것이다. 스크립트 코드를 jQuery Plugin 형식으로 변경한 것이다. $.fn 으로 시작되는 코드를 봤을 때 ‘저건 뭔가?’ 이렇게 생각을 했는데 막상 사용해보니까 상당히 직관적이고 편한 방법이라는 생각이 들기 시작했다. 앞으로는 이런 식으로 작업을 해야겠다는 생각도 들었는데.. 어찌보면 class와 비슷한 개념이라 생소했는데 사용해보니까 모른척 넘어가야할 대상은 아닌 것 같다는 생각이 […]

Read More

[jQuery] 위에서 순차적으로 내려오는 이미지

위 이미지와 같이 위에서 순차적으로 내려오는 이미지를 구현하기 위한 코드이다. 개발 중인 쇼핑몰 솔루션에 적용예정인데 이런 기능을 하는 jQuery 플러그인 등이 있지만 간단하게 jQuery의 each(), animate(), delay() 를 사용하면 구현할 수 있다. 약간의 css 까지 더해지면 더할나위 없을지도 모른다. 아래는 간단한 문서구조이다. <ul> <li class=”first”> <div>이미지</div> <div>이미지</div> <div>이미지</div> </li> <li> <div>이미지</div> <div>이미지</div> <div>이미지</div> </li> </ul> […]

Read More