-
Javascript, jQuery 2019‧03‧26
jQuery - 마우스 이동 좌표 값 부드럽게 가져오기
기존에는 $(엘리먼트).mosemove(function(e){}); 를 이용해서 작성했었는데 이상하게 잘 좌표를 가져오다가 멈추고 특정 구간에서 제대로 못가져오고 해서 방법을 찾던 중 아래 방법으로 처리한 후 부터는 좌표값을 움직임이 끝나던 끝나지 않던 항상 제대로 부드럽게 가져오게 되었다. $(document).bind('mousemove',function(e){ console.log(event.pageX); console.log(event.pageY); }); 혹 필요에 따라 $(document) 대신 엘리먼트등 대상을 넣으면 된다. 그리고 한번만 바인딩해야지 인터벌이나 애니메이션에 넣어서 계속 바인딩 시키면 […]
-
Javascript, jQuery 2016‧12‧12
JS - datepicker(jQueryUI,달력) 이용시 두개 날짜 범위 설정
jquery UI 의 datepicker를 이용해서 input 칸에 포커스 했을 때 달력이 나오고 날짜를 선택하면 input 칸에 값이 들어가는 기본 베이스를 사용하면서 아래와 조건이 있는 경우가 있어서 예제를 만들어 보았다. 특정 기간 범위 설정 특정 기간 범위만 활성화 시작 달력과 끝 달력에 오늘 이전 날짜들은 기본 비활성화 한다. 시작 달력과 끝 달력을 수차례 수정해도 특정 기간 범위를 […]
-
2015-2016 2016‧04‧14
TOYOTA KOREA website renewal
토요타 코리아 - 웹사이트 반응형 웹사이트로 제작하였습니다. 개발 초에는 ie7부터 맞추는 작업도 있었으며, 비주얼적인 면이 많고 이와 함께 인터렉션들도 많기 때문에 여러 사용자들의 행동 변수들을 감안하여 시나리오에 맞춰 개발하게 되었습니다. youtube 영상을 담은 슬라이드 플러그인, 비규칙적 카드 레이아웃 플러그인을 만들어서 적용시켰습니다. [vimeo clip_id="203967880" height="350"]
-
Javascript, jQuery, jQuery 2016‧01‧13
풀사이즈 배경으로 동영상 or 이미지 삽입하기
풀사이즈 배경으로 동영상(또는 이미지) 삽입하기 미리보기 다운로드 인터넷 속도도 빨라 졌기 때문인지 풀사이즈 백그라운드로 동영상을 삽입하는 사례들이 종종 있습니다.예전에는 이미지로 어떻게든 시원하게 처리했었지만 이제는 동영상으로 더욱 인터렉티브한 사이트를 제공할 수 있게 되었습니다.더군다나 youtube나 vimeo와 같은 비디오 서비스의 동영상도 백그라운드로 넣을 수 있기 때문에 서버에 대한 부담감도 많이 줄어들었습니다.이번에는 간단하게 일반적인 동영상 파일을 백그라운드로 넣고 풀사이즈로 만드는 […]
-
Javascript, jQuery 2015‧12‧28
jQuery - 버튼에 마우스 오버 상태에서 클릭한 뒤 마우스 상태에 맞게 css로 만드는 팁
css로만으로 처리하면 참 좋을 듯 한 이 기능은 css에서 hover를 이용하게 되면 클릭했을 때 마우스가 hover라는 영역을 벗어나더라도 hover 상태가 되어 있을 때가 있다. 물론 마우스를 조금만 움직여도 다시 out 상태로 돌아가긴 하지만 상황에 따라 바로 out상태로 구분되어져야하는 상황이 있기 때문에 jquery 코드와 css 코드로 응용해본다. $('#menuButton').on('click',function(e){ //클릭했을 때 액션이 있다면 여기에 스크립트 작성 }).mouseenter(function(e){ […]
-
Javascript, jQuery 2015‧12‧24
JS-페이스북 공유한 뒤 공유 여부값 가져오기
페이스북을 이용해서 게시물을 공유하게 한 뒤 공유가 되었거나 실패하였는지 확인하는 코드가 필요할 때가 있습니다. 이 코드를 작성하기 앞서 페이스북 개발자 센터에서 APP ID를 발급 받으셔야합니다. APP ID 발급 방법은 구글에서 'facebook app id'만 검색해도 쉽게 설명이 잘 나와있으니 참고하신 후 APP ID를 발급 받아놓습니다. 아래는 id 값 sharebutton 을 가진 공유버튼을 클릭하면 페이스북 공유 창이 […]
-
Javascript, jQuery 2015‧01‧26
jQuery - css로 display none와 block에 상태에 따른 처리
css를 이용해서 인터렉션을 구성해 놓은 경우가 있다. 특히나 display : block 과 none를 이용해서 요소를 보이거나 사라지게 하는 상황이 많은데 스크립트로 함수를 만드는 중에 이에 따른 행동이 필요할 때가 있다. if($('.popup').is(":visible")){ // display : none가 아닐 경우 }else{ // display : none일 경우 } .popup 엘리먼트가 가시적으로 보이는지 아닌지에 따른 조건문이다.
-
Javascript, jQuery 2014‧11‧06
jQuery - 특정 속성 가진 엘리먼트 찾고 속성 제거하기
특정 속성을 가진 엘리먼트를 찾는 방법은 쉽니다. $('div[title]') 위 코드처럼 선택하면 div 중에 title 속성이 있는 엘리먼트들을 선택하게 된다.그러면 여기서 title이라는 속성을 지우면 아래와 같다. $('div[title]').removeAttr('title'); 간단하다. removeAttr이면 된다.
-
Javascript, jQuery 2014‧08‧26
IE9에서 script5022 DOM Exception: INVALID_CHARACTER_ERR (5) 오류 났을 때
반응형웹 사이트 프로젝트를 할 때 크로스 브라우징 검수를 할 때가 있다.작업하는 PC의 IE가 10이고 개발자 도구를 이용하여 IE 9 이하를 테스트하는 것과 실제 순수 IE9 이하와는 결과가 틀리게 나오는 경우가 많다. 또한 IE Tester도 비슷하게 구현하는 것인지라 최대한 가상 PC를 설치하여 테스트함을 추천한다. 위에 언급한 것과 같이 개발 도구에서 에뮬레이션으로 IE9로 설정하고 테스트 하여도 자바스크립트 […]