jQuery에서 터치 이벤트를 사용하는데 계속 undefined가 떴다.

분명 예전에 사용했던 코드 그대로 사용했는데...그 때는 잘 됐었는데....


1. 예전에 사용한 코드 (event.touches undefined)

$(document).on("touchstart", function(e){
     console.log(e.touches[0]) // undefined
});


2. event.touches의 사용이 가능한 코드

$(document).on("touchstart", function(e){
     console.log(e.originalEvent.touches) 
     // TouchList{0:Touch, length:1, item:function}
});


출처 : http://stackoverflow.com/questions/7923609/event-touches-is-always-undefined

Posted by august5pm
,

오늘 프로젝트를 진행하면서 최초 init()이 실행되고, 


jQuery에서 $(selector).scrollTop()을 사용해야 하는 경우가 있었습니다.


그러나 아무리 value를 넣어도 적용되지가 않아 OTL


머리를 한참 쥐어 뜯다가 혹시...혹시!!!! 


setTimeout(function(){}, delay)으로 딜레이를 주었더니 움직이네요.


아마도 이미지가 들어간 컨텐츠다 보니까 이미지가 로딩되기 이전에 scrollTop()을 실행하고 있어서


컨텐츠의 높이값을 제대로 가져오지 못하다보니 적용되지 않았던 것 같습니다.


가장 확실한 방법은 컨텐츠가 모두 로딩 완료 되었을 때 적용해 주는 것인 것 같네요.

'프로그래밍 > tip' 카테고리의 다른 글

[tip] GreenShock ScrollToPlugin  (0) 2015.02.06
[tip] 일차함수  (0) 2015.02.05
[tip] SVN E160028 오류  (0) 2015.01.27
[tip] SVN E220001 오류  (0) 2015.01.27
[tip] 웹스톰에서 svn checkout 에러 발생할 때  (0) 2015.01.27
Posted by august5pm
,


(이미지출처 - 한빛미디어 :  http://www.hanb.co.kr/)







 


웹 개발자, 퍼블리셔, 액션스크립터 등의 업무를 담당하고 있는 사람들이라면 'jQuery' 라는 단어를 한 번쯤은 들어보고 공부하거나 이미 실무에서 사용 중인 사람들도 많을 것이라 생각합니다. 저도 앞서 말씀 드린 직군에 있다보니 자연스럽게 'jQuery'라는 단어를 접하고 관심을 가지게 되었습니다. 그리고 조금 늦은 감이 없지 않지만 차후 실무에 사용 될 것을 대비해야 겠다는 생각을 가지고 구글신과 레퍼런스를 통하여 'jQuery'에 대해 이것 저것 공부 하였습니다. 공부를 하다보니 기본에 대한 갈증을 느끼게 되어 기본기를 닦으며 실무에 필요할 만한 책을 찾던 중에 Head First 시리즈의 jQuery를 접하게 되었습니다.


이 책의 장점으로는


첫째, Head First 시리즈를 접해 본 사람에게는 친숙한 구성이며, 학습과 동시에 자신을 테스트 할 수 있는 질문이 많다.


이 책 전에 Head First 시리즈의 디자인 패턴 책과 통계학 책을 접해 보았기 때문에 책의 구성은 상당히 친숙 하였습니다. 이전 시리즈와 마찬가지로 각 장마다 앞에서 설명을 하고 바보같은 질문은 없습니다, 연필을 깎으며, 연습문제 등으로 앞에서 배운 내용을 토대로 스스로를 테스트 할 수 있는 기회를 부여합니다. 그리고 이 책에서 재미있는 구성 중에 하나라고 생각이 들었던 것은 jQuery 코드 자석 입니다. 자신이 만들어야 할 코드들을 제시하고 그 중 몇 군데를 지운 뒤에 랜덤으로 나열 되어 있는 코드를 집어 넣도록 하는 낱말 맞추기 게임과 같은 구성입니다. 이 문제를 풀어 봄으로써 자신이 만들어야 할 코드에 대해 얼마나 이해하고 있는지를 가늠할 수 있었습니다.



둘째, 이야기가 있다.


누군가가 자신에게 프로젝트 의뢰를 하고, 요청에 맞게 문제를 해결해 나가도록 구성되어 있습니다. 예를 들면 '웹빌 식당에서 대화형 메뉴를 만들고 싶어 합니다' 라는 식의 마치 클라이언트가 프로젝트를 의뢰를 하면 요청한 내용을 가지고 하나하나 해결 해 나가는 방법을 가르쳐 주고 있습니다. 새 사이트 제작, 유지보수 등의 실제 프로젝트를 진행하면서 일어날 법한 일로 재미요소를 더함으로써 지루함 보다는 흥미로운 방식으로 학습을 전개 하고 있습니다. 또한 난롯가 담소 에서의 CSS 선택자와 jQuery 선택자의 주고 받는 대화나, 헤드퍼스트가 이벤트를 인터뷰 하듯 주고 받는 내용들은 눈에 보이지 않아서 이해하기 어려운 것들을 의인화 하여 좀 더 재미있고 쉽게 이해하는데 도움을 많이 주었습니다.



셋째, 기본부터 고급까지


첫장에서는 HTML, CSS, DOM 등의 기본적인 내용을 다루고 있습니다. 기본적인 내용이지만 '아 이래서 이렇게 사용하는 거구나' 하는 내용들이 종종 있었습니다. 예를 들면 '<script></script> 태그를 <head></head> 태그 사이에 쓰지 않고 </body> 태그 바로 앞에 쓴 이유'와 'jQuery 코드를 분리하게 되면 페이지를 불러오는 속도가 왜 빨라지는 것인가' 등의 내용입니다. 평소에는 무심코 지나쳤던 내용들이었는데 나름의 이유가 있어서 그렇게 사용되었다는 것을 알 수 있었습니다. 뒷장에서는 Ajax, JSON, PHP, MySQL등을 활용한 클라이언트와 서버의 데이터를 다루는 고급적인 내용을 담고 있습니다. jQuery에 내장된 메서드를 통해서 클라이언트와 서버간에 얼마나 손쉽게 데이터를 주고 받을 수 있는지에 대한 내용과 PHP와 MySQL을 통한 데이터베이스 접근방식은 어떻게 되는지에 대해서 간단하게 나마 배울 수 있었습니다.


이 책은 저 처럼 jQuery에 대해 관심이 있고, 공부를 시작해 보려는 분들이나 jQuery에 대해 제대로 알고 싶으신 분들께 추천드리고 싶은 책입니다. Head First 시리즈는 항상 가볍고 유쾌한 것 같으면서도 무겁고 진지하지 않나 생각 됩니다. 그래도 항상 기대감을 갖게 되고, 많은 도움을 받게 되는 것 같습니다. 이번 Head First jQuery 책도 책상의 한켠에 꽂아 두고 프로젝트 진행하면서 자주 뽑아 보지 않을까 싶네요.ㅎㅎㅎ

Posted by august5pm
,
var img = $("").attr('src', 'http://somedomain.com/image.jpg')
    .load(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) 
        {
            alert('broken image!');
        } 
        else 
        {
            $("#something").append(img);
        }
    });

'프로그래밍 > jQuery' 카테고리의 다른 글

셀렉트 박스 초기화 시키기  (0) 2016.10.19
Posted by august5pm
,