[JS] 모바일 크롬브라우저 당겨서 새로고침 끄기

최근에 워드프레스 테마나 다른 원페이지 슬라이더 작업을 좀 진행 중인데 모바일 크롬 브라우저에서 아래로 당기게 되면 페이지가 새로 고침되는 경우가 있어 은근 스트레스였는데 이걸 끌 수 있는 스크립트가 있어 공유한다. 위 자바스크립트 코드를 적용해주면 터치를 아래로 당겨도 새로 고침이 되지 않는다. 그리고 추가적으로 원페이지 슬라이더 환경에서 위로 터치하게 되면 페이지 하단에 흰 색이든 바운스라고 해야할까? […]

Read More

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

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

Read More

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

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

Read More

모바일 Safari에 touchmove 이벤트 추가하기

모바일 환경에서 사용할 플로팅 메뉴를 작업하는 중에 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

Read More

모바일 플로팅 메뉴 작업 중

쉽게 생각하고 덤벼들었다가 3일째 삽질 중이다. 얼추 기능을 넣어 마무리하면 되겠구나 싶었는데 여러 기기에서 테스트를 해보니 문제가.. ㅠㅠ 여전히 수정 중인데 아래 이미지처럼 상하단 메뉴가 스크롤 이동 때 사라졌다가 다시 제 위치에 표시되도록 하는 것인데 생각보다 쉽지가 않다. 퇴근 길에 문득 떠오른 아이디어가 있어 잠깐 작업을 해봤는데.. 내일 출근해서 좀 더 다양한 기기에서 테스트를 해봐야 […]

Read More