이전 포스트 [jQuery] 위로 롤링되는 이미지 코드에 애니메이션 정지 버튼을 추가하고 설정된 interval을 초기화해서 애니메이션이 더이상 실행되지 않도록 해야했다. 완전한 코드는 아니고 이해를 돕기 위해 아래와 같은 구조의 jQuery plugin 코드를 작성했다. <script> (function($) { var methods = { init: function(option) { var settings = $.extend({ interval: 5000, duration: 800 }, option); var intv; intv = setInterval(roll_animate, …
어제 작성했던 [JQuery] 위로 롤링되는 코드 를 약간 수정한 것이다. 스크립트 코드를 jQuery Plugin 형식으로 변경한 것이다. $.fn 으로 시작되는 코드를 봤을 때 ‘저건 뭔가?’ 이렇게 생각을 했는데 막상 사용해보니까 상당히 직관적이고 편한 방법이라는 생각이 들기 시작했다. 앞으로는 이런 식으로 작업을 해야겠다는 생각도 들었는데.. 어찌보면 class와 비슷한 개념이라 생소했는데 사용해보니까 모른척 넘어가야할 대상은 아닌 것 같다는 생각이 …
위 이미지와 같이 위에서 순차적으로 내려오는 이미지를 구현하기 위한 코드이다. 개발 중인 쇼핑몰 솔루션에 적용예정인데 이런 기능을 하는 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> …
오랜만에 만들어본 jQuery 롤링 코드이다. 아래와 같은 문서구조에서 li 가 위로 롤링되는 것이다. <ul> <li> <div>이미지</div> <div>이미지</div> <div>이미지</div> </li> <li> <div>이미지</div> <div>이미지</div> <div>이미지</div> </li> </ul> 그리고 아래는 css 코드이다. 설명을 위해 간단하게 작성했기 때문에 실제 적용은 안될 수 있다. ul { position: relative; width: 700px; height: 300px; overflow-y: hidden; } li { position: absolute; top: …
오늘 마무리 작업 중인 쇼핑몰 솔루션을 테스트하는 과정에서 특정 안드로이드 기기에서 상품의 옵션을 선택했을 때 추가가 되지 않는 문제가 발견되어 급하게 수정을 했다. select 를 이용해 옵션을 선택하면 선택된 옵션이 동적으로 추가되는 것인데 일부 기기에서 옵션이 자동으로 추가가 되지 않았다. 웹접근성을 맞추기 위해 mousedown 이벤트가 일어나면 option_add 라는 변수를 true로 설정하도록 한 코드에서 문제가 생긴 …