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

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

Read More

jQuery 플러그인 fitVideo.js를 워드프레스에서 사용하기

가끔 포스트에 유튜브 동영상을 첨부하곤 하는데 오늘 모바일로 접속해서 확인해보니 사이즈가 변경되지 않는 것을 확인하고 이전에 만들었던 플러그인 fitVidoe.js 를 워드프레스에 적용하기로 했다. 우선 아래는 이전에 만들었던 fitVideo.js 의 소스코드이다. (function($) { $.fn.fitVideo = function(option) { var selectors = [ “iframe[src*=’player.vimeo.com’]”, “iframe[src*=’youtube.com’]”, “iframe[src*=’youtube-nocookie.com’]”, “iframe[src*=’naver.com’]”, “iframe[src*=’daum.net’]”, “iframe[src*=’pandora.tv’]”, “iframe[src*=’nate.com’]”, “object”, “embed” ]; var cfg = { selectors […]

Read More

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

이전 포스팅 jQuery 모바일 브라우저 상단 플로팅 메뉴에 이어서 이번엔 모바일 브라우저 하단 플로팅 메뉴이다. 상단 플로팅 메뉴와 같이 모바일 브라우저에서 화면 하단에 항상 메뉴가 표시되도록 하는 것이다. css와 html 문서 코드는 이전 상단 플로팅 메뉴 포스트를 참고하면 된다. 다른 것은 생략하고 js 코드만 첨부한다. (function($) { $.fn.bottomFloatMenu = function(timeout, duration, interval, count) { var cfg […]

Read More

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

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

Read More