본문 바로가기

프로그래밍

jQuery UI drag and drop(드래그 앤 드롭) 예를 들어 ul, li가 있다. 이때 li에 드래그 앤 드롭 이벤트를 주고 싶다면그 상위인 ul에 이벤트를 주자. $("ul").sortable({ stop: function() { console.log("done"); } }); $("ul").disableSelection(); 너무 쉬워서 깜놀 ㅇ0ㅇ더 자세한 옵션은 jQuery ui 공식 홈을 참고하자. 더보기
CSS 아이폰 사파리 스크롤 가속화 div 등의 태그에 직접적으로overflow: auto나 scroll 을 넣어 스크롤을 만들면 iOS 사파리 브라우저에서넣어주는 스크롤 가속화가 동작하지 않게 될 수 있다! 가속화를 동작시키는 방법은 div {overflow: auto; -webkit-overflow-scrolling: touch;} overflow가 들어있는 요소의 CSS에저것만 추가해주면 끄읕~!★ 더보기
setTimeout() 으로 이벤트를 줬으면 clearTimeout()을 해줘야 한다 setTimeout을 써서 1.5초 후 box 크기를 다르게 주는 방식으로애니메이션을 만드는데 문제는 애니메이션을 보기 전에이벤트를 종료해버릴 때 발생했다!시간차 공격이라할까.. -ㅅ- 그래서 이벤트를 종료할 때 clearTimeout()을 시켜줬다. // setTimeout은 id값을 가지기 때문에 우선 초기화var setTimeoutID = null; // setTimeout을 setTimeoutID 변수에 담기setTimeoutID = setTimeout( function() {event }, 1500); // 원하는 event에서 setTimeout 없애기 clearTimeout(setTimeout의 ID값)event {clearTimeout(setTimeoutID);} 참고 사이트 :setTim.. 더보기
hover 할 때 텍스트가 위아래로 왔다갔다.. 선명했다 흐려졌다 하는 문제 해결 HTML, CSS로 인해 생기는 알 수 없는 문제는 정말되도록이면 만나고 싶지 않다! 태그를 잘못 썼든지 닫지 않았든지CSS를 어떻게 중첩으로 먹여 그랬든지.. 아아.. 알 수 없다. 아무튼 사건은 이랬다. div 박스에 이미지를 넣고 hover 하면흐려지면서 한가운데 텍스트가 보이는그런 흔한 이펙트 효과를 구현하고 있었다. 그런데 CSS를 다 주고 나서 hover를 했더니텍스트가 위아래로 춤을 추는 게 아닌가?! -ㅅ- 그 구조를 간단히 하자면 이러했다. HTML text CSS .text,.curtains {visibility: hidden;opacity: 0; .box:hover .text,.box:hover .curtains {visibility: visible;opacity: 0;} HTML t.. 더보기
CSS3로 영상 풀스크린 만들기 - 어떤 상황에서도 예쁘게 비율대로! Keyword - css youtube background cover HTML CSS * { box-sizing: border-box; }.video-background { background: #000; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -99;}.video-foreground,.video-background iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;}#vidtop-content {top: 0;color: #fff;}.vid-info { position: absolute; top: 0; right:.. 더보기
jQuery Mobile click event not working! 허무한 해결 제이쿼리 모바일 - 클릭 이벤트가 동작하지 않아요! "처음 들어가면 event가 실행 안 하는데 새로고침하면 동작해요."하는 분들은 이 글을 보셔야 합니다. 저도 그랬거든요.. 모바일 버전의 메인만 jQuery Mobile을 이용했다.물론 내가 만든 건 아니고 만들어져 있는데 자꾸 삐그덕대서 손을 봤다. 표면적인 문제는 사이드 메뉴를 여는 버튼의 click event가 작동하지 않는 문제였는데근본적인 원인은 jQuery Mobile을 써서 특수한 상황이 만들어졌기 때문이었다.. 그래서 일단 구글링을 하는데 jQuery Mobile click event 까지만 쳐도not working이 뜨는 것을 보니.. 나같은 사람이 많구나 했다.역시나 스택오버플로우에 질문이 많이 올라와있었다. 휴...... 거기서 알.. 더보기