최근에 워드프레스 테마나 다른 원페이지 슬라이더 작업을 좀 진행 중인데 모바일 크롬 브라우저에서 아래로 당기게 되면 페이지가 새로 고침되는 경우가 있어 은근 스트레스였는데 이걸 끌 수 있는 스크립트가 있어 공유한다. 위 자바스크립트 코드를 적용해주면 터치를 아래로 당겨도 새로 고침이 되지 않는다. 그리고 추가적으로 원페이지 슬라이더 환경에서 위로 터치하게 되면 페이지 하단에 흰 색이든 바운스라고 해야할까? …
새로운 블로그를 세팅했으니 구글 Pagespeed 체크는 필수(?)가 아닐까? 그래서 dealinside.net 의 pagespeed 테스트를 해봤다.
가끔 포스트에 유튜브 동영상을 첨부하곤 하는데 오늘 모바일로 접속해서 확인해보니 사이즈가 변경되지 않는 것을 확인하고 이전에 만들었던 플러그인 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 …
이전 포스팅 jQuery 모바일 브라우저 상단 플로팅 메뉴에 이어서 이번엔 모바일 브라우저 하단 플로팅 메뉴이다. 상단 플로팅 메뉴와 같이 모바일 브라우저에서 화면 하단에 항상 메뉴가 표시되도록 하는 것이다. css와 html 문서 코드는 이전 상단 플로팅 메뉴 포스트를 참고하면 된다. 다른 것은 생략하고 js 코드만 첨부한다. (function($) { $.fn.bottomFloatMenu = function(timeout, duration, interval, count) { var cfg …
모바일 쇼핑몰 솔루션 작업을 진행하다 보니 새로운 것도 참 많이 알게 된다. swipe 이벤트를 이용해서 이전, 다음 상품을 보여주려고 스크립트를 작성하고 있는데 글쎄 생각지도 못했던 캐시 문제가 발생했다. 왼쪽으로 swipe 하면 화면 전체가 왼쪽으로 애니메이션으로 이동하도록 하는데 기존 페이지의 컨텐츠를 복제해서 레이어를 생성하고 이 레이어가 이동하는 것이다. 그동안 원래 컨텐츠의 모든 엘리먼트는 hidden으로 처리하고 말이다. …